· 3 years ago · Jun 12, 2022, 11:10 PM
1import { useContext, useEffect, useState } from "react";
2import { useParams } from "react-router";
3import Api from "../../Api";
4import { CartContext } from "../../context/cartContext";
5import { TagContext } from "../../context/tagContext";
6
7const EditPizza = () => {
8 const { id } = useParams();
9 const [pizza, setPizza] = useState({ tags: [] });
10 const [loading, setLoading] = useState(false);
11 const tagContext = useContext(TagContext);
12 const { pizzaProducts, setPizzaProducts } = useContext(CartContext);
13 const tags = tagContext.tags;
14 console.log({ tags });
15 // const tags = ['discount', 'vege', 'special-tag'];
16 const [checkedState, setCheckedState] = useState(
17 tags.map((t) => pizza.tags.includes(t))
18 );
19 const handleCheckedState = (position) => {
20 const updatedCheckedState = checkedState.map((item, index) =>
21 index === position ? !item : item
22 );
23 setCheckedState(updatedCheckedState);
24 };
25
26 useEffect(
27 function () {
28 const newTags = checkedState
29 .map((value, index) => {
30 return value ? tags[index] : null;
31 })
32 .filter((tag) => tag !== null);
33 console.log("checkedState", checkedState);
34 console.log("tags", tags);
35 console.log("newTags", newTags);
36 setPizza({ ...pizza, tags: newTags });
37 },
38 [checkedState]
39 );
40 useEffect(
41 function () {
42 setCheckedState(tags.map((t) => pizza.tags.includes(t)));
43 },
44 [tags]
45 );
46 useEffect(
47 function () {
48 setTimeout(function () {
49 setPizza({
50 name: "capri",
51 tags: ["vege", "discount"],
52 _id: "54234fads",
53 });
54 }, 10);
55 // Api().get(`/pizzas/${id}`).then(response => {
56 // setPizza(response.data);
57 // });
58 },
59 [id]
60 );
61 const savePizza = async () => {
62 // console.log("SAVING PIZZA...");
63 // setLoading(true);
64 // // const response = await Api().put(`/pizzas/${id}`, pizza);
65 // const { data } = response;
66 // if (data.ok === 1) {
67 // const newPizzas = pizzaProducts.map((_pizza) =>
68 // _pizza._id === id ? pizza : _pizza
69 // );
70 // setPizzaProducts(newPizzas);
71 // // alert('SUCCESSFULLY SAVED PIZZA!!');
72 // }
73 // setLoading(false);
74 };
75 const handleFormChange = (e, key) => {
76 const newPizza = { ...pizza };
77 newPizza[key] = e.target.value;
78 setPizza(newPizza);
79 };
80 const getCheckboxes = (value) => {
81 return (
82 <div>
83 {tags.map((tag, index) => {
84 // if (value.includes(tag)) {
85 // handleCheckedState(index);
86 // }
87 // console.log('value', value);
88 return (
89 <label key={tag}>
90 {" "}
91 {tag}: {}
92 <input
93 type="checkbox"
94 checked={checkedState[index]}
95 onChange={() => handleCheckedState(index)}
96 />
97 </label>
98 );
99 })}
100 </div>
101 );
102 };
103 const createInput = (key, value) => {
104 let inputType;
105 if (typeof value === "string") {
106 inputType = "text";
107 } else if (typeof value === "number") {
108 inputType = "number";
109 } else if (typeof value === "object") {
110 return getCheckboxes(value);
111 }
112 return (
113 <input
114 type={inputType}
115 key={key}
116 value={value}
117 onChange={(e) => handleFormChange(e, key)}
118 />
119 );
120 };
121 if (loading) {
122 return (
123 <div id="editPizza">
124 Loading...
125 <img src="/loading.gif" alt="" />
126 </div>
127 );
128 }
129 return (
130 <div id="editPizza">
131 HI FROM EDIT {id}
132 {JSON.stringify(pizza)}
133 <div className="editForm">
134 {Object.keys(pizza).join(", ")}
135 {Object.keys(pizza).map((key) => createInput(key, pizza[key]))}
136 <button onClick={savePizza}>Save</button>
137 </div>
138 </div>
139 );
140};
141
142export default EditPizza;
143