5548062406

Committed 13 Jul 2023 09:27PM UTC coverage: 75.587% (-1.1%) from 76.699%

Build # 5548062406

Build Type

push

github-actions

Committed by

barseghyanartur

Commit Message

Support new providers

Run Details

51 of 71 branches covered (71.83%)

Branch coverage included in aggregate %.

2 of 2 new or added lines in 1 file covered. (100.0%)

110 of 142 relevant lines covered (77.46%)

1211.37 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

74.88

/src/FileGenerator.js

import * as React from "react";
import { useState, useEffect } from "react";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import Checkbox from "@mui/material/Checkbox";
import FormControlLabel from "@mui/material/FormControlLabel";
import {
  Grid,
  Link,
  List,
  ListItemButton,
  ListItemText,
  TextField,
  Typography,
  Button,
} from "@mui/material";
import Box from "@mui/material/Box";
import Backdrop from "@mui/material/Backdrop";
import CircularProgress from "@mui/material/CircularProgress";
import Item from "@mui/material/Grid";
import Snackbar from "@mui/material/Snackbar";
import Alert from "@mui/material/Alert";
import axios from "axios";
import axiosRetry from "axios-retry";

function App() {
  if (process.env.NODE_ENV === "production") {
    console.log = function () {};
    console.debug = function () {};
    console.info = function () {};
    console.warn = console.error;
  }

  const apiUrl = process.env.REACT_APP_API_URL;
  const [loading, setLoading] = useState(true);
  const [inProgress, setInProgress] = useState(false);
  const [endpoints, setEndpoints] = useState(null);
  const [selectedEndpoint, setSelectedEndpoint] = useState(null);
  const [selectedModel, setSelectedModel] = useState(null);
  const [selectedFileExtension, setSelectedFileExtension] = useState(null);
  const [formOptions, setFormOptions] = useState({});
  const [downloadUrl, setDownloadUrl] = useState(null);
  const [models, setModels] = useState(null);
  const [filename, setFilename] = useState(null);
  const [showError, setShowError] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);
  const multilines = [
    "content",
    "data_columns",
    "options",
    "mp3_generator_kwargs",
    "pdf_generator_kwargs",
  ]; // Multi-line fields

  axiosRetry(axios, {
    retries: 20,
    retryDelay: (retryCount) => {
      console.log("retryCount");
      console.log(retryCount);
      return retryCount * 1000;
    },
  });

  useEffect(() => {
    const fetchEndpoints = async () => {
      const response = await axios.get(`${apiUrl}/openapi.json`, {
        retry: {
          retries: 20,
        },
      });
      const schema = response.data;
      const paths = schema.paths;
      const endpoints = Object.keys(paths).reduce((acc, path) => {
        const endpoint = path.split("/")[1];
        if (endpoint !== "heartbeat" && endpoint !== "providers") {
          acc[endpoint] =
            paths[path].post.requestBody.content["application/json"].schema;
        }
        return acc;
      }, {});
      setEndpoints(endpoints);
      console.log("ENDPOINTS");
      console.log(endpoints);

      const models = schema.components.schemas;
      setModels(models);
      setLoading(false);
      console.log("MODELS");
      console.log(models);
    };
    fetchEndpoints();
  }, []);

  useEffect(() => {
    if (endpoints && selectedEndpoint) {
      console.log(endpoints[selectedEndpoint]);
      setFormOptions(
        Object.fromEntries(
          Object.entries(endpoints[selectedEndpoint].properties || {}).map(
            ([name, property]) => [name, property.default]
          )
        )
      );
    }
  }, [endpoints, selectedEndpoint]);

  const handleEndpointClick = (endpoint) => {
    console.log(endpoint);
    setSelectedEndpoint(endpoint);
    setSelectedFileExtension(endpoint.slice(0, endpoint.indexOf("_file")));
    setSelectedModel(`${endpoint}_model`);
    console.log(`model: ${endpoint}_model`);
    console.log(models[`${endpoint}_model`]);
    setFormOptions(models[`${endpoint}_model`].properties || {});
    setDownloadUrl(null);
    setFilename(null);
  };

  const handleOptionChange = (event) => {
    const { name, value, checked } = event.target;
    console.log(models[selectedModel].properties);
    console.log(name);
    console.log(models[selectedModel].properties[name]);
    console.log("checked");
    console.log(checked);
    setFormOptions((prevOptions) => ({
      ...prevOptions,
      [name]:
        models[selectedModel].properties[name].type === "boolean"
          ? checked
          : value,
    }));
  };

  const handleSubmit = async () => {
    try {
      setInProgress(true);
      const body = JSON.stringify(
        Object.fromEntries(
          Object.entries(formOptions).map(([name, value]) => {
            if (["data_columns"].includes(name) && typeof value === "string") {
              if (["csv_file"].includes(selectedModel)) {
                value = value.split(",").map((str) => str.trim());
              } else {
                value = JSON.parse(value);
              }
            } else if (
              [
                "options",
                "mp3_generator_kwargs",
                "pdf_generator_kwargs",
              ].includes(name) &&
              typeof value === "string" &&
              value.trim() !== ""
            ) {
              try {
                value = JSON.parse(value);
              } catch (e) {
                console.log("invalid value");
                console.log(value);
                value = null;
              }
            } else if (["size"].includes(name) && typeof value === "string" && value.trim() !== "") {
              value = value.split(",");
            }
            console.log("name");
            console.log(name);
            console.log("value");
            console.log(value);
            if (value && value.constructor === String && value.trim() === "") {
              value = null;
            }
            return [name, value];
          })
        )
      );
      console.log("body");
      console.log(body);
      const response = await fetch(`${apiUrl}/${selectedEndpoint}/`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: body,
      });

      if (!response.ok) {
        const errorResponse = await response.json();
        console.error("Server responded with an error:", errorResponse);
        // If errorResponse contains a message, use it. Otherwise use a default message
        const _errorMessage = errorResponse.message || "An error occurred";
        // Handle the error based on errorResponse here
        setInProgress(false);
        setErrorMessage(_errorMessage);
        setShowError(true);
        return;
      }

      const blob = await response.blob();
      console.log("response");
      console.log(response);
      const downloadUrl = window.URL.createObjectURL(blob);
      setDownloadUrl(downloadUrl);
      setInProgress(false);

      // Get the content-disposition header
      const contentDisposition = response.headers.get("content-disposition");
      console.log(contentDisposition);

      // Extract the 'filename' value
      const match = /filename=([^;]+)/.exec(contentDisposition);
      console.log(match);

      let filename;
      if (match && match.length > 1) {
        filename = match[1];
        setFilename(filename);
      } else {
        setFilename(`${selectedEndpoint}.${selectedFileExtension}`);
      }
      console.log("filename");
      console.log(filename);
    } catch (err) {
      console.log("An error occurred:");
      console.log(err);
      console.error("An error occurred:", err);
      // If err object contains a message, use it. Otherwise use a default message
      const _errorMessage = err.message || "An error occurred";

      // Handle the error here
      setInProgress(false);
      setErrorMessage(_errorMessage);
      setShowError(true);
    }
  };

  const theme = createTheme();

  if (loading) {
    return (
      <ThemeProvider theme={theme}>
        <Box
          sx={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <CircularProgress size={200} />
        </Box>
      </ThemeProvider>
    );
  }

  return (
    <ThemeProvider theme={theme}>
      <Grid
        container
        spacing={0}
        columns={12}
        sx={{
          "--Grid-borderWidth": "1px",
          borderTop: "var(--Grid-borderWidth) solid",
          borderLeft: "var(--Grid-borderWidth) solid",
          borderColor: "divider",
          "& > div": {
            borderRight: "var(--Grid-borderWidth) solid",
            borderBottom: "var(--Grid-borderWidth) solid",
            borderColor: "divider",
          },
        }}
      >
        <Grid item xs={2}>
          <Item sx={{ py: 2, px: 2 }}>
            <Typography variant="h4" component="h1" gutterBottom>
              File type
            </Typography>
            <List component="nav" aria-label="main providers folders">
              {endpoints &&
                Object.keys(endpoints).map((endpoint) => (
                  <ListItemButton
                    key={endpoint}
                    selected={selectedEndpoint === endpoint}
                    onClick={() => handleEndpointClick(endpoint)}
                  >
                    <ListItemText primary={endpoint.split("_file")[0].replace(/_/g, " ")} />
                  </ListItemButton>
                ))}
            </List>
          </Item>
        </Grid>
        <Grid item xs={8}>
          <Item sx={{ py: 2, px: 2 }}>
            <Typography variant="h4" component="h1" gutterBottom>
              Options
            </Typography>
            {selectedEndpoint && endpoints && (
              <div>
                <form>
                  {Object.entries(models[selectedModel].properties || {}).map(
                    ([name, property]) => {
                      const inputProps = {
                        style: { height: "auto" },
                      };
                      const props = multilines.includes(name)
                        ? { multiline: true, rows: 4, maxRows: 20, inputProps }
                        : {};
                      const key = `${selectedModel}_${name}`;
                      if (property.type === "boolean") {
                        return (
                          <FormControlLabel
                            key={key}
                            control={
                              <Checkbox
                                name={name}
                                label={name}
                                checked={
                                  formOptions[name] || property.default || false
                                }
                                margin="normal"
                                variant="outlined"
                                onChange={handleOptionChange}
                                {...props}
                              />
                            }
                            label={property.title || name}
                          />
                        );
                      } else {
                        return (
                          <TextField
                            key={key}
                            name={name}
                            label={property.title || name}
                            defaultValue={property.default || null}
                            fullWidth
                            margin="normal"
                            variant="outlined"
                            onChange={handleOptionChange}
                            {...props}
                          />
                        );
                      }
                    }
                  )}
                  <Button
                    variant="contained"
                    color="primary"
                    onClick={handleSubmit}
                  >
                    Generate
                  </Button>
                  <Snackbar
                    anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
                    open={showError}
                    autoHideDuration={5000}
                    onClose={() => setShowError(false)}
                  >
                    <Alert severity="error">{errorMessage}</Alert>
                  </Snackbar>
                </form>

                <Backdrop
                  sx={{
                    color: "#fff",
                    zIndex: (theme) => theme.zIndex.drawer + 1,
                  }}
                  open={inProgress}
                >
                  <CircularProgress color="inherit" />
                </Backdrop>
              </div>
            )}
          </Item>
        </Grid>
        <Grid item xs={2}>
          <Item sx={{ py: 2, px: 2 }}>
            <Typography variant="h4" component="h1" gutterBottom>
              Result
            </Typography>
            {downloadUrl && (
              <Link href={downloadUrl} download={`${filename}`}>
                Download
              </Link>
            )}
          </Item>
        </Grid>
      </Grid>
    </ThemeProvider>
  );
}

