From d013de020156a4b736e29ddd1f595fd53a5f88ea Mon Sep 17 00:00:00 2001 From: Adi Zafri Date: Fri, 21 Jun 2024 08:45:59 +0800 Subject: [PATCH] updated context store and create produce form --- web/src/components/CreateProduceForm.jsx | 151 ++++++++++++++++++----- web/src/contexts/UserContext.jsx | 41 +++--- web/src/pages/CreateProducePage.jsx | 14 +-- web/src/pages/StorePage.jsx | 33 +++-- web/src/services/cart.jsx | 6 +- web/src/services/produce.jsx | 8 +- web/src/services/store.jsx | 7 +- 7 files changed, 172 insertions(+), 88 deletions(-) diff --git a/web/src/components/CreateProduceForm.jsx b/web/src/components/CreateProduceForm.jsx index 640e97f..4d75a30 100644 --- a/web/src/components/CreateProduceForm.jsx +++ b/web/src/components/CreateProduceForm.jsx @@ -1,7 +1,14 @@ -import { useState } from "react"; -import { TextField, Button, Box, Typography, useTheme, MenuItem } from '@mui/material'; +import React, { useState, useContext, useEffect } from "react"; +import { useNavigate } from 'react-router-dom'; +import UserContext from '../contexts/UserContext.jsx'; +import { TextField, Button, Box, Typography, Select, MenuItem, FormControl, InputLabel, Grid } from '@mui/material'; +import CircularProgress from "@mui/material/CircularProgress"; +import storeService from "../services/store.jsx"; +import produceService from "../services/produce.jsx"; -const CreateProduceForm = ({ store }) => { +const CreateProduceForm = () => { + const { user, loading: userContextLoading } = useContext(UserContext); + const [store, setStore] = useState(); const [name, setName] = useState(''); const [type, setType] = useState(''); const [stock, setStock] = useState(''); @@ -9,8 +16,50 @@ const CreateProduceForm = ({ store }) => { const [sellingUnit, setSellingUnit] = useState(''); const [description, setDescription] = useState(''); const [status, setStatus] = useState(''); - const [image, setImage] = useState(''); - const theme = useTheme(); + const [imageFile, setImageFile] = useState(null); + const [fileError, setFileError] = useState(''); + const [isLoading, setIsLoading] = useState(true); + const navigate = useNavigate() + + useEffect(() => { + const fetchStoreFromContext = async () => { + if (!user) { + navigate('/login'); + return; + } + + try { + if (user.store) { + setStore(user.store); + } else { + console.log('User does not have a store') + navigate('/login'); + } + } catch (error) { + console.error("Error fetching store or produce:", error); + } finally { + setIsLoading(false); + } + }; + + if (!userContextLoading) { + fetchStoreFromContext(); + } + }, [userContextLoading, user, navigate]) + + const handleFileChange = (event) => { + const file = event.target.files[0]; + if (file) { + if (!file.type.startsWith('image/')) { + setFileError('Invalid file type. Please select an image file.'); + } else if (file.size > 10 * 1024 * 1024) { // file size limit 10MB + setFileError('File size should not exceed 10MB'); + } else { + setFileError(''); + setImageFile(file); + } + } + }; const handleSubmit = (event) => { event.preventDefault(); @@ -23,7 +72,7 @@ const CreateProduceForm = ({ store }) => { sellingUnit, description, status, - image, + image: imageFile, store }; @@ -31,6 +80,10 @@ const CreateProduceForm = ({ store }) => { // TODO: Call the API to create the produce }; + if (userContextLoading || isLoading) { + return ; + } + return ( { sx={{ display: 'flex', flexDirection: 'column', - width: '300px', + maxWidth: '600px', // maximum width of the form + width: '100%', // form takes up 100% of the parent container's width margin: '0 auto', gap: '20px', marginTop: '100px', + padding: '20px', backgroundColor: '#FFFFFF', }} > @@ -54,14 +109,20 @@ const CreateProduceForm = ({ store }) => { value={name} required={true} onChange={({ target }) => setName(target.value)} + fullWidth /> - setType(target.value)} - /> + + Type + + { value={stock} required={true} onChange={({ target }) => setStock(target.value)} + fullWidth /> - setUnitPrice(target.value)} - /> - setSellingUnit(target.value)} - /> + + + setUnitPrice(target.value)} + fullWidth + /> + + + + Selling Unit + + + + setDescription(target.value)} + fullWidth /> { value={status} required={true} onChange={({ target }) => setStatus(target.value)} + fullWidth /> + setImage(target.value)} + accept="image/*" + onChange={handleFileChange} + fullWidth /> + {fileError &&

{fileError}

} - -

{store?.name}

- - {produceList.map(produce => ( - - + {store ? ( + <> + + {user.name}'s Store + + +

{store?.name}

+ + {produceList.map(produce => ( + + + + ))} - ))} - + + ) : ( + No store exists for user + )} ); }; diff --git a/web/src/services/cart.jsx b/web/src/services/cart.jsx index 98d6097..d6ec2bc 100644 --- a/web/src/services/cart.jsx +++ b/web/src/services/cart.jsx @@ -5,7 +5,7 @@ const getAll = async () => { try { return await api.get(`${baseUrl}`); } catch (error) { - throw error.response.data.message; + throw error.response.data; } }; @@ -13,7 +13,7 @@ const getById = async (id) => { try { return await api.get(`${baseUrl}/${id}`); } catch (error) { - throw error.response.data.message; + throw error.response.data; } }; @@ -21,7 +21,7 @@ const getByAccount = async (consumerId) => { try { return await api.get(`${baseUrl}?accountId=${consumerId}`); } catch (error) { - throw error.response.data.message; + throw error.response.data; } }; diff --git a/web/src/services/produce.jsx b/web/src/services/produce.jsx index dba40d4..dde9b60 100644 --- a/web/src/services/produce.jsx +++ b/web/src/services/produce.jsx @@ -5,7 +5,7 @@ const getAll = async () => { try { return await api.get(`${baseURL}`); } catch (error) { - throw error.response.data.message; + throw error.response.data; } }; @@ -13,7 +13,7 @@ const getById = async (id) => { try { return await api.get(`${baseURL}/${id}`); } catch (error) { - throw error.response.data.message; + throw error.response.data; } }; @@ -21,7 +21,7 @@ const getByStore = async (storeId) => { try { return await api.get(`${baseURL}?storeId=${storeId}`); } catch (error) { - throw error.response.data.message; + throw error.response.data; } }; @@ -52,7 +52,7 @@ const create = async (token, data) => { return await api(config); } catch (error) { console.error('Error creating produce:', error); - throw error.response.data.message; + throw error.response.data; } } diff --git a/web/src/services/store.jsx b/web/src/services/store.jsx index 4be9904..83c337c 100644 --- a/web/src/services/store.jsx +++ b/web/src/services/store.jsx @@ -5,7 +5,7 @@ const getAll = async () => { try { return await api.get(`${baseUrl}`); } catch (error) { - throw error.response.data.message; + throw error.response.data; } }; @@ -13,7 +13,7 @@ const getById = async (id) => { try { return await api.get(`${baseUrl}/${id}`); } catch (error) { - throw error.response.data.message; + throw error.response.data; } }; @@ -21,7 +21,8 @@ const getByFarmer = async (farmerId) => { try { return await api.get(`${baseUrl}?farmerId=${farmerId}`); } catch (error) { - throw error.response.data.message; + // console.log(`call to ${baseUrl}?farmerId=${farmerId} error: `, error); + throw error.response.data; } };