+ {value === index && (
+
+ {children}
+
+ )}
+
+ );
+ }
+
+ TabPanel.propTypes = {
+ children: PropTypes.node,
+ index: PropTypes.number.isRequired,
+ value: PropTypes.number.isRequired,
+ };
+
+ function a11yProps(index) {
+ return {
+ id: `vertical-tab-${index}`,
+ 'aria-controls': `vertical-tabpanel-${index}`,
+ };
+ }
+
+const AnalysesOverview = (props) => {
+ const navigate = useNavigate();
+ const [tableData, setTableData] = useState([{article_id: -1, count: 0}]);
+ const [fromDate, setFromDate] = useState(dayjs('2023-01-01'));
+ const [toDate, setToDate] = useState(dayjs('2023-09-01'));
+ const [value, setValue] = React.useState(0);
+
+ const handleChange = (event, newValue) => {
+ setValue(newValue);
+ };
+
+ useEffect(()=>{
+
+ },[])
+
+ const handlePlotButton = async () => {
+ const data = {fromDate: fromDate.format("YYYY-MM-DD"), toDate: toDate.format("YYYY-MM-DD")};
+ console.log(data);
+ const receivedData = await axios.post(baseURL+"/analyses/countArticles", {
+ data: data,
+ })
+ setTableData(receivedData.data)
+ }
+
+ const handleBrandPlotButton = async () => {
+ const data = {fromDate: fromDate.format("YYYY-MM-DD"), toDate: toDate.format("YYYY-MM-DD")};
+ console.log(data);
+ const receivedData = await axios.post(baseURL+"/analyses/countBrands", {
+ data: data,
+ })
+ setTableData(receivedData.data)
+ }
+
+ return (
+
+
+
+ Übersicht über alle Analysen
+
+
+
+
+
+
+
+ {setFromDate(val)}}
+ />
+ {setToDate(val)}}
+ />
+
+
+ (val.count) ),
+ orientation: 'h'
+ },
+ ]}
+ layout={ {height: 3500, title: 'Häufigkeit Artikel',
+ yaxis: {
+ tickvals: Array.from(Array(tableData.length).keys()),
+ ticktext: tableData.map( (val) => (val.article_name) ),
+ automargin: true,
+ }}
+ }
+ />
+
+
+
+ {setFromDate(val)}}
+ />
+ {setToDate(val)}}
+ />
+
+
+ (val.count) ),
+ orientation: 'h'
+ },
+ ]}
+ layout={ {height: 3500, title: 'Häufigkeit Marken',
+ yaxis: {
+ tickvals: Array.from(Array(tableData.length).keys()),
+ ticktext: tableData.map( (val) => (val.brand_name) ),
+ automargin: true,
+ }}
+ }
+ />
+
+
+ Item Three
+
+
+ Item Four
+
+
+ Item Five
+
+
+ Item Six
+
+
+ Item Seven
+
+
+
+
+
+
+
+
+ );
+}
+
+export default AnalysesOverview
\ No newline at end of file
diff --git a/reactFrontend/src/components/ArticleDetails.component.js b/reactFrontend/src/components/ArticleDetails.component.js
new file mode 100644
index 0000000..f9b83ba
--- /dev/null
+++ b/reactFrontend/src/components/ArticleDetails.component.js
@@ -0,0 +1,535 @@
+import {useState, useEffect} from 'react'
+import React from 'react'
+
+import axios from 'axios';
+
+import { useLocation } from 'react-router-dom';
+
+import { Grid, Typography, TextField, Select, MenuItem, Stack} from '@mui/material'
+import { Button, Paper, styled, } from '@mui/material'
+import Box from '@mui/material/Box';
+import { grey } from '@mui/material/colors';
+
+import Snackbar from '@mui/material/Snackbar';
+import Alert from '@mui/material/Alert';
+
+//import ReceipeCanvas from "./Canvas.component"
+import CategoryTree from "./CategoryTree.component"
+import ListFieldApi from "./ListFieldApi.component"
+import PackagingDataGrid2 from "./PackagingDataGrid2.component"
+import NutriDataGrid from "./NutriDataGrid.component"
+import PictureCard from "./pictureCard.component"
+import IngredienceDataGrid from "./IngredienceDataGrid.component"
+
+const baseURL = "http://localhost:8000/api"
+
+const Item = styled(Paper)(({ theme }) => ({
+ backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
+ ...theme.typography.body2,
+ padding: theme.spacing(1),
+ textAlign: 'center',
+ color: theme.palette.text.secondary,
+}));
+
+//article is pushed from PurchaseDetail.component
+const ArticleDetails = (props) => {
+ const location = useLocation();
+ var earlyExit = false;
+ if (location.state != null){
+ console.log(location)
+ console.log(location.state.id)
+ console.log(location.state.article_id)
+ }
+ else {
+ console.log("No data to show");
+ console.log(location)
+ location.state = {'article_id': {'name': '','EAN':'', 'brand':''}};
+ console.log(location)
+ earlyExit = true;
+ }
+
+ const units = ['kg','g','l','ml','St.','kJ','kcal','µg'];
+ const grades = ['','A','B','C','D','E'];
+ const novas = ['','1','2','3','4'];
+
+ const [article, setArticle] = useState(location.state.article_id);
+ const [name, setName] = useState(article.name);
+ const [EAN, setEAN] = useState(article.EAN);
+ const [offlink, setOfflink] = useState(article.offlink);
+ const [quantityPerPackage, setQuantityPerPackage] = useState(article.quantityPerPackage);
+ const [unit, setUnit] = useState(article.unit);
+ //const [nutritionGrade, setNutritionGrade] = useState(article.nutritionGrade);
+ //const [novaGroup, setNovaGroup] = useState(article.novaGroup);
+ //const [ecoGrade, setEcoGrade] = useState(article.ecoGrade);
+
+ const [snackbar, setSnackbar] = useState(null);
+
+ const EANvalid = () => {
+ if (EAN === null)
+ return false;
+ else {
+ if (EAN.length === 13 || EAN.length === 8) {
+ return true;
+ } else {
+ return false;
+ }
+ }
+ }
+
+ const handleSearchButton = async () => {
+ try {
+ const ans = await axios.get(baseURL+"/offsearch_get_by_ean/"+EAN+"/"+article.pk, { });
+
+ //setArticle(ans.data.article);
+ const newArticle = ans.data;
+ setArticle(newArticle);
+
+ //console.log('New Article:')
+ //console.log(newArticle)
+ location.state.article_id = newArticle;
+ setSnackbar({ children: 'Daten erfolgreich übernommen', severity: 'success' });
+
+ }
+ catch(error){
+ setSnackbar({ children: error.message, severity: 'error' });
+ }
+ };
+
+ const handelArticleChange = (value) => {
+ setArticle(value);
+ }
+
+ const handleArticleChangeAPI = async (event, field, value) => {
+ try {
+ if (field === 'nutritionGrade' || field === 'novaGroup' || field === 'ecoGrade'){
+ console.log(value)
+ const newArticle = { ...article, [field]: value};
+ const sendArticle = await axios.put(baseURL+"/article/"+article.pk, {
+ article: newArticle
+ });
+ setArticle(newArticle);
+ }
+ else {
+
+ const newArticle = { ...article, [field]: value};
+ const sendArticle = await axios.put(baseURL+"/article/"+article.pk, {
+ article: newArticle
+ });
+ setArticle(newArticle);
+ }
+
+ setSnackbar({ children: 'Änderungen erfolgreich gespeichert', severity: 'success' });
+
+
+ }
+ catch(error){
+ setSnackbar({ children: error.message, severity: 'error' });
+ setName(eval('article.'+field));
+ }
+
+ }
+
+
+ const handleCloseSnackbar = () => setSnackbar(null);
+
+ if (earlyExit){
+ return(![NutriScore]({"http://127.0.0.1:8080/Nutri-score-"+article.nutritionGrade+".svg"})
+ ![NovaGroup]({"http://127.0.0.1:8080/nova-group-"+article.novaGroup+".svg"})
+ ![EcoGrade]({"http://127.0.0.1:8080/Eco-score-"+article.ecoGrade+".svg"})
+
+ {!!snackbar && (
+
+
+ )}
+
+
+
+
+ Übersicht über alle Artikel
+
+
+
+
+ {
+ tableData.map(data => (
+
+
+ ))
+ }
+
+
+
+
+ );
+}
+
+export default ArticelOverview
\ No newline at end of file
diff --git a/reactFrontend/src/components/Canvas.component.js b/reactFrontend/src/components/Canvas.component.js
new file mode 100644
index 0000000..022beec
--- /dev/null
+++ b/reactFrontend/src/components/Canvas.component.js
@@ -0,0 +1,193 @@
+import React from 'react'
+import { useRef, useEffect, useState } from 'react'
+
+const ReceipeCanvas = props => {
+
+ const canvasRef = useRef(null)
+ const contextRef = useRef(null);
+
+ const { image, myRef, setNewRect, ...rest } = props
+
+ const [isDrawing, setIsDrawing] = useState(false);
+
+ //const [data, setData] = useState(drawData)
+
+ const canvasOffSetX = useRef(null);
+ const canvasOffSetY = useRef(null);
+ const startX = useRef(null);
+ const startY = useRef(null);
+ const rectWidth = useRef(null);
+ const rectHeight = useRef(null);
+ const imgWidth = useRef(null);
+ const imgHeight = useRef(null);
+
+ var ratio;
+
+ const draw = (drawData) => {
+ console.log('draw')
+ //contextRef.current.beginPath();
+ contextRef.current.strokeStyle="red";
+ //contextRef.current.rect(drawData.location_x*ratio,drawData.location_y*ratio,drawData.location_w*ratio,drawData.location_h*ratio);
+ //contextRef.current.stroke();
+
+ const hRatio = contextRef.current.canvas.width / image.width;
+
+ //Clears the entire canvas
+ contextRef.current.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
+
+ //Redraw the background image
+ contextRef.current.drawImage(image, 0,0,
+ image.width,
+ image.height,
+ 0,0,
+ image.width*hRatio,
+ image.height*hRatio);
+
+ contextRef.current.strokeRect(drawData.location_x*hRatio,drawData.location_y*hRatio,drawData.location_w*hRatio,drawData.location_h*hRatio);
+ }
+
+ const drawImage = async (image) => {
+ console.log('Draw image fkt')
+ /*
+ var img = new Image();
+ img.onload = function(){
+ imgWidth.current = img.naturalWidth
+ imgHeight.current = img.naturalHeight;
+ //console.log("width,height:", img.width, img.height);
+ //console.log("offsetW,offsetH:", img.offsetWidth, img.offsetHeight);
+ }
+ img.src = image.src;
+ */
+ await image.decode()
+ contextRef.current.clearRect(0, 0, contextRef.current.canvas.width, contextRef.current.canvas.height);
+
+ ratio = contextRef.current.canvas.width / image.width;
+ contextRef.current.canvas.height = image.height*ratio;
+ contextRef.current.drawImage(image, 0,0,
+ image.width,
+ image.height,
+ 0,0,
+ image.width*ratio,
+ image.height*ratio);
+
+
+ console.log(image.width, ratio, contextRef.current.canvas.height)
+ }
+
+ myRef.current.draw = draw
+ myRef.current.drawImage = drawImage
+
+
+ useEffect(() => {
+ const canvas = canvasRef.current
+ const context = canvas.getContext('2d')
+ context.canvas.width = 300
+
+ context.clearRect(0, 0, context.canvas.width, context.canvas.height);
+ ratio = context.canvas.width / image.width ;
+ context.canvas.height = image.height*ratio;
+
+ context.drawImage(image, 0,0,
+ image.width,
+ image.height,
+ 0,0,
+ image.width*ratio,
+ image.height*ratio);
+
+ //draw(context,hRatio);
+
+ contextRef.current = context;
+
+ console.log('useeffect',image)
+ },[image])
+
+ const startDrawingRectangle = ({nativeEvent}) => {
+ nativeEvent.preventDefault();
+ nativeEvent.stopPropagation();
+
+ const canvasOffSet = canvasRef.current.getBoundingClientRect();
+ canvasOffSetX.current = canvasOffSet.left;
+ canvasOffSetY.current = canvasOffSet.top;
+
+ startX.current = nativeEvent.clientX - canvasOffSetX.current;
+ startY.current = nativeEvent.clientY - canvasOffSetY.current;
+ console.log('#nativ',nativeEvent.clientX,nativeEvent.clientY)
+ setIsDrawing(true);
+ console.log("Start drawing")
+ };
+
+ const drawRectangle = ({nativeEvent}) => {
+ if (!isDrawing) {
+ return;
+ }
+
+ nativeEvent.preventDefault();
+ nativeEvent.stopPropagation();
+
+ const newMouseX = nativeEvent.clientX - canvasOffSetX.current;
+ const newMouseY = nativeEvent.clientY - canvasOffSetY.current;
+
+ rectWidth.current = newMouseX - startX.current;
+ rectHeight.current = newMouseY - startY.current;
+
+ contextRef.current.strokeStyle="red";
+
+ //Clears the entire canvas
+ contextRef.current.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
+
+ //Redraw the background image
+ const hRatio = contextRef.current.canvas.width / image.width;
+ contextRef.current.drawImage(image, 0,0,
+ image.width,
+ image.height,
+ 0,0,
+ image.width*hRatio,
+ image.height*hRatio);
+
+ contextRef.current.strokeRect(startX.current, startY.current, rectWidth.current, rectHeight.current);
+
+
+ };
+
+ const stopDrawingRectangle = ({nativeEvent}) => {
+ nativeEvent.preventDefault();
+ nativeEvent.stopPropagation();
+
+ const hRatio = contextRef.current.canvas.width / image.width;
+ console.log({location_x: startX.current/hRatio, location_y: startY.current/hRatio, location_w: rectWidth.current/hRatio,location_h: rectHeight.current/hRatio})
+ if (startX.current/hRatio < 0){
+ startX.current = 0;
+ }
+ if ((rectWidth.current < 0) && (rectHeight.current > 0)) {
+ setNewRect({location_x: (startX.current+rectWidth.current)/hRatio, location_y: startY.current/hRatio, location_w: -rectWidth.current/hRatio,location_h: rectHeight.current/hRatio});
+ }
+ else if ((rectWidth.current > 0) && (rectHeight.current < 0)) {
+ setNewRect({location_x: startX.current/hRatio, location_y: (startY.current+rectHeight.current)/hRatio, location_w: rectWidth.current/hRatio,location_h: -rectHeight.current/hRatio});
+ }
+ else if ((rectHeight.current < 0) && (rectWidth.current < 0)) {
+ console.log('<<')
+ setNewRect({location_x: (startX.current+rectWidth.current)/hRatio, location_y: (startY.current+rectHeight.current)/hRatio, location_w: -rectWidth.current/hRatio,location_h: -rectHeight.current/hRatio});
+ }
+ else {
+ setNewRect({location_x: startX.current/hRatio, location_y: startY.current/hRatio, location_w: rectWidth.current/hRatio,location_h: rectHeight.current/hRatio});
+ }
+
+ setIsDrawing(false);
+
+ };
+
+ return
+}
+
+ReceipeCanvas.defaultProps = {
+ myRef: {current: {}}
+}
+
+export default ReceipeCanvas
diff --git a/reactFrontend/src/components/CategoryTree.component.js b/reactFrontend/src/components/CategoryTree.component.js
new file mode 100644
index 0000000..15ae369
--- /dev/null
+++ b/reactFrontend/src/components/CategoryTree.component.js
@@ -0,0 +1,94 @@
+import {useState, useEffect} from 'react'
+import React from 'react'
+
+import axios from 'axios';
+
+import {Snackbar, Alert} from '@mui/material';
+
+import TreeView from '@mui/lab/TreeView';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import TreeItem from '@mui/lab/TreeItem';
+
+const baseURL = "http://localhost:8000/api"
+const apiURL = "/article/categories/"
+
+
+
+const CategoryTree = (props) => {
+ const { value, article, onChange } = props;
+
+ const [categories, setCategories] = useState({id: 'root', data: {id: -1, name: ''}});
+ const [snackbar, setSnackbar] = useState(null);
+
+ const renderTree = (nodes) => (
+
+ String(x)) }
+ defaultExpandIcon={
+ {!!snackbar && (
+
+
+ )}
+
+ );
+}
+
+export default CategoryTree
+
diff --git a/reactFrontend/src/components/Home.js b/reactFrontend/src/components/Home.js
new file mode 100644
index 0000000..d0716eb
--- /dev/null
+++ b/reactFrontend/src/components/Home.js
@@ -0,0 +1,17 @@
+import React, { Component } from "react";
+
+export default class Home extends Component {
+ render() {
+ return (
+
+
+ );
+ }
+}
diff --git a/reactFrontend/src/components/IngredienceDataGrid.component.jsx b/reactFrontend/src/components/IngredienceDataGrid.component.jsx
new file mode 100644
index 0000000..78b645c
--- /dev/null
+++ b/reactFrontend/src/components/IngredienceDataGrid.component.jsx
@@ -0,0 +1,362 @@
+import {useState, useEffect} from 'react'
+import React from 'react'
+
+import axios from 'axios';
+
+
+import PropTypes from 'prop-types';
+
+//import { useNavigate, useLocation } from 'react-router-dom';
+import { Button } from '@mui/material'
+
+import AddIcon from '@mui/icons-material/Add';
+import DeleteIcon from '@mui/icons-material/DeleteOutlined';
+
+import { DataGrid, GridToolbarContainer, GridActionsCellItem } from '@mui/x-data-grid';
+import Snackbar from '@mui/material/Snackbar';
+import Alert from '@mui/material/Alert';
+import Grid from '@mui/material/Grid';
+import Dialog from '@mui/material/Dialog';
+import TextField from '@mui/material/TextField';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+
+import ListFieldApiwoArticle from "./ListFieldApiwoArticle.component"
+
+const baseURL = "http://localhost:8000/api"
+const apiURL = "/article/ingrediences/"
+
+
+
+function EditToolbar(props) {
+ const { setTableData, articleId, setOpenAddDialog } = props;
+
+ const handleNewEntryClick = async () => {
+
+ const newValue = { ingredient: {id: -1, name: 'Bitte auswählen'}, percent: null, isNew: true, article: articleId };
+ const receivedData = await axios.post(baseURL+"/article/articleIngrediences/"+articleId, {
+ newValue,
+ })
+
+ //console.log(receivedData)
+ const newRow = { id: receivedData.data.id, ingredient: {id: -1, name: 'Bitte auswählen'}, percent: receivedData.data.percent, isNew: true, article: receivedData.data.article, position: receivedData.data.position };
+
+ setTableData((oldRows) => [...oldRows, newRow]);
+ };
+
+ const handleNewIngredientClick = () => {
+ setOpenAddDialog(true);
+ /*
+ const newValue = { packaging_id: {id: -1, name: 'Bitte auswählen'}, weight: 0, isNew: true, article_id: articleId };
+ const receivedData = await axios.post(baseURL+"/article/articleIngrediences/"+articleId, {
+ newValue,
+ })
+
+ //console.log(receivedData)
+ const newRow = { id: receivedData.data.id, ingredient: {id: -1, name: 'Bitte auswählen'}, percent: receivedData.data.percent, isNew: true, article: receivedData.data.article, position: receivedData.data.positio };
+
+ setTableData((oldRows) => [...oldRows, newRow]);
+ */
+ };
+
+
+
+
+ return (
+
+
+ Home page
+A simple app showing react button click navigation
+ +
+ row.internalId}
+ processRowUpdate={processRowUpdate}
+ //onProcessRowUpdateError={handleProcessRowUpdateError}
+ experimentalFeatures={{ newEditingApi: true }}
+ components={{
+ Toolbar: EditToolbar,
+ }}
+ componentsProps={{
+ toolbar: { setTableData, articleId, setOpenAddDialog },
+ }}
+
+ />
+
+ {!!snackbar && (
+
+
+ )}
+
+ );
+}
+
+export default IngredienceDataGrid
diff --git a/reactFrontend/src/components/ListFieldApi.component.js b/reactFrontend/src/components/ListFieldApi.component.js
new file mode 100644
index 0000000..452050b
--- /dev/null
+++ b/reactFrontend/src/components/ListFieldApi.component.js
@@ -0,0 +1,152 @@
+import React from 'react'
+import axios from 'axios';
+import {useState, useEffect} from 'react'
+
+import {TextField, Autocomplete, createFilterOptions} from '@mui/material'
+import Snackbar from '@mui/material/Snackbar';
+import Alert from '@mui/material/Alert';
+
+const filter = createFilterOptions();
+
+const baseURL = "http://localhost:8000/api"
+
+const ListFieldApi = (props) => {
+
+ const { apiURL, titleName, addName, multiple, value, onChange, sx, article, fieldName } = props
+
+ const [list, setList] = useState([""]);
+ const [inputValue, setInputValue] = React.useState('')
+ const [snackbar, setSnackbar] = useState(null);
+
+ const handleAdd = async(newValue) => {
+ const send = await axios.post(baseURL+apiURL+'/', {
+ name: newValue,
+ })
+
+ const rec = await axios.get(baseURL+apiURL)
+
+ setList(rec.data);
+
+ };
+
+ const handleCloseSnackbar = () => setSnackbar(null);
+
+ const handleOnChange = async (event, newValue) => {
+ //Neuer Wert ist letztes Array element
+ //console.log(event)
+ //console.log(newValue)
+ if (newValue === null){
+ }
+ // Fall das wir mehr als einen Eintrag haben
+ else if (Array.isArray(newValue)) {
+ if (!(newValue.length === 0)){
+ // Wenn letztes array element nicht in der Liste der möglichen, dann haben wir ein neues Element was wir hinzufügen
+ if (!list.some(item => item.name === newValue[newValue.length - 1].name)) {
+ handleAdd(newValue[newValue.length - 1].inputValue);
+ newValue[newValue.length - 1].name = newValue[newValue.length - 1].inputValue;
+ delete newValue[newValue.length - 1]["inputValue"];
+
+ }
+ }
+ }
+ // Hinzufügen des ersten Elements
+ else{
+ if (!list.some(item => item.name === newValue.name)) {
+ handleAdd(newValue.inputValue);
+ newValue.name = newValue.inputValue;
+ delete newValue["inputValue"];
+ }
+ }
+
+ try {
+ const newArticle = { ...article, [fieldName]: newValue};
+ const sendArticle = await axios.put(baseURL+"/article/"+article.pk, {
+ article: newArticle
+ });
+
+ setSnackbar({ children: 'Änderungen erfolgreich gespeichert', severity: 'success' });
+
+ onChange(newArticle);
+ }
+ catch(error){
+ setSnackbar({ children: error.message, severity: 'error' });
+ if (Array.isArray(newValue)) {
+ newValue = newValue.slice(0, -1);
+ }
+ else {
+ newValue = null;
+ }
+ }
+ }
+
+ useEffect(()=>{
+ axios.get(baseURL+apiURL)
+ .then((res) => {
+ const data = res.data;
+ setList(data);
+ //console.log(data)
+ })
+
+ },[])
+
+ return (
+
+ {
+ if (option.name === undefined){
+ return ""
+ }
+ else{
+ return option.name
+ }
+ }}
+ isOptionEqualToValue={(option, value) => option.name === value.name}
+ inputValue={inputValue}
+ onInputChange={(_, newInputValue) => {
+ setInputValue(newInputValue)
+ }}
+ //defaultValue={[]}
+ value={value}
+ renderInput={(params) => (
+ {option.name} }
+
+ />
+ {!!snackbar && (
+
+
+ )}
+
+ )
+}
+
+export default ListFieldApi
diff --git a/reactFrontend/src/components/ListFieldApiwoArticle.component.js b/reactFrontend/src/components/ListFieldApiwoArticle.component.js
new file mode 100644
index 0000000..1c52a8e
--- /dev/null
+++ b/reactFrontend/src/components/ListFieldApiwoArticle.component.js
@@ -0,0 +1,154 @@
+import React from 'react'
+import axios from 'axios';
+import {useState, useEffect} from 'react'
+
+import {TextField, Autocomplete, createFilterOptions} from '@mui/material'
+import Snackbar from '@mui/material/Snackbar';
+import Alert from '@mui/material/Alert';
+
+const filter = createFilterOptions();
+
+const baseURL = "http://localhost:8000/api"
+
+const ListFieldApiwoArticle = (props) => {
+
+ const { apiURL, titleName, addName, multiple, value, onChange, sx, addNew} = props
+
+ const [list, setList] = useState([""]);
+ const [inputValue, setInputValue] = React.useState('')
+ const [snackbar, setSnackbar] = useState(null);
+
+ const handleAdd = async(newValue) => {
+ const send = await axios.post(baseURL+apiURL, {
+ name: newValue,
+ })
+
+ const rec = await axios.get(baseURL+apiURL)
+
+ setList(rec.data);
+
+ };
+
+ const handleCloseSnackbar = () => setSnackbar(null);
+
+ const handleOnChange = async (event, newValue) => {
+ //Neuer Wert ist letztes Array element
+ //console.log(event)
+ //console.log(newValue)
+ if (newValue === null){
+ }
+ // Fall das wir mehr als einen Eintrag haben
+ else if (Array.isArray(newValue)) {
+ if (!(newValue.length === 0)){
+ // Wenn letztes array element nicht in der Liste der möglichen, dann haben wir ein neues Element was wir hinzufügen
+ if (!list.some(item => item.name === newValue[newValue.length - 1].name)) {
+ handleAdd(newValue[newValue.length - 1].inputValue);
+ newValue[newValue.length - 1].name = newValue[newValue.length - 1].inputValue;
+ delete newValue[newValue.length - 1]["inputValue"];
+
+ }
+ }
+ }
+ // Hinzufügen des ersten Elements
+ else{
+ if (!list.some(item => item.name === newValue.name)) {
+ handleAdd(newValue.inputValue);
+ newValue.name = newValue.inputValue;
+ delete newValue["inputValue"];
+ }
+ }
+ /*
+ try {
+ const newArticle = { ...article, [fieldName]: newValue};
+ const sendArticle = await axios.put(baseURL+"/article/"+article.pk, {
+ article: newArticle
+ });
+
+ setSnackbar({ children: 'Änderungen erfolgreich gespeichert', severity: 'success' });
+ */
+ onChange(newValue);
+ /*
+ }
+ catch(error){
+ setSnackbar({ children: error.message, severity: 'error' });
+ if (Array.isArray(newValue)) {
+ newValue = newValue.slice(0, -1);
+ }
+ else {
+ newValue = null;
+ }
+ }
+ */
+ }
+
+ useEffect(()=>{
+ axios.get(baseURL+apiURL)
+ .then((res) => {
+ const data = res.data;
+ setList(data);
+ console.log(data)
+ })
+
+ },[])
+
+ return (
+
+ {
+ if (option.name === undefined){
+ return ""
+ }
+ else{
+ return option.name
+ }
+ }}
+ isOptionEqualToValue={(option, value) => option.name === value.name}
+ inputValue={inputValue}
+ onInputChange={(_, newInputValue) => {
+ setInputValue(newInputValue)
+ }}
+ //defaultValue={[]}
+ value={value}
+ renderInput={(params) => (
+ {option.name} }
+
+ />
+ {!!snackbar && (
+
+
+ )}
+
+ )
+}
+
+export default ListFieldApiwoArticle
diff --git a/reactFrontend/src/components/MarketDetail.component.js b/reactFrontend/src/components/MarketDetail.component.js
new file mode 100644
index 0000000..a7aafae
--- /dev/null
+++ b/reactFrontend/src/components/MarketDetail.component.js
@@ -0,0 +1,271 @@
+import {useState, useEffect} from 'react'
+import React from 'react'
+
+import { Grid, TextField } from '@mui/material'
+import Button from '@mui/material/Button'
+import Snackbar from '@mui/material/Snackbar';
+import Alert from '@mui/material/Alert';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import axios from 'axios';
+
+const baseURL = "http://localhost:8000/api"
+
+const MarketDetail = (props) => {
+ const [openExchangeDialog, setOpenExchangeDialog] = useState(false);
+ const [exchangeMarket, setExchangeMarket] = useState({oldMarket: {}, newMarket: {name: '', street: '', street_number: 0, zip_code: '', city: '', phone:''}, deleteOld: false});
+ const [markets, setMarkets] = useState([]);
+ const [snackbar, setSnackbar] = useState(null);
+
+ const [market, setMarket] = useState({
+ name: '',
+ street: '',
+ street_number: 0,
+ zip_code: '',
+ city: '',
+ phone: ''
+ });
+
+ useEffect(()=>{
+ axios.get(baseURL+"/market/"+props.marketId)
+ .then((res) => {
+ const data = res.data;
+ //console.log(data)
+ setMarket(data);
+ })
+
+ axios.get(baseURL+"/markets/")
+ .then((res) => {
+ console.log(res.data)
+ setMarkets(res.data);
+ })
+
+ },[])
+
+
+
+ const handleExchange = () => {
+ setExchangeMarket({ ...exchangeMarket, oldMarket: market });
+ setOpenExchangeDialog(true);
+ }
+
+ const handleExchangeClose = () => {
+ setOpenExchangeDialog(false);
+ }
+
+ const handleMarketExchange = async () => {
+ console.log(exchangeMarket)
+
+ try {
+ const receivedData = await axios.post(baseURL+"/exchangePurchaseMarket/"+props.purchaseId, {
+ data: exchangeMarket,
+ })
+
+ //const newData = tableData.map((row) => (row.id === exchangeArticle.oldRow.id ? receivedData.data : row));
+ setMarket(exchangeMarket.newMarket);
+ //const receivedData = null
+ setSnackbar({ children: 'Änderungen erfolgreich gespeichert', severity: 'success' });
+
+
+ setOpenExchangeDialog(false);
+ } catch (error) {
+ setSnackbar({ children: error.message, severity: 'error' });
+
+ }
+
+ }
+
+ const handleCloseSnackbar = () => setSnackbar(null);
+
+ const renderExchangeDialog = () => {
+ return (
+
+ )
+ }
+
+ return(
+
+ row.internalId}
+ processRowUpdate={processRowUpdate}
+ //onProcessRowUpdateError={handleProcessRowUpdateError}
+ //isCellEditable={(params) => {console.log(params);return !permanentOptions.includes(params.field) }}
+ experimentalFeatures={{ newEditingApi: true }}
+ components={{
+ Toolbar: EditToolbar,
+ }}
+ componentsProps={{
+ toolbar: { setTableData, article },
+ }}
+ initialState={{
+ sorting: {
+ sortModel: [{ field: 'id', sort: 'desc' }],
+ },
+ }}
+
+ />
+ {!!snackbar && (
+
+
+ )}
+
+ );
+}
+
+export default NutriDataGrid
diff --git a/reactFrontend/src/components/PackagingDataGrid.component.js b/reactFrontend/src/components/PackagingDataGrid.component.js
new file mode 100644
index 0000000..92631cc
--- /dev/null
+++ b/reactFrontend/src/components/PackagingDataGrid.component.js
@@ -0,0 +1,240 @@
+import {useState, useEffect} from 'react'
+import React from 'react'
+
+import axios from 'axios';
+
+import PropTypes from 'prop-types';
+
+//import { useNavigate, useLocation } from 'react-router-dom';
+import { Button, Autocomplete, TextField } from '@mui/material'
+
+import AddIcon from '@mui/icons-material/Add';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/DeleteOutlined';
+import SaveIcon from '@mui/icons-material/Save';
+import CancelIcon from '@mui/icons-material/Close';
+
+import { DataGrid, GridRowModes, GridToolbarContainer, GridActionsCellItem } from '@mui/x-data-grid';
+
+import ListFieldApi from "./ListFieldApi.component"
+
+const baseURL = "http://localhost:8000/api"
+const apiURL = "/article/packaging"
+
+
+const makeId = () => {
+ let ID = "";
+ let characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
+ for ( var i = 0; i < 12; i++ ) {
+ ID += characters.charAt(Math.floor(Math.random() * 36));
+ }
+ return ID;
+}
+
+const EditToolbar = (props) => {
+ const { onChange, setRowModesModel, setList } = props;
+
+ const [inputValue, setInputValue] = React.useState('')
+
+ const handleClick = () => {
+ const id = makeId();
+ onChange([{ id, packaging: '', weight: '', isNew: true }]);
+ setRowModesModel((oldModel) => ({
+ ...oldModel,
+ [id]: { mode: GridRowModes.Edit, fieldToFocus: 'packaging' },
+ }));
+ };
+
+ const handelMaterialChange = (event) => {
+ if (event == null){
+ setInputValue('')
+ }
+ else{
+ setInputValue(event.name);
+ }
+ //axios.get(baseURL+apiURL)
+ // .then((res) => {
+ // const data = res.data;
+ // setList(data);
+ // //console.log(data)
+ // })
+ }
+
+ return (
+
+ row.internalId}
+ processRowUpdate={processRowUpdate}
+ //onProcessRowUpdateError={handleProcessRowUpdateError}
+ experimentalFeatures={{ newEditingApi: true }}
+ components={{
+ Toolbar: EditToolbar,
+ }}
+ componentsProps={{
+ toolbar: { setTableData, articleId },
+ }}
+
+ />
+ {!!snackbar && (
+
+
+ )}
+
+ );
+}
+
+export default PackagingDataGrid2
diff --git a/reactFrontend/src/components/PurchaseDetails.component.js b/reactFrontend/src/components/PurchaseDetails.component.js
new file mode 100644
index 0000000..ee886c4
--- /dev/null
+++ b/reactFrontend/src/components/PurchaseDetails.component.js
@@ -0,0 +1,999 @@
+import {useState, useEffect} from 'react'
+import React from 'react'
+
+import axios from 'axios';
+
+import dayjs from 'dayjs';
+
+import { useNavigate, useLocation } from 'react-router-dom';
+
+import { DataGrid, GridToolbarContainer, GridActionsCellItem, GridRowModes } from '@mui/x-data-grid';
+
+import PropTypes from 'prop-types';
+
+import Grid from '@mui/material/Grid'
+import Button from '@mui/material/Button'
+import TextField from '@mui/material/TextField';
+import Snackbar from '@mui/material/Snackbar';
+import Alert from '@mui/material/Alert';
+import Box from '@mui/material/Box';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import Checkbox from '@mui/material/Checkbox';
+import InputAdornment from '@mui/material/InputAdornment';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import {Autocomplete, createFilterOptions} from '@mui/material'
+
+import { grey } from '@mui/material/colors';
+
+import AddIcon from '@mui/icons-material/Add';
+import DeleteIcon from '@mui/icons-material/DeleteOutlined';
+import EditIcon from '@mui/icons-material/Edit';
+import SaveIcon from '@mui/icons-material/Save';
+
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+
+import MarketDetail from "./MarketDetail.component";
+import ReceipeCanvas from "./Canvas.component"
+import ListFieldApiwoArticle from "./ListFieldApiwoArticle.component"
+
+const baseURL = "http://localhost:8000/api"
+
+const filter = createFilterOptions();
+
+function EditToolbar(props) {
+ const { setArticles, setOpenNewEntryDialog } = props;
+
+ const handleClick = async () => {
+ console.log("Neuer Eintrag")
+ setOpenNewEntryDialog(true);
+ const retArticles = await axios.get(baseURL+"/articles/", {
+
+ });
+
+ // Here we just add a "Neuer Artikel" object to the list of all available articles. If this is selected later on, we ask the backend for a real new object.
+ const answerWithNewArticelOption = retArticles.data.concat({pk:-1, name: 'Neuer Artikel', brand: null});
+ setArticles(answerWithNewArticelOption);
+
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+
+}
+
+export default PurchaseDetails
diff --git a/reactFrontend/src/components/PurchaseOverview.component.jsx b/reactFrontend/src/components/PurchaseOverview.component.jsx
new file mode 100644
index 0000000..1e1343f
--- /dev/null
+++ b/reactFrontend/src/components/PurchaseOverview.component.jsx
@@ -0,0 +1,162 @@
+import { Button } from '@mui/material'
+import {Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, TextField } from '@mui/material'
+//import {Autocomplete, createFilterOptions } from '@mui/material';
+import { DataGrid } from '@mui/x-data-grid';
+
+import { Grid } from '@mui/material'
+
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
+import Typography from '@mui/material/Typography';
+
+import {useState, useEffect} from 'react'
+import React from 'react'
+import { useNavigate } from 'react-router-dom';
+
+import axios from 'axios';
+
+import SelectMarketField from "./selectMarket";
+import UploadFiles from "./upload-files.component";
+
+
+//const baseURL = "https://jsonplaceholder.typicode.com/comments";
+const baseURL = "http://localhost:8000/api"
+
+
+const PurchaseOverview = (props) => {
+ const columns = [
+ {
+ field: 'edit_finished',
+ headerName: 'Fertig?',
+ type: 'boolean',
+ width: 100,
+ editable: true,
+ },
+ {
+ field: 'purchase_date',
+ headerName: 'Datum'
+ },
+ {
+ field: 'market',
+ headerName: 'Markt',
+ valueGetter: (params) => { return params.row.market.name + ', ' + params.row.market.street + ' ' + params.row.market.street_number + ', ' + params.row.market.city},
+ width: 400,
+ },
+ {
+ field: 'total_price',
+ headerName: 'Gesamtpreis',
+ flex: 1,
+ valueFormatter: (params) => {
+ if (params.value == null) {
+ return '';
+ }
+
+ //const valueFormatted = Number(params.value * 100).toLocaleString();
+ return `${params.value} €`;
+ },
+ },
+ //{field: 'body', headerName: 'Body'}
+ ]
+
+ const navigate = useNavigate();
+
+ const [tableData, setTableData] = useState([]);
+ const [openAddDialog, setOpenAddDialog] = useState(false);
+
+ const [selectedDate, setSelectedDate] = React.useState(new Date());
+
+ const handleDataGridClick = (e) => {
+ //console.log(e.row)
+ navigate('/PurchaseDetails', {state:e.row});
+
+ }
+
+ const handleClickAddDialogOpen = () => {
+ setOpenAddDialog(true);
+ };
+
+ const handleClose = () => {
+ setOpenAddDialog(false);
+ };
+
+ useEffect(()=>{
+ axios.get(baseURL+"/purchase/")
+ .then((res) => {
+ const data = res.data;
+ console.log(data)
+ setTableData(data);
+ })
+ },[])
+
+
+
+
+ return (
+ Details zum Einkauf vom {purchaseDate}
+ +
+
+
+ {renderConfirmDialog()}
+ {renderExchangeDialog()}
+ {/*Map String Dialog*/}
+
+
+ setRowModesModel(model)}
+ processRowUpdate={processRowUpdate}
+
+ experimentalFeatures={{ newEditingApi: true }}
+ components={{
+ Toolbar: EditToolbar,
+ }}
+ componentsProps={{
+ toolbar: {
+ setArticles,
+ setOpenNewEntryDialog
+ },
+
+ }}
+ />
+
+
+
+ Zahlungsart
+
+
+
+
+
+ setTotalPrice(e.target.value)}
+ label="Gesamtpreis"
+ type="number"
+ variant="standard"
+ /*
+ inputProps: object
+ Attributes applied to the input element.
+
+ InputProps: object
+ Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.
+ */
+ InputProps={{ endAdornment: € }}
+ inputProps={{ style: { textAlign: 'right' } }}
+ //onBlur={(e) => handleArticleChangeAPI(e,'EAN', e.target.value)}
+ />
+
+
+
+
+
+ {!!snackbar && (
+
+
+ )}
+
+
+
+
+ Übersicht über alle Einkäufe
+
+
+
+
+
+
+
+
+ )
+
+}
+
+export default PurchaseOverview
diff --git a/reactFrontend/src/components/Sidebar.jsx b/reactFrontend/src/components/Sidebar.jsx
new file mode 100644
index 0000000..54225b3
--- /dev/null
+++ b/reactFrontend/src/components/Sidebar.jsx
@@ -0,0 +1,53 @@
+import { Box} from '@mui/material'
+import React from 'react'
+import { useNavigate } from 'react-router-dom';
+
+import Button from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
+
+const Sidebar = () => {
+ const navigate = useNavigate();
+
+ const showArticles = (e) => {
+ console.log('Show articles');
+ navigate('/Articles', {});
+ };
+
+ const showPurchases = (e) => {
+ navigate('/', {});
+ };
+
+ const showAnalyses = (e) => {
+ console.log('Show analyses');
+ navigate('/Analyses', {});
+ };
+
+ return (
+
+
+
+
+
+
+ )
+}
+
+export default UploadFiles
diff --git a/reactFrontend/src/components/usePrompt.js b/reactFrontend/src/components/usePrompt.js
new file mode 100644
index 0000000..dcde008
--- /dev/null
+++ b/reactFrontend/src/components/usePrompt.js
@@ -0,0 +1,50 @@
+/**
+ * Prompts a user when they exit the page
+ */
+
+import { useCallback, useContext, useEffect } from 'react';
+import { UNSAFE_NavigationContext as NavigationContext } from 'react-router-dom';
+
+function useConfirmExit(confirmExit, when = true) {
+ const navigator = useContext(NavigationContext);
+
+ useEffect(() => {
+ if (!when) {
+ return;
+ }
+
+ const push = navigator.push;
+
+ navigator.push = (...args) => {
+ const result = confirmExit();
+ if (result !== false) {
+ push(...args);
+ }
+ };
+
+ return () => {
+ navigator.push = push;
+ };
+ }, [navigator, confirmExit, when]);
+}
+
+export default function usePrompt(message, when = true) {
+ useEffect(() => {
+ if (when) {
+ window.onbeforeunload = function () {
+ return message;
+ };
+ }
+
+ return () => {
+ window.onbeforeunload = null;
+ };
+ }, [message, when]);
+
+ const confirmExit = useCallback(() => {
+ const confirm = window.confirm(message);
+ return confirm;
+ }, [message]);
+ useConfirmExit(confirmExit, when);
+}
+
diff --git a/reactFrontend/src/http-common.js b/reactFrontend/src/http-common.js
new file mode 100644
index 0000000..60efea7
--- /dev/null
+++ b/reactFrontend/src/http-common.js
@@ -0,0 +1,8 @@
+import axios from "axios";
+
+export default axios.create({
+ baseURL: "http://localhost:8000/api",
+ headers: {
+ "Content-type": "application/json"
+ }
+});
diff --git a/reactFrontend/src/index.css b/reactFrontend/src/index.css
new file mode 100644
index 0000000..0e73dba
--- /dev/null
+++ b/reactFrontend/src/index.css
@@ -0,0 +1,19 @@
+body {
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+ 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+ sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+ font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+ monospace;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
diff --git a/reactFrontend/src/index.js b/reactFrontend/src/index.js
new file mode 100644
index 0000000..dfda01a
--- /dev/null
+++ b/reactFrontend/src/index.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+ 
+
+## React Apollo - Hooks
+
+[](https://badge.fury.io/js/%40apollo%2Freact-hooks)
+[](https://circleci.com/gh/apollographql/react-apollo)
+[](https://spectrum.chat/apollo)
+
+React Apollo `useQuery`, `useLazyQuery`, `useMutation`, `useSubscription` and `useApolloClient` hooks.
+
+### Installation
+
+```
+npm install @apollo/react-hooks
+```
+
+### Documentation
+
+All Apollo Client documentation, including React Apollo usage articles and helpful recipes, lives on [https://www.apollographql.com/docs/react/](https://www.apollographql.com/docs/react/)
+
+For the React Apollo API reference, visit [https://www.apollographql.com/docs/react/api/react-apollo.html](https://www.apollographql.com/docs/react/api/react-apollo.html)
diff --git a/receipeServer/frontend_old/node_modules/@apollo/react-hooks/index.d.ts b/receipeServer/frontend_old/node_modules/@apollo/react-hooks/index.d.ts
new file mode 100644
index 0000000..dca9344
--- /dev/null
+++ b/receipeServer/frontend_old/node_modules/@apollo/react-hooks/index.d.ts
@@ -0,0 +1 @@
+export * from '@apollo/client';
diff --git a/receipeServer/frontend_old/node_modules/@apollo/react-hooks/index.esm.js b/receipeServer/frontend_old/node_modules/@apollo/react-hooks/index.esm.js
new file mode 100644
index 0000000..dca9344
--- /dev/null
+++ b/receipeServer/frontend_old/node_modules/@apollo/react-hooks/index.esm.js
@@ -0,0 +1 @@
+export * from '@apollo/client';
diff --git a/receipeServer/frontend_old/node_modules/@apollo/react-hooks/index.js b/receipeServer/frontend_old/node_modules/@apollo/react-hooks/index.js
new file mode 100644
index 0000000..7c8b01f
--- /dev/null
+++ b/receipeServer/frontend_old/node_modules/@apollo/react-hooks/index.js
@@ -0,0 +1 @@
+module.exports = require('@apollo/client');
diff --git a/receipeServer/frontend_old/node_modules/@apollo/react-hooks/node_modules/@apollo/client/LICENSE b/receipeServer/frontend_old/node_modules/@apollo/react-hooks/node_modules/@apollo/client/LICENSE
new file mode 100644
index 0000000..74e180a
--- /dev/null
+++ b/receipeServer/frontend_old/node_modules/@apollo/react-hooks/node_modules/@apollo/client/LICENSE
@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2021 Apollo Graph, Inc. (Formerly Meteor Development Group, Inc.)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
diff --git a/receipeServer/frontend_old/node_modules/@apollo/react-hooks/node_modules/@apollo/client/README.md b/receipeServer/frontend_old/node_modules/@apollo/react-hooks/node_modules/@apollo/client/README.md
new file mode 100644
index 0000000..a854216
--- /dev/null
+++ b/receipeServer/frontend_old/node_modules/@apollo/react-hooks/node_modules/@apollo/client/README.md
@@ -0,0 +1,40 @@
+#
+
+## Apollo Client
+
+[](https://badge.fury.io/js/%40apollo%2Fclient)
+[](https://circleci.com/gh/apollographql/apollo-client)
+[](https://community.apollographql.com)
+
+Apollo Client is a fully-featured caching GraphQL client with integrations for React, Angular, and more. It allows you to easily build UI components that fetch data via GraphQL.
+
+## Documentation
+
+All Apollo Client documentation, including React integration articles and helpful recipes, can be found at: +[https://www.apollographql.com/docs/react/](https://www.apollographql.com/docs/react/) + +The Apollo Client API reference can be found at:
+[https://www.apollographql.com/docs/react/api/apollo-client/](https://www.apollographql.com/docs/react/api/apollo-client/) + +Learn how to use Apollo Client with self-paced hands-on training on Odyssey, Apollo's official learning platform:
+[https://odyssey.apollographql.com/](https://odyssey.apollographql.com/) + +## Maintainers + +- [@benjamn](https://github.com/benjamn) (Apollo) +- [@brainkim](https://github.com/brainkim) (Apollo) +- [@jcreighton](https://github.com/jcreighton) (Netflix) +- [@hwillson](https://github.com/hwillson) (Apollo) + +## Who is Apollo? + +[Apollo](https://apollographql.com/) builds open-source software and a graph platform to unify GraphQL across your apps and services. We help you ship faster with: + +* [Apollo Studio](https://www.apollographql.com/studio/develop/) – A free, end-to-end platform for managing your GraphQL lifecycle. Track your GraphQL schemas in a hosted registry to create a source of truth for everything in your graph. Studio provides an IDE (Apollo Explorer) so you can explore data, collaborate on queries, observe usage, and safely make schema changes. +* [Apollo Federation](https://www.apollographql.com/apollo-federation) – The industry-standard open architecture for building a distributed graph. Use Apollo’s gateway to compose a unified graph from multiple subgraphs, determine a query plan, and route requests across your services. +* [Apollo Client](https://www.apollographql.com/apollo-client/) – The most popular GraphQL client for the web. Apollo also builds and maintains [Apollo iOS](https://github.com/apollographql/apollo-ios) and [Apollo Android](https://github.com/apollographql/apollo-android). +* [Apollo Server](https://www.apollographql.com/docs/apollo-server/) – A production-ready JavaScript GraphQL server that connects to any microservice, API, or database. Compatible with all popular JavaScript frameworks and deployable in serverless environments. + +## Learn how to build with Apollo + +Check out the [Odyssey](https://odyssey.apollographql.com/) learning platform, the perfect place to start your GraphQL journey with videos and interactive code challenges. Join the [Apollo Community](https://community.apollographql.com/) to interact with and get technical help from the GraphQL community. diff --git a/receipeServer/frontend_old/node_modules/@apollo/react-hooks/node_modules/@apollo/client/apollo-client.cjs b/receipeServer/frontend_old/node_modules/@apollo/react-hooks/node_modules/@apollo/client/apollo-client.cjs new file mode 100644 index 0000000..8d6991a --- /dev/null +++ b/receipeServer/frontend_old/node_modules/@apollo/react-hooks/node_modules/@apollo/client/apollo-client.cjs @@ -0,0 +1,6582 @@ +'use strict'; + +Object.defineProperty(exports, '__esModule', { value: true }); + +var tslib = require('tslib'); +var tsInvariant = require('ts-invariant'); +var equality = require('@wry/equality'); +var zenObservableTs = require('zen-observable-ts'); +require('symbol-observable'); +var graphql = require('graphql'); +var optimism = require('optimism'); +var context = require('@wry/context'); +var trie = require('@wry/trie'); +var graphqlTag = require('graphql-tag'); +var React = require('react'); + +function _interopNamespace(e) { + if (e && e.__esModule) return e; + var n = Object.create(null); + if (e) { + for (var k in e) { + n[k] = e[k]; + } + } + n["default"] = e; + return Object.freeze(n); +} + +var React__namespace = /*#__PURE__*/_interopNamespace(React); + +function maybe(thunk) { + try { + return thunk(); + } + catch (_a) { } +} + +function shouldInclude(_a, variables) { + var directives = _a.directives; + if (!directives || !directives.length) { + return true; + } + return getInclusionDirectives(directives).every(function (_a) { + var directive = _a.directive, ifArgument = _a.ifArgument; + var evaledValue = false; + if (ifArgument.value.kind === 'Variable') { + evaledValue = variables && variables[ifArgument.value.name.value]; + __DEV__ ? tsInvariant.invariant(evaledValue !== void 0, "Invalid variable referenced in @".concat(directive.name.value, " directive.")) : tsInvariant.invariant(evaledValue !== void 0, 37); + } + else { + evaledValue = ifArgument.value.value; + } + return directive.name.value === 'skip' ? !evaledValue : evaledValue; + }); +} +function getDirectiveNames(root) { + var names = []; + graphql.visit(root, { + Directive: function (node) { + names.push(node.name.value); + }, + }); + return names; +} +function hasDirectives(names, root) { + return getDirectiveNames(root).some(function (name) { return names.indexOf(name) > -1; }); +} +function hasClientExports(document) { + return (document && + hasDirectives(['client'], document) && + hasDirectives(['export'], document)); +} +function isInclusionDirective(_a) { + var value = _a.name.value; + return value === 'skip' || value === 'include'; +} +function getInclusionDirectives(directives) { + var result = []; + if (directives && directives.length) { + directives.forEach(function (directive) { + if (!isInclusionDirective(directive)) + return; + var directiveArguments = directive.arguments; + var directiveName = directive.name.value; + __DEV__ ? tsInvariant.invariant(directiveArguments && directiveArguments.length === 1, "Incorrect number of arguments for the @".concat(directiveName, " directive.")) : tsInvariant.invariant(directiveArguments && directiveArguments.length === 1, 38); + var ifArgument = directiveArguments[0]; + __DEV__ ? tsInvariant.invariant(ifArgument.name && ifArgument.name.value === 'if', "Invalid argument for the @".concat(directiveName, " directive.")) : tsInvariant.invariant(ifArgument.name && ifArgument.name.value === 'if', 39); + var ifValue = ifArgument.value; + __DEV__ ? tsInvariant.invariant(ifValue && + (ifValue.kind === 'Variable' || ifValue.kind === 'BooleanValue'), "Argument for the @".concat(directiveName, " directive must be a variable or a boolean value.")) : tsInvariant.invariant(ifValue && + (ifValue.kind === 'Variable' || ifValue.kind === 'BooleanValue'), 40); + result.push({ directive: directive, ifArgument: ifArgument }); + }); + } + return result; +} + +function getFragmentQueryDocument(document, fragmentName) { + var actualFragmentName = fragmentName; + var fragments = []; + document.definitions.forEach(function (definition) { + if (definition.kind === 'OperationDefinition') { + throw __DEV__ ? new tsInvariant.InvariantError("Found a ".concat(definition.operation, " operation").concat(definition.name ? " named '".concat(definition.name.value, "'") : '', ". ") + + 'No operations are allowed when using a fragment as a query. Only fragments are allowed.') : new tsInvariant.InvariantError(41); + } + if (definition.kind === 'FragmentDefinition') { + fragments.push(definition); + } + }); + if (typeof actualFragmentName === 'undefined') { + __DEV__ ? tsInvariant.invariant(fragments.length === 1, "Found ".concat(fragments.length, " fragments. `fragmentName` must be provided when there is not exactly 1 fragment.")) : tsInvariant.invariant(fragments.length === 1, 42); + actualFragmentName = fragments[0].name.value; + } + var query = tslib.__assign(tslib.__assign({}, document), { definitions: tslib.__spreadArray([ + { + kind: 'OperationDefinition', + operation: 'query', + selectionSet: { + kind: 'SelectionSet', + selections: [ + { + kind: 'FragmentSpread', + name: { + kind: 'Name', + value: actualFragmentName, + }, + }, + ], + }, + } + ], document.definitions, true) }); + return query; +} +function createFragmentMap(fragments) { + if (fragments === void 0) { fragments = []; } + var symTable = {}; + fragments.forEach(function (fragment) { + symTable[fragment.name.value] = fragment; + }); + return symTable; +} +function getFragmentFromSelection(selection, fragmentMap) { + switch (selection.kind) { + case 'InlineFragment': + return selection; + case 'FragmentSpread': { + var fragment = fragmentMap && fragmentMap[selection.name.value]; + __DEV__ ? tsInvariant.invariant(fragment, "No fragment named ".concat(selection.name.value, ".")) : tsInvariant.invariant(fragment, 43); + return fragment; + } + default: + return null; + } +} + +function isNonNullObject(obj) { + return obj !== null && typeof obj === 'object'; +} + +function makeReference(id) { + return { __ref: String(id) }; +} +function isReference(obj) { + return Boolean(obj && typeof obj === 'object' && typeof obj.__ref === 'string'); +} +function isDocumentNode(value) { + return (isNonNullObject(value) && + value.kind === "Document" && + Array.isArray(value.definitions)); +} +function isStringValue(value) { + return value.kind === 'StringValue'; +} +function isBooleanValue(value) { + return value.kind === 'BooleanValue'; +} +function isIntValue(value) { + return value.kind === 'IntValue'; +} +function isFloatValue(value) { + return value.kind === 'FloatValue'; +} +function isVariable(value) { + return value.kind === 'Variable'; +} +function isObjectValue(value) { + return value.kind === 'ObjectValue'; +} +function isListValue(value) { + return value.kind === 'ListValue'; +} +function isEnumValue(value) { + return value.kind === 'EnumValue'; +} +function isNullValue(value) { + return value.kind === 'NullValue'; +} +function valueToObjectRepresentation(argObj, name, value, variables) { + if (isIntValue(value) || isFloatValue(value)) { + argObj[name.value] = Number(value.value); + } + else if (isBooleanValue(value) || isStringValue(value)) { + argObj[name.value] = value.value; + } + else if (isObjectValue(value)) { + var nestedArgObj_1 = {}; + value.fields.map(function (obj) { + return valueToObjectRepresentation(nestedArgObj_1, obj.name, obj.value, variables); + }); + argObj[name.value] = nestedArgObj_1; + } + else if (isVariable(value)) { + var variableValue = (variables || {})[value.name.value]; + argObj[name.value] = variableValue; + } + else if (isListValue(value)) { + argObj[name.value] = value.values.map(function (listValue) { + var nestedArgArrayObj = {}; + valueToObjectRepresentation(nestedArgArrayObj, name, listValue, variables); + return nestedArgArrayObj[name.value]; + }); + } + else if (isEnumValue(value)) { + argObj[name.value] = value.value; + } + else if (isNullValue(value)) { + argObj[name.value] = null; + } + else { + throw __DEV__ ? new tsInvariant.InvariantError("The inline argument \"".concat(name.value, "\" of kind \"").concat(value.kind, "\"") + + 'is not supported. Use variables instead of inline arguments to ' + + 'overcome this limitation.') : new tsInvariant.InvariantError(52); + } +} +function storeKeyNameFromField(field, variables) { + var directivesObj = null; + if (field.directives) { + directivesObj = {}; + field.directives.forEach(function (directive) { + directivesObj[directive.name.value] = {}; + if (directive.arguments) { + directive.arguments.forEach(function (_a) { + var name = _a.name, value = _a.value; + return valueToObjectRepresentation(directivesObj[directive.name.value], name, value, variables); + }); + } + }); + } + var argObj = null; + if (field.arguments && field.arguments.length) { + argObj = {}; + field.arguments.forEach(function (_a) { + var name = _a.name, value = _a.value; + return valueToObjectRepresentation(argObj, name, value, variables); + }); + } + return getStoreKeyName(field.name.value, argObj, directivesObj); +} +var KNOWN_DIRECTIVES = [ + 'connection', + 'include', + 'skip', + 'client', + 'rest', + 'export', +]; +var getStoreKeyName = Object.assign(function (fieldName, args, directives) { + if (args && + directives && + directives['connection'] && + directives['connection']['key']) { + if (directives['connection']['filter'] && + directives['connection']['filter'].length > 0) { + var filterKeys = directives['connection']['filter'] + ? directives['connection']['filter'] + : []; + filterKeys.sort(); + var filteredArgs_1 = {}; + filterKeys.forEach(function (key) { + filteredArgs_1[key] = args[key]; + }); + return "".concat(directives['connection']['key'], "(").concat(stringify(filteredArgs_1), ")"); + } + else { + return directives['connection']['key']; + } + } + var completeFieldName = fieldName; + if (args) { + var stringifiedArgs = stringify(args); + completeFieldName += "(".concat(stringifiedArgs, ")"); + } + if (directives) { + Object.keys(directives).forEach(function (key) { + if (KNOWN_DIRECTIVES.indexOf(key) !== -1) + return; + if (directives[key] && Object.keys(directives[key]).length) { + completeFieldName += "@".concat(key, "(").concat(stringify(directives[key]), ")"); + } + else { + completeFieldName += "@".concat(key); + } + }); + } + return completeFieldName; +}, { + setStringify: function (s) { + var previous = stringify; + stringify = s; + return previous; + }, +}); +var stringify = function defaultStringify(value) { + return JSON.stringify(value, stringifyReplacer); +}; +function stringifyReplacer(_key, value) { + if (isNonNullObject(value) && !Array.isArray(value)) { + value = Object.keys(value).sort().reduce(function (copy, key) { + copy[key] = value[key]; + return copy; + }, {}); + } + return value; +} +function argumentsObjectFromField(field, variables) { + if (field.arguments && field.arguments.length) { + var argObj_1 = {}; + field.arguments.forEach(function (_a) { + var name = _a.name, value = _a.value; + return valueToObjectRepresentation(argObj_1, name, value, variables); + }); + return argObj_1; + } + return null; +} +function resultKeyNameFromField(field) { + return field.alias ? field.alias.value : field.name.value; +} +function getTypenameFromResult(result, selectionSet, fragmentMap) { + if (typeof result.__typename === 'string') { + return result.__typename; + } + for (var _i = 0, _a = selectionSet.selections; _i < _a.length; _i++) { + var selection = _a[_i]; + if (isField(selection)) { + if (selection.name.value === '__typename') { + return result[resultKeyNameFromField(selection)]; + } + } + else { + var typename = getTypenameFromResult(result, getFragmentFromSelection(selection, fragmentMap).selectionSet, fragmentMap); + if (typeof typename === 'string') { + return typename; + } + } + } +} +function isField(selection) { + return selection.kind === 'Field'; +} +function isInlineFragment(selection) { + return selection.kind === 'InlineFragment'; +} + +function checkDocument(doc) { + __DEV__ ? tsInvariant.invariant(doc && doc.kind === 'Document', "Expecting a parsed GraphQL document. Perhaps you need to wrap the query string in a \"gql\" tag? http://docs.apollostack.com/apollo-client/core.html#gql") : tsInvariant.invariant(doc && doc.kind === 'Document', 44); + var operations = doc.definitions + .filter(function (d) { return d.kind !== 'FragmentDefinition'; }) + .map(function (definition) { + if (definition.kind !== 'OperationDefinition') { + throw __DEV__ ? new tsInvariant.InvariantError("Schema type definitions not allowed in queries. Found: \"".concat(definition.kind, "\"")) : new tsInvariant.InvariantError(45); + } + return definition; + }); + __DEV__ ? tsInvariant.invariant(operations.length <= 1, "Ambiguous GraphQL document: contains ".concat(operations.length, " operations")) : tsInvariant.invariant(operations.length <= 1, 46); + return doc; +} +function getOperationDefinition(doc) { + checkDocument(doc); + return doc.definitions.filter(function (definition) { return definition.kind === 'OperationDefinition'; })[0]; +} +function getOperationName(doc) { + return (doc.definitions + .filter(function (definition) { + return definition.kind === 'OperationDefinition' && definition.name; + }) + .map(function (x) { return x.name.value; })[0] || null); +} +function getFragmentDefinitions(doc) { + return doc.definitions.filter(function (definition) { return definition.kind === 'FragmentDefinition'; }); +} +function getQueryDefinition(doc) { + var queryDef = getOperationDefinition(doc); + __DEV__ ? tsInvariant.invariant(queryDef && queryDef.operation === 'query', 'Must contain a query definition.') : tsInvariant.invariant(queryDef && queryDef.operation === 'query', 47); + return queryDef; +} +function getFragmentDefinition(doc) { + __DEV__ ? tsInvariant.invariant(doc.kind === 'Document', "Expecting a parsed GraphQL document. Perhaps you need to wrap the query string in a \"gql\" tag? http://docs.apollostack.com/apollo-client/core.html#gql") : tsInvariant.invariant(doc.kind === 'Document', 48); + __DEV__ ? tsInvariant.invariant(doc.definitions.length <= 1, 'Fragment must have exactly one definition.') : tsInvariant.invariant(doc.definitions.length <= 1, 49); + var fragmentDef = doc.definitions[0]; + __DEV__ ? tsInvariant.invariant(fragmentDef.kind === 'FragmentDefinition', 'Must be a fragment definition.') : tsInvariant.invariant(fragmentDef.kind === 'FragmentDefinition', 50); + return fragmentDef; +} +function getMainDefinition(queryDoc) { + checkDocument(queryDoc); + var fragmentDefinition; + for (var _i = 0, _a = queryDoc.definitions; _i < _a.length; _i++) { + var definition = _a[_i]; + if (definition.kind === 'OperationDefinition') { + var operation = definition.operation; + if (operation === 'query' || + operation === 'mutation' || + operation === 'subscription') { + return definition; + } + } + if (definition.kind === 'FragmentDefinition' && !fragmentDefinition) { + fragmentDefinition = definition; + } + } + if (fragmentDefinition) { + return fragmentDefinition; + } + throw __DEV__ ? new tsInvariant.InvariantError('Expected a parsed GraphQL query with a query, mutation, subscription, or a fragment.') : new tsInvariant.InvariantError(51); +} +function getDefaultValues(definition) { + var defaultValues = Object.create(null); + var defs = definition && definition.variableDefinitions; + if (defs && defs.length) { + defs.forEach(function (def) { + if (def.defaultValue) { + valueToObjectRepresentation(defaultValues, def.variable.name, def.defaultValue); + } + }); + } + return defaultValues; +} + +function filterInPlace(array, test, context) { + var target = 0; + array.forEach(function (elem, i) { + if (test.call(this, elem, i, array)) { + array[target++] = elem; + } + }, context); + array.length = target; + return array; +} + +var TYPENAME_FIELD = { + kind: 'Field', + name: { + kind: 'Name', + value: '__typename', + }, +}; +function isEmpty(op, fragments) { + return op.selectionSet.selections.every(function (selection) { + return selection.kind === 'FragmentSpread' && + isEmpty(fragments[selection.name.value], fragments); + }); +} +function nullIfDocIsEmpty(doc) { + return isEmpty(getOperationDefinition(doc) || getFragmentDefinition(doc), createFragmentMap(getFragmentDefinitions(doc))) + ? null + : doc; +} +function getDirectiveMatcher(directives) { + return function directiveMatcher(directive) { + return directives.some(function (dir) { + return (dir.name && dir.name === directive.name.value) || + (dir.test && dir.test(directive)); + }); + }; +} +function removeDirectivesFromDocument(directives, doc) { + var variablesInUse = Object.create(null); + var variablesToRemove = []; + var fragmentSpreadsInUse = Object.create(null); + var fragmentSpreadsToRemove = []; + var modifiedDoc = nullIfDocIsEmpty(graphql.visit(doc, { + Variable: { + enter: function (node, _key, parent) { + if (parent.kind !== 'VariableDefinition') { + variablesInUse[node.name.value] = true; + } + }, + }, + Field: { + enter: function (node) { + if (directives && node.directives) { + var shouldRemoveField = directives.some(function (directive) { return directive.remove; }); + if (shouldRemoveField && + node.directives && + node.directives.some(getDirectiveMatcher(directives))) { + if (node.arguments) { + node.arguments.forEach(function (arg) { + if (arg.value.kind === 'Variable') { + variablesToRemove.push({ + name: arg.value.name.value, + }); + } + }); + } + if (node.selectionSet) { + getAllFragmentSpreadsFromSelectionSet(node.selectionSet).forEach(function (frag) { + fragmentSpreadsToRemove.push({ + name: frag.name.value, + }); + }); + } + return null; + } + } + }, + }, + FragmentSpread: { + enter: function (node) { + fragmentSpreadsInUse[node.name.value] = true; + }, + }, + Directive: { + enter: function (node) { + if (getDirectiveMatcher(directives)(node)) { + return null; + } + }, + }, + })); + if (modifiedDoc && + filterInPlace(variablesToRemove, function (v) { return !!v.name && !variablesInUse[v.name]; }).length) { + modifiedDoc = removeArgumentsFromDocument(variablesToRemove, modifiedDoc); + } + if (modifiedDoc && + filterInPlace(fragmentSpreadsToRemove, function (fs) { return !!fs.name && !fragmentSpreadsInUse[fs.name]; }) + .length) { + modifiedDoc = removeFragmentSpreadFromDocument(fragmentSpreadsToRemove, modifiedDoc); + } + return modifiedDoc; +} +var addTypenameToDocument = Object.assign(function (doc) { + return graphql.visit(checkDocument(doc), { + SelectionSet: { + enter: function (node, _key, parent) { + if (parent && + parent.kind === 'OperationDefinition') { + return; + } + var selections = node.selections; + if (!selections) { + return; + } + var skip = selections.some(function (selection) { + return (isField(selection) && + (selection.name.value === '__typename' || + selection.name.value.lastIndexOf('__', 0) === 0)); + }); + if (skip) { + return; + } + var field = parent; + if (isField(field) && + field.directives && + field.directives.some(function (d) { return d.name.value === 'export'; })) { + return; + } + return tslib.__assign(tslib.__assign({}, node), { selections: tslib.__spreadArray(tslib.__spreadArray([], selections, true), [TYPENAME_FIELD], false) }); + }, + }, + }); +}, { + added: function (field) { + return field === TYPENAME_FIELD; + }, +}); +var connectionRemoveConfig = { + test: function (directive) { + var willRemove = directive.name.value === 'connection'; + if (willRemove) { + if (!directive.arguments || + !directive.arguments.some(function (arg) { return arg.name.value === 'key'; })) { + __DEV__ && tsInvariant.invariant.warn('Removing an @connection directive even though it does not have a key. ' + + 'You may want to use the key parameter to specify a store key.'); + } + } + return willRemove; + }, +}; +function removeConnectionDirectiveFromDocument(doc) { + return removeDirectivesFromDocument([connectionRemoveConfig], checkDocument(doc)); +} +function getArgumentMatcher(config) { + return function argumentMatcher(argument) { + return config.some(function (aConfig) { + return argument.value && + argument.value.kind === 'Variable' && + argument.value.name && + (aConfig.name === argument.value.name.value || + (aConfig.test && aConfig.test(argument))); + }); + }; +} +function removeArgumentsFromDocument(config, doc) { + var argMatcher = getArgumentMatcher(config); + return nullIfDocIsEmpty(graphql.visit(doc, { + OperationDefinition: { + enter: function (node) { + return tslib.__assign(tslib.__assign({}, node), { variableDefinitions: node.variableDefinitions ? node.variableDefinitions.filter(function (varDef) { + return !config.some(function (arg) { return arg.name === varDef.variable.name.value; }); + }) : [] }); + }, + }, + Field: { + enter: function (node) { + var shouldRemoveField = config.some(function (argConfig) { return argConfig.remove; }); + if (shouldRemoveField) { + var argMatchCount_1 = 0; + if (node.arguments) { + node.arguments.forEach(function (arg) { + if (argMatcher(arg)) { + argMatchCount_1 += 1; + } + }); + } + if (argMatchCount_1 === 1) { + return null; + } + } + }, + }, + Argument: { + enter: function (node) { + if (argMatcher(node)) { + return null; + } + }, + }, + })); +} +function removeFragmentSpreadFromDocument(config, doc) { + function enter(node) { + if (config.some(function (def) { return def.name === node.name.value; })) { + return null; + } + } + return nullIfDocIsEmpty(graphql.visit(doc, { + FragmentSpread: { enter: enter }, + FragmentDefinition: { enter: enter }, + })); +} +function getAllFragmentSpreadsFromSelectionSet(selectionSet) { + var allFragments = []; + selectionSet.selections.forEach(function (selection) { + if ((isField(selection) || isInlineFragment(selection)) && + selection.selectionSet) { + getAllFragmentSpreadsFromSelectionSet(selection.selectionSet).forEach(function (frag) { return allFragments.push(frag); }); + } + else if (selection.kind === 'FragmentSpread') { + allFragments.push(selection); + } + }); + return allFragments; +} +function buildQueryFromSelectionSet(document) { + var definition = getMainDefinition(document); + var definitionOperation = definition.operation; + if (definitionOperation === 'query') { + return document; + } + var modifiedDoc = graphql.visit(document, { + OperationDefinition: { + enter: function (node) { + return tslib.__assign(tslib.__assign({}, node), { operation: 'query' }); + }, + }, + }); + return modifiedDoc; +} +function removeClientSetsFromDocument(document) { + checkDocument(document); + var modifiedDoc = removeDirectivesFromDocument([ + { + test: function (directive) { return directive.name.value === 'client'; }, + remove: true, + }, + ], document); + if (modifiedDoc) { + modifiedDoc = graphql.visit(modifiedDoc, { + FragmentDefinition: { + enter: function (node) { + if (node.selectionSet) { + var isTypenameOnly = node.selectionSet.selections.every(function (selection) { + return isField(selection) && selection.name.value === '__typename'; + }); + if (isTypenameOnly) { + return null; + } + } + }, + }, + }); + } + return modifiedDoc; +} + +var hasOwnProperty$3 = Object.prototype.hasOwnProperty; +function mergeDeep() { + var sources = []; + for (var _i = 0; _i < arguments.length; _i++) { + sources[_i] = arguments[_i]; + } + return mergeDeepArray(sources); +} +function mergeDeepArray(sources) { + var target = sources[0] || {}; + var count = sources.length; + if (count > 1) { + var merger = new DeepMerger(); + for (var i = 1; i < count; ++i) { + target = merger.merge(target, sources[i]); + } + } + return target; +} +var defaultReconciler = function (target, source, property) { + return this.merge(target[property], source[property]); +}; +var DeepMerger = (function () { + function DeepMerger(reconciler) { + if (reconciler === void 0) { reconciler = defaultReconciler; } + this.reconciler = reconciler; + this.isObject = isNonNullObject; + this.pastCopies = new Set(); + } + DeepMerger.prototype.merge = function (target, source) { + var _this = this; + var context = []; + for (var _i = 2; _i < arguments.length; _i++) { + context[_i - 2] = arguments[_i]; + } + if (isNonNullObject(source) && isNonNullObject(target)) { + Object.keys(source).forEach(function (sourceKey) { + if (hasOwnProperty$3.call(target, sourceKey)) { + var targetValue = target[sourceKey]; + if (source[sourceKey] !== targetValue) { + var result = _this.reconciler.apply(_this, tslib.__spreadArray([target, source, sourceKey], context, false)); + if (result !== targetValue) { + target = _this.shallowCopyForMerge(target); + target[sourceKey] = result; + } + } + } + else { + target = _this.shallowCopyForMerge(target); + target[sourceKey] = source[sourceKey]; + } + }); + return target; + } + return source; + }; + DeepMerger.prototype.shallowCopyForMerge = function (value) { + if (isNonNullObject(value)) { + if (this.pastCopies.has(value)) { + if (!Object.isFrozen(value)) + return value; + this.pastCopies.delete(value); + } + if (Array.isArray(value)) { + value = value.slice(0); + } + else { + value = tslib.__assign({ __proto__: Object.getPrototypeOf(value) }, value); + } + this.pastCopies.add(value); + } + return value; + }; + return DeepMerger; +}()); + +var toString = Object.prototype.toString; +function cloneDeep(value) { + return cloneDeepHelper(value); +} +function cloneDeepHelper(val, seen) { + switch (toString.call(val)) { + case "[object Array]": { + seen = seen || new Map; + if (seen.has(val)) + return seen.get(val); + var copy_1 = val.slice(0); + seen.set(val, copy_1); + copy_1.forEach(function (child, i) { + copy_1[i] = cloneDeepHelper(child, seen); + }); + return copy_1; + } + case "[object Object]": { + seen = seen || new Map; + if (seen.has(val)) + return seen.get(val); + var copy_2 = Object.create(Object.getPrototypeOf(val)); + seen.set(val, copy_2); + Object.keys(val).forEach(function (key) { + copy_2[key] = cloneDeepHelper(val[key], seen); + }); + return copy_2; + } + default: + return val; + } +} + +function deepFreeze(value) { + var workSet = new Set([value]); + workSet.forEach(function (obj) { + if (isNonNullObject(obj) && shallowFreeze(obj) === obj) { + Object.getOwnPropertyNames(obj).forEach(function (name) { + if (isNonNullObject(obj[name])) + workSet.add(obj[name]); + }); + } + }); + return value; +} +function shallowFreeze(obj) { + if (__DEV__ && !Object.isFrozen(obj)) { + try { + Object.freeze(obj); + } + catch (e) { + if (e instanceof TypeError) + return null; + throw e; + } + } + return obj; +} +function maybeDeepFreeze(obj) { + if (__DEV__) { + deepFreeze(obj); + } + return obj; +} + +function iterateObserversSafely(observers, method, argument) { + var observersWithMethod = []; + observers.forEach(function (obs) { return obs[method] && observersWithMethod.push(obs); }); + observersWithMethod.forEach(function (obs) { return obs[method](argument); }); +} + +function asyncMap(observable, mapFn, catchFn) { + return new zenObservableTs.Observable(function (observer) { + var next = observer.next, error = observer.error, complete = observer.complete; + var activeCallbackCount = 0; + var completed = false; + var promiseQueue = { + then: function (callback) { + return new Promise(function (resolve) { return resolve(callback()); }); + }, + }; + function makeCallback(examiner, delegate) { + if (examiner) { + return function (arg) { + ++activeCallbackCount; + var both = function () { return examiner(arg); }; + promiseQueue = promiseQueue.then(both, both).then(function (result) { + --activeCallbackCount; + next && next.call(observer, result); + if (completed) { + handler.complete(); + } + }, function (error) { + --activeCallbackCount; + throw error; + }).catch(function (caught) { + error && error.call(observer, caught); + }); + }; + } + else { + return function (arg) { return delegate && delegate.call(observer, arg); }; + } + } + var handler = { + next: makeCallback(mapFn, next), + error: makeCallback(catchFn, error), + complete: function () { + completed = true; + if (!activeCallbackCount) { + complete && complete.call(observer); + } + }, + }; + var sub = observable.subscribe(handler); + return function () { return sub.unsubscribe(); }; + }); +} + +var canUseWeakMap = typeof WeakMap === 'function' && !(typeof navigator === 'object' && + navigator.product === 'ReactNative'); +var canUseWeakSet = typeof WeakSet === 'function'; +var canUseSymbol = typeof Symbol === 'function' && + typeof Symbol.for === 'function'; + +function fixObservableSubclass(subclass) { + function set(key) { + Object.defineProperty(subclass, key, { value: zenObservableTs.Observable }); + } + if (canUseSymbol && Symbol.species) { + set(Symbol.species); + } + set("@@species"); + return subclass; +} + +function isPromiseLike(value) { + return value && typeof value.then === "function"; +} +var Concast = (function (_super) { + tslib.__extends(Concast, _super); + function Concast(sources) { + var _this = _super.call(this, function (observer) { + _this.addObserver(observer); + return function () { return _this.removeObserver(observer); }; + }) || this; + _this.observers = new Set(); + _this.addCount = 0; + _this.promise = new Promise(function (resolve, reject) { + _this.resolve = resolve; + _this.reject = reject; + }); + _this.handlers = { + next: function (result) { + if (_this.sub !== null) { + _this.latest = ["next", result]; + iterateObserversSafely(_this.observers, "next", result); + } + }, + error: function (error) { + var sub = _this.sub; + if (sub !== null) { + if (sub) + setTimeout(function () { return sub.unsubscribe(); }); + _this.sub = null; + _this.latest = ["error", error]; + _this.reject(error); + iterateObserversSafely(_this.observers, "error", error); + } + }, + complete: function () { + if (_this.sub !== null) { + var value = _this.sources.shift(); + if (!value) { + _this.sub = null; + if (_this.latest && + _this.latest[0] === "next") { + _this.resolve(_this.latest[1]); + } + else { + _this.resolve(); + } + iterateObserversSafely(_this.observers, "complete"); + } + else if (isPromiseLike(value)) { + value.then(function (obs) { return _this.sub = obs.subscribe(_this.handlers); }); + } + else { + _this.sub = value.subscribe(_this.handlers); + } + } + }, + }; + _this.cancel = function (reason) { + _this.reject(reason); + _this.sources = []; + _this.handlers.complete(); + }; + _this.promise.catch(function (_) { }); + if (typeof sources === "function") { + sources = [new zenObservableTs.Observable(sources)]; + } + if (isPromiseLike(sources)) { + sources.then(function (iterable) { return _this.start(iterable); }, _this.handlers.error); + } + else { + _this.start(sources); + } + return _this; + } + Concast.prototype.start = function (sources) { + if (this.sub !== void 0) + return; + this.sources = Array.from(sources); + this.handlers.complete(); + }; + Concast.prototype.deliverLastMessage = function (observer) { + if (this.latest) { + var nextOrError = this.latest[0]; + var method = observer[nextOrError]; + if (method) { + method.call(observer, this.latest[1]); + } + if (this.sub === null && + nextOrError === "next" && + observer.complete) { + observer.complete(); + } + } + }; + Concast.prototype.addObserver = function (observer) { + if (!this.observers.has(observer)) { + this.deliverLastMessage(observer); + this.observers.add(observer); + ++this.addCount; + } + }; + Concast.prototype.removeObserver = function (observer, quietly) { + if (this.observers.delete(observer) && + --this.addCount < 1 && + !quietly) { + this.handlers.error(new Error("Observable cancelled prematurely")); + } + }; + Concast.prototype.cleanup = function (callback) { + var _this = this; + var called = false; + var once = function () { + if (!called) { + called = true; + _this.observers.delete(observer); + callback(); + } + }; + var observer = { + next: once, + error: once, + complete: once, + }; + var count = this.addCount; + this.addObserver(observer); + this.addCount = count; + }; + return Concast; +}(zenObservableTs.Observable)); +fixObservableSubclass(Concast); + +function isNonEmptyArray(value) { + return Array.isArray(value) && value.length > 0; +} + +function graphQLResultHasError(result) { + return (result.errors && result.errors.length > 0) || false; +} + +function compact() { + var objects = []; + for (var _i = 0; _i < arguments.length; _i++) { + objects[_i] = arguments[_i]; + } + var result = Object.create(null); + objects.forEach(function (obj) { + if (!obj) + return; + Object.keys(obj).forEach(function (key) { + var value = obj[key]; + if (value !== void 0) { + result[key] = value; + } + }); + }); + return result; +} + +var prefixCounts = new Map(); +function makeUniqueId(prefix) { + var count = prefixCounts.get(prefix) || 1; + prefixCounts.set(prefix, count + 1); + return "".concat(prefix, ":").concat(count, ":").concat(Math.random().toString(36).slice(2)); +} + +function stringifyForDisplay(value) { + var undefId = makeUniqueId("stringifyForDisplay"); + return JSON.stringify(value, function (key, value) { + return value === void 0 ? undefId : value; + }).split(JSON.stringify(undefId)).join("