Skip to content

Commit 8c391a7

Browse files
tanyamadaantanyamadaan
committed
Changes found during backup
1 parent bf6cb42 commit 8c391a7

File tree

7 files changed

+680
-1
lines changed

7 files changed

+680
-1
lines changed

‎src/App copy 2.tsx‎

Lines changed: 274 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,274 @@
1+
import Paper from "@mui/material/Paper";
2+
import Typography from "@mui/material/Typography";
3+
import Container from "@mui/material/Container";
4+
import Button from "@mui/material/Button";
5+
import { Layout } from "./Layout";
6+
import FormControl from "@mui/material/FormControl";
7+
import InputLabel from "@mui/material/InputLabel";
8+
import Select, { SelectChangeEvent } from "@mui/material/Select";
9+
import MenuItem from "@mui/material/MenuItem";
10+
import { useState, useEffect } from "react";
11+
import { USECASES } from "./assets/constants";
12+
import Fade from "@mui/material/Fade";
13+
import Box from "@mui/material/Box";
14+
import { Controlled as CodeMirror } from "react-codemirror2";
15+
import Switch from "@mui/material/Switch";
16+
import FormControlLabel from "@mui/material/FormControlLabel";
17+
import { QrDialog } from "./components";
18+
import { finaldata } from "./utils";
19+
20+
import "codemirror/lib/codemirror.css";
21+
import "codemirror/theme/material.css";
22+
import "codemirror/mode/javascript/javascript.js";
23+
24+
enum Domain {
25+
Grocery = "ONDC:RET10",
26+
BPC = "ONDC:RET11",
27+
}
28+
29+
function App() {
30+
const [theme] = useState<"light" | "dark">("light");
31+
const [selectedUseCaseIndex, setselectedUseCaseIndex] = useState("");
32+
const [showCodemirror, setShowCodemirror] = useState(false);
33+
const [qrData, setQrData] = useState<any>({});
34+
const [qrkey, setqrkey] = useState<any>({});
35+
const [showQrDialog, setShowQrDialog] = useState(false);
36+
const [editType, setEditType] = useState<"json" | "placeholders">("json");
37+
const [selectedDomain, setSelectedDomain] = useState<Domain>(Domain.Grocery); // State for selected domain
38+
console.log(qrData)
39+
useEffect(() => {
40+
// Run updateQrData when the component mounts
41+
updateQrData("0"); // Assuming selectedIndex is defined in your component
42+
console.log("INSIDE")
43+
}, []);
44+
console.log("RUN")
45+
46+
const handleUsecaseChange = (event: SelectChangeEvent) => {
47+
const selectedIndex = event.target.value.toString();
48+
setselectedUseCaseIndex(selectedIndex);
49+
setShowCodemirror(true);
50+
updateQrData(selectedIndex);
51+
console.log(editType)
52+
console.log(qrData)
53+
};
54+
55+
const handleEditTypeChange = () => {
56+
setEditType(prev => (prev === "json" ? "placeholders" : "json"));
57+
};
58+
59+
useEffect(() => {
60+
console.log(selectedUseCaseIndex)
61+
console.log(editType)
62+
if (selectedUseCaseIndex !== "") {
63+
updateQrData(selectedUseCaseIndex);
64+
}
65+
}, [selectedUseCaseIndex, editType]);
66+
67+
const updateQrData = (selectedIndex: string) => {
68+
const schema = JSON.stringify(USECASES[+selectedIndex].initialValue, null, 2)
69+
setqrkey(JSON.stringify(USECASES[+selectedIndex].placeholders, null, 2));
70+
// if (editType === "json") {
71+
// setQrData(schema);
72+
// console.log(qrData)
73+
// } else {
74+
const mergedObj = finaldata(JSON.parse(schema))
75+
console.log(qrkey)
76+
setQrData(JSON.stringify(mergedObj));
77+
console.log(qrkey)
78+
// }
79+
};
80+
81+
useEffect(() => {
82+
console.log("Edit type:", qrData);
83+
try {
84+
const parsedData = JSON.parse(qrData);
85+
Object.keys(parsedData).forEach((key) => {
86+
console.log(key, ":", parsedData[key]);
87+
console.log(qrkey)
88+
console.log(JSON.parse(qrkey)[key])
89+
});
90+
} catch (error) {
91+
console.error("Error parsing JSON:", error);
92+
}
93+
}, [qrData, qrkey]);
94+
95+
96+
const handleOnBeforeChange = (_editor: unknown, _data: unknown, value: string) => {
97+
//setQrData(value);
98+
updateQrData("0")
99+
};
100+
101+
const handleDomainChange = (event: React.ChangeEvent<{ value: unknown }>) => { // Handle domain change
102+
setSelectedDomain(event.target.value as Domain);
103+
};
104+
105+
return (
106+
<Layout theme={theme}>
107+
<Container
108+
sx={{
109+
minHeight: "100vh",
110+
display: "flex",
111+
alignItems: "center",
112+
flexDirection: "column",
113+
py: 2,
114+
}}
115+
>
116+
<img src={"./ondc_logo.png"} />
117+
<Typography variant="h4">
118+
<i>QR Code Generator</i>
119+
</Typography>
120+
<Paper
121+
sx={{
122+
p: 2,
123+
maxWidth: 350,
124+
width: "100%",
125+
display: "flex",
126+
justifyContent: "center",
127+
alignItems: "center",
128+
flexDirection: "column",
129+
}}
130+
>
131+
<Typography color="text.secondary">Select your Usecase:</Typography>
132+
<FormControl fullWidth>
133+
<InputLabel id="usecase-select-label">Usecase</InputLabel>
134+
<Select
135+
labelId="usecase-select-label"
136+
id="usecase-select"
137+
value={selectedUseCaseIndex}
138+
label="Usecase"
139+
onChange={handleUsecaseChange}
140+
>
141+
{USECASES.map((usecase, idx) => (
142+
<MenuItem value={idx} key={"usecase-" + idx}>
143+
{usecase.name}
144+
</MenuItem>
145+
))}
146+
</Select>
147+
</FormControl>
148+
<Box
149+
sx={{ width: "100%", display: "flex", justifyContent: "flex-end" }}
150+
>
151+
<FormControlLabel
152+
control={<Switch checked={editType === "placeholders"} onChange={handleEditTypeChange} />}
153+
label="Placeholders"
154+
/>
155+
</Box>
156+
<Fade in={showCodemirror} timeout={1000} unmountOnExit>
157+
<Box
158+
sx={{
159+
mt: 2
160+
}}
161+
>
162+
<Typography variant="h6" color="text.secondary">
163+
{/* {editType === "json" ? "Edit the JSON code:" : "Edit the placeholders:"} */}
164+
</Typography>
165+
{
166+
Object.entries(JSON.parse(qrData)).map(([key]) => (
167+
<div key={key}>
168+
<Typography variant="subtitle1" color="text.secondary">{JSON.parse(qrkey)[key]}:</Typography>
169+
{key === "domain" ? (
170+
<select id="domain-select" value={selectedDomain} onChange={handleDomainChange}>
171+
{Object.values(Domain).map((domain) => (
172+
<option key={domain} value={domain}>
173+
{domain}
174+
</option>
175+
))}
176+
</select>
177+
) : (
178+
<input
179+
key={qrkey[key]}
180+
type="text"
181+
// placeholder={placeholder}
182+
value={JSON.parse(qrData)[key]}
183+
onChange={(e) => {
184+
const newData = JSON.parse(qrData);
185+
newData[key] = e.target.value;
186+
setQrData(JSON.stringify(newData, null, 2));
187+
}}
188+
style={{ marginBottom: "10px" }}
189+
/>
190+
)}
191+
</div>
192+
))
193+
194+
}
195+
{/* editType === "json" ? (
196+
<CodeMirror
197+
value={qrData}
198+
options={{
199+
theme: "material",
200+
height: "auto",
201+
viewportMargin: Infinity,
202+
mode: {
203+
name: "javascript",
204+
json: true,
205+
statementIndent: 2,
206+
},
207+
lineNumbers: true,
208+
lineWrapping: true,
209+
indentWithTabs: false,
210+
tabSize: 2,
211+
}}
212+
onBeforeChange={handleOnBeforeChange}
213+
/>
214+
) : (
215+
Object.entries(JSON.parse(qrData)).map(([key]) => (
216+
<div key={key}>
217+
<Typography variant="subtitle1" color="text.secondary">{JSON.parse(qrkey)[key]}:</Typography>
218+
{key === "domain" ? (
219+
<select id="domain-select" value={selectedDomain} onChange={handleDomainChange}>
220+
{Object.values(Domain).map((domain) => (
221+
<option key={domain} value={domain}>
222+
{domain}
223+
</option>
224+
))}
225+
</select>
226+
) : (
227+
<input
228+
key={qrkey[key]}
229+
type="text"
230+
// placeholder={placeholder}
231+
value={JSON.parse(qrData)[key]}
232+
onChange={(e) => {
233+
const newData = JSON.parse(qrData);
234+
newData[key] = e.target.value;
235+
setQrData(JSON.stringify(newData, null, 2));
236+
}}
237+
style={{ marginBottom: "10px" }}
238+
/>
239+
)}
240+
</div>
241+
))
242+
)} */}
243+
<Button
244+
variant="contained"
245+
fullWidth
246+
sx={{ mt: 2 }}
247+
onClick={() => setShowQrDialog(true)}
248+
>
249+
Generate QR
250+
</Button>
251+
</Box>
252+
</Fade>
253+
<div>
254+
<label htmlFor="domain-select">Select Domain:</label>
255+
<select id="domain-select" value={selectedDomain} onChange={handleDomainChange}>
256+
{Object.values(Domain).map((domain) => (
257+
<option key={domain} value={domain}>
258+
{domain}
259+
</option>
260+
))}
261+
</select>
262+
</div>
263+
</Paper>
264+
<QrDialog
265+
onClose={() => setShowQrDialog(false)}
266+
open={showQrDialog}
267+
qrData={qrData}
268+
/>
269+
</Container>
270+
</Layout>
271+
);
272+
}
273+
274+
export default App;

0 commit comments

Comments
 (0)