export default App;

1	import * as React from "react";
2	import { useState, useEffect } from "react";
3	import { createTheme, ThemeProvider } from "@mui/material/styles";
4	import Checkbox from "@mui/material/Checkbox";
5	import FormControlLabel from "@mui/material/FormControlLabel";
6	import {
7	Grid,
8	Link,
9	List,
10	ListItemButton,
11	ListItemText,
12	TextField,
13	Typography,
14	Button,
15	} from "@mui/material";
16	import Box from "@mui/material/Box";
17	import Backdrop from "@mui/material/Backdrop";
18	import CircularProgress from "@mui/material/CircularProgress";
19	import Item from "@mui/material/Grid";
20	import Snackbar from "@mui/material/Snackbar";
21	import Alert from "@mui/material/Alert";
22	import axios from "axios";
23	import axiosRetry from "axios-retry";
24
25	function App() {
26	if (process.env.NODE_ENV === "production") {	1,980!
27	console.log = function () {};	×
28	console.debug = function () {};	×
29	console.info = function () {};	×
30	console.warn = console.error;	×
31	}
32
33	const apiUrl = process.env.REACT_APP_API_URL;	1,980✔
34	const [loading, setLoading] = useState(true);	1,980✔
35	const [inProgress, setInProgress] = useState(false);	1,974✔
36	const [endpoints, setEndpoints] = useState(null);	1,974✔
37	const [selectedEndpoint, setSelectedEndpoint] = useState(null);	1,974✔
38	const [selectedModel, setSelectedModel] = useState(null);	1,974✔
39	const [selectedFileExtension, setSelectedFileExtension] = useState(null);	1,974✔
40	const [formOptions, setFormOptions] = useState({});	1,974✔
41	const [downloadUrl, setDownloadUrl] = useState(null);	1,974✔
42	const [models, setModels] = useState(null);	1,974✔
43	const [filename, setFilename] = useState(null);	1,974✔
44	const [showError, setShowError] = useState(false);	1,974✔
45	const [errorMessage, setErrorMessage] = useState(null);	1,974✔
46	const multilines = [	1,974✔
47	"content",
48	"data_columns",
49	"options",
50	"mp3_generator_kwargs",
51	"pdf_generator_kwargs",
52	]; // Multi-line fields
53
54	axiosRetry(axios, {	1,974✔
55	retries: 20,
56	retryDelay: (retryCount) => {
57	console.log("retryCount");	×
58	console.log(retryCount);	×
59	return retryCount * 1000;	×
60	},
61	});
62
63	useEffect(() => {	1,974✔
64	const fetchEndpoints = async () => {	138✔
65	const response = await axios.get(`${apiUrl}/openapi.json`, {	138✔
66	retry: {
67	retries: 20,
68	},
69	});
70	const schema = response.data;	138✔
71	const paths = schema.paths;	138✔
72	const endpoints = Object.keys(paths).reduce((acc, path) => {	138✔
73	const endpoint = path.split("/")[1];	3,450✔
74	if (endpoint !== "heartbeat" && endpoint !== "providers") {	3,450✔
75	acc[endpoint] =	3,174✔
76	paths[path].post.requestBody.content["application/json"].schema;
77	}
78	return acc;	3,450✔
79	}, {});
80	setEndpoints(endpoints);	138✔
81	console.log("ENDPOINTS");	138✔
82	console.log(endpoints);	138✔
83
84	const models = schema.components.schemas;	138✔
85	setModels(models);	138✔
86	setLoading(false);	138✔
87	console.log("MODELS");	138✔
88	console.log(models);	138✔
89	};
90	fetchEndpoints();	138✔
91	}, []);
92
93	useEffect(() => {	1,974✔
94	if (endpoints && selectedEndpoint) {	414✔
95	console.log(endpoints[selectedEndpoint]);	138✔
96	setFormOptions(	138✔
97	Object.fromEntries(
98	Object.entries(endpoints[selectedEndpoint].properties \|\| {}).map(	276✔
99	([name, property]) => [name, property.default]	×
100	)
101	)
102	);
103	}
104	}, [endpoints, selectedEndpoint]);
105
106	const handleEndpointClick = (endpoint) => {	1,974✔
107	console.log(endpoint);	138✔
108	setSelectedEndpoint(endpoint);	138✔
109	setSelectedFileExtension(endpoint.slice(0, endpoint.indexOf("_file")));	138✔
110	setSelectedModel(`${endpoint}_model`);	138✔
111	console.log(`model: ${endpoint}_model`);	138✔
112	console.log(models[`${endpoint}_model`]);	138✔
113	setFormOptions(models[`${endpoint}_model`].properties \|\| {});	138!
114	setDownloadUrl(null);	138✔
115	setFilename(null);	138✔
116	};
117
118	const handleOptionChange = (event) => {	1,974✔
119	const { name, value, checked } = event.target;	1,284✔
120	console.log(models[selectedModel].properties);	1,284✔
121	console.log(name);	1,284✔
122	console.log(models[selectedModel].properties[name]);	1,284✔
123	console.log("checked");	1,284✔
124	console.log(checked);	1,284✔
125	setFormOptions((prevOptions) => ({	1,284✔
126	...prevOptions,
127	[name]:
128	models[selectedModel].properties[name].type === "boolean"	1,284!
129	? checked
130	: value,
131	}));
132	};
133
134	const handleSubmit = async () => {	1,974✔
135	try {	69✔
136	setInProgress(true);	69✔
137	const body = JSON.stringify(	69✔
138	Object.fromEntries(
139	Object.entries(formOptions).map(([name, value]) => {
140	if (["data_columns"].includes(name) && typeof value === "string") {	150✔
141	if (["csv_file"].includes(selectedModel)) {	3!
142	value = value.split(",").map((str) => str.trim());	×
143	} else {
144	value = JSON.parse(value);	3✔
145	}
146	} else if (	147!
147	[	147!
148	"options",
149	"mp3_generator_kwargs",
150	"pdf_generator_kwargs",
151	].includes(name) &&
152	typeof value === "string" &&
153	value.trim() !== ""
154	) {
155	try {	×
156	value = JSON.parse(value);	×
157	} catch (e) {
158	console.log("invalid value");	×
159	console.log(value);	×
160	value = null;	×
161	}
162	} else if (["size"].includes(name) && typeof value === "string" && value.trim() !== "") {	147!
163	value = value.split(",");	×
164	}
165	console.log("name");	150✔
166	console.log(name);	150✔
167	console.log("value");	150✔
168	console.log(value);	150✔
169	if (value && value.constructor === String && value.trim() === "") {	150!
170	value = null;	×
171	}
172	return [name, value];	150✔
173	})
174	)
175	);
176	console.log("body");	69✔
177	console.log(body);	69✔
178	const response = await fetch(`${apiUrl}/${selectedEndpoint}/`, {	69✔
179	method: "POST",
180	headers: {
181	"Content-Type": "application/json",
182	},
183	body: body,
184	});
185
186	if (!response.ok) {	69!
187	const errorResponse = await response.json();	×
188	console.error("Server responded with an error:", errorResponse);	×
189	// If errorResponse contains a message, use it. Otherwise use a default message
190	const _errorMessage = errorResponse.message \|\| "An error occurred";	×
191	// Handle the error based on errorResponse here
192	setInProgress(false);	×
193	setErrorMessage(_errorMessage);	×
194	setShowError(true);	×
195	return;	×
196	}
197
198	const blob = await response.blob();	69✔
199	console.log("response");	69✔
200	console.log(response);	69✔
201	const downloadUrl = window.URL.createObjectURL(blob);	69✔
202	setDownloadUrl(downloadUrl);	69✔
203	setInProgress(false);	69✔
204
205	// Get the content-disposition header
206	const contentDisposition = response.headers.get("content-disposition");	69✔
207	console.log(contentDisposition);	69✔
208
209	// Extract the 'filename' value
210	const match = /filename=([^;]+)/.exec(contentDisposition);	69✔
211	console.log(match);	69✔
212
213	let filename;
214	if (match && match.length > 1) {	69!
215	filename = match[1];	69✔
216	setFilename(filename);	69✔
217	} else {
218	setFilename(`${selectedEndpoint}.${selectedFileExtension}`);	×
219	}
220	console.log("filename");	69✔
221	console.log(filename);	69✔
222	} catch (err) {
223	console.log("An error occurred:");	×
224	console.log(err);	×
225	console.error("An error occurred:", err);	×
226	// If err object contains a message, use it. Otherwise use a default message
227	const _errorMessage = err.message \|\| "An error occurred";	×
228
229	// Handle the error here
230	setInProgress(false);	×
231	setErrorMessage(_errorMessage);	×
232	setShowError(true);	×
233	}
234	};
235
236	const theme = createTheme();	1,974✔
237
238	if (loading) {	1,974✔
239	return (	138✔
240	<ThemeProvider theme={theme}>
241	<Box
242	sx={{
243	display: "flex",
244	justifyContent: "center",
245	alignItems: "center",
246	}}
247	>
248	<CircularProgress size={200} />
249	</Box>
250	</ThemeProvider>
251	);
252	}
253
254	return (	1,836✔
255	<ThemeProvider theme={theme}>
256	<Grid
257	container
258	spacing={0}
259	columns={12}
260	sx={{
261	"--Grid-borderWidth": "1px",
262	borderTop: "var(--Grid-borderWidth) solid",
263	borderLeft: "var(--Grid-borderWidth) solid",
264	borderColor: "divider",
265	"& > div": {
266	borderRight: "var(--Grid-borderWidth) solid",
267	borderBottom: "var(--Grid-borderWidth) solid",
268	borderColor: "divider",
269	},
270	}}
271	>
272	<Grid item xs={2}>
273	<Item sx={{ py: 2, px: 2 }}>
274	<Typography variant="h4" component="h1" gutterBottom>
275	File type
276	</Typography>
277	<List component="nav" aria-label="main providers folders">
278	{endpoints &&	3,672✔
279	Object.keys(endpoints).map((endpoint) => (
280	<ListItemButton	42,228✔
281	key={endpoint}
282	selected={selectedEndpoint === endpoint}
283	onClick={() => handleEndpointClick(endpoint)}	138✔
284	>
285	<ListItemText primary={endpoint.split("_file")[0].replace(/_/g, " ")} />
286	</ListItemButton>
287	))}
288	</List>
289	</Item>
290	</Grid>
291	<Grid item xs={8}>
292	<Item sx={{ py: 2, px: 2 }}>
293	<Typography variant="h4" component="h1" gutterBottom>
294	Options
295	</Typography>
296	{selectedEndpoint && endpoints && (	5,232✔
297	<div>
298	<form>
299	{Object.entries(models[selectedModel].properties \|\| {}).map(	1,698!
300	([name, property]) => {
301	const inputProps = {	10,068✔
302	style: { height: "auto" },
303	};
304	const props = multilines.includes(name)	10,068✔
305	? { multiline: true, rows: 4, maxRows: 20, inputProps }
306	: {};
307	const key = `${selectedModel}_${name}`;	10,068✔
308	if (property.type === "boolean") {	10,068✔
309	return (	36✔
310	<FormControlLabel
311	key={key}
312	control={
313	<Checkbox
314	name={name}
315	label={name}
316	checked={
317	formOptions[name] \|\| property.default \|\| false	96✔
318	}
319	margin="normal"
320	variant="outlined"
321	onChange={handleOptionChange}
322	{...props}
323	/>
324	}
325	label={property.title \|\| name}	36!
326	/>
327	);
328	} else {
329	return (	10,032✔
330	<TextField
331	key={key}
332	name={name}
333	label={property.title \|\| name}	10,032!
334	defaultValue={property.default \|\| null}	17,469✔
335	fullWidth
336	margin="normal"
337	variant="outlined"
338	onChange={handleOptionChange}
339	{...props}
340	/>
341	);
342	}
343	}
344	)}
345	<Button
346	variant="contained"
347	color="primary"
348	onClick={handleSubmit}
349	>
350	Generate
351	</Button>
352	<Snackbar
353	anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
354	open={showError}
355	autoHideDuration={5000}
356	onClose={() => setShowError(false)}	×
357	>
358	<Alert severity="error">{errorMessage}</Alert>
359	</Snackbar>
360	</form>
361
362	<Backdrop
363	sx={{
364	color: "#fff",
365	zIndex: (theme) => theme.zIndex.drawer + 1,	1,836✔
366	}}
367	open={inProgress}
368	>
369	<CircularProgress color="inherit" />
370	</Backdrop>
371	</div>
372	)}
373	</Item>
374	</Grid>
375	<Grid item xs={2}>
376	<Item sx={{ py: 2, px: 2 }}>
377	<Typography variant="h4" component="h1" gutterBottom>
378	Result
379	</Typography>
380	{downloadUrl && (	1,905✔
381	<Link href={downloadUrl} download={`${filename}`}>
382	Download
383	</Link>
384	)}
385	</Item>
386	</Grid>
387	</Grid>
388	</ThemeProvider>
389	);
390	}
391
392	export default App;

barseghyanartur / faker-file-ui / 5548062406

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous