diff --git a/apps/open-spark/components/currentTrade/EmptyCurrentTrade.tsx b/apps/open-spark/components/currentTrade/EmptyCurrentTrade.tsx index fbd095947..9377876af 100644 --- a/apps/open-spark/components/currentTrade/EmptyCurrentTrade.tsx +++ b/apps/open-spark/components/currentTrade/EmptyCurrentTrade.tsx @@ -1,10 +1,14 @@ import { Typography } from '@beckn-ui/molecules' -import BecknButton from '@beckn-ui/molecules/src/components/button' import { Box, Flex, Image } from '@chakra-ui/react' +import { ROLE } from '@lib/config' +import { RootState } from '@store/index' import React from 'react' -import { Type } from 'react-toastify/dist/utils' +import { useSelector } from 'react-redux' const EmptyCurrentTrade = () => { + const { role } = useSelector((state: RootState) => state.auth) + const emptyCurrentText = role === ROLE.CONSUMER ? '"Buy"' : '"Sell"' + const sellText = role === ROLE.PRODUCER ? 'sell' : 'purchase' return ( { sx={{ textAlign: 'center' }} /> ) diff --git a/apps/open-spark/components/deviceList/AddNewDerModal.tsx b/apps/open-spark/components/deviceList/AddNewDerModal.tsx index 5a8fc70de..20c5b8fbd 100644 --- a/apps/open-spark/components/deviceList/AddNewDerModal.tsx +++ b/apps/open-spark/components/deviceList/AddNewDerModal.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react' import BottomModalScan from '@beckn-ui/common/src/components/BottomModal/BottomModalScan' -import { Input, Typography } from '@beckn-ui/molecules' +import { Input, LoaderWithMessage, Typography } from '@beckn-ui/molecules' import BecknButton from '@beckn-ui/molecules/src/components/button' import { Box, Flex, Image } from '@chakra-ui/react' import uploadIcon from '@public/images/upload_icon.svg' @@ -55,7 +55,15 @@ const AddNewDerModal = (props: AddNewDerModalProps) => { } const files = uploadedFiles.map(doc => doc.file) onSubmit(category, files) + .then(() => { + setCategory('') + setUploadedFiles([]) + }) + .catch(err => { + console.error('Error adding device:', err.message) + }) } + const handleOnDelete = (index: number, document: DocumentProps, type: 'cred' | 'upload') => { if (type === 'cred') { setUploadedFiles(prevState => prevState!.filter((_, i) => i !== index)) @@ -63,12 +71,24 @@ const AddNewDerModal = (props: AddNewDerModalProps) => { } return ( - - + + {isLoading ? ( + + + + ) : ( { setAllFilesProcessed(status) }} /> - { return ( { if (fileInputRef.current) { @@ -110,9 +129,8 @@ const AddNewDerModal = (props: AddNewDerModalProps) => { src={uploadIcon} alt="upload" /> - { }} /> - - + )} + ) } diff --git a/apps/open-spark/components/deviceList/DeviceList.tsx b/apps/open-spark/components/deviceList/DeviceList.tsx index 8c21652b6..914c17f4d 100644 --- a/apps/open-spark/components/deviceList/DeviceList.tsx +++ b/apps/open-spark/components/deviceList/DeviceList.tsx @@ -12,8 +12,9 @@ import { RootState } from '@store/index' import Cookies from 'js-cookie' interface Device { + id: number name: string - paired: boolean + paired?: boolean } interface DeviceListProps { @@ -30,7 +31,6 @@ export default function DeviceList({ initialDevices, onDeviceChange, fetchPaired const [selectedDeviceIndex, setSelectedDeviceIndex] = useState(null) const [isLoading, setIsLoading] = useState(false) const [isDeleteLoading, setIsDeleteLoading] = useState(false) - const strapiUrl = process.env.NEXT_PUBLIC_STRAPI_URL const { role } = useSelector((state: RootState) => state.auth) const bearerToken = Cookies.get('authToken') @@ -38,28 +38,25 @@ export default function DeviceList({ initialDevices, onDeviceChange, fetchPaired const handleAddDevice = async (category: string, uploadedFiles: File[]) => { setIsLoading(true) try { - const type = role === ROLE.PRODUCER ? 'PRODUCER' : 'CONSUMER' + const type = role === ROLE.PRODUCER ? 'prosumer' : 'consumer' const formData = new FormData() formData.append('type', type) formData.append('category', category) - uploadedFiles.forEach(file => formData.append('proofs', file)) + uploadedFiles.forEach(file => { + formData.append('proof', file) + }) const response = await axios.post(`${strapiUrl}${ROUTE_TYPE[role!]}/der`, formData, { - headers: { Authorization: `Bearer ${bearerToken}` }, + headers: { + Authorization: `Bearer ${bearerToken}` + }, withCredentials: true }) - - if (role === ROLE.PRODUCER) { - setDevices(response.data.production) - setIsLoading(false) - } else if (role === ROLE.CONSUMER) { - setDevices(response.data.consumption) - setIsLoading(false) + if (response.status === 200 || response.status === 204) { + fetchPairedData() + setIsModalOpen(false) } - - fetchPairedData() - setIsModalOpen(false) } catch (error) { console.error('Error adding device:', error.message) } finally { @@ -82,31 +79,20 @@ export default function DeviceList({ initialDevices, onDeviceChange, fetchPaired } const handleRemoveDevice = async (index: number) => { - setIsDeleteLoading(true) - const deviceToRemove = devices[index] - try { - const response = await axios.delete(`${strapiUrl}${ROUTE_TYPE[role!]}/der`, { - params: { id: deviceToRemove.id }, + const response = await axios.delete(`${strapiUrl}${ROUTE_TYPE[role!]}/der/${index}`, { headers: { Authorization: `Bearer ${bearerToken}` }, withCredentials: true }) if (response.status === 200 || response.status === 204) { - if (role === ROLE.PRODUCER) { - setDevices(response.data.production) - setIsDeleteLoading(false) - } else if (role === ROLE.CONSUMER) { - setDevices(response.data.consumption) - setIsDeleteLoading(false) - } + fetchPairedData() } else { console.error('Failed to delete the device:', response.data) } - } catch (error) { - console.error('Error deleting device:', error.message) + } catch (error: any) { + console.error('Error deleting device:', error?.message) } finally { - // setIsDeleteLoading(false) handleDeleteModalClose() } } @@ -119,8 +105,9 @@ export default function DeviceList({ initialDevices, onDeviceChange, fetchPaired } useEffect(() => { - onDeviceChange(devices) - }, [devices, onDeviceChange]) + setDevices(initialDevices) + onDeviceChange(initialDevices) + }, [initialDevices, onDeviceChange]) return ( @@ -168,9 +155,9 @@ export default function DeviceList({ initialDevices, onDeviceChange, fetchPaired _hover={{ bg: 'gray.50' }} boxShadow="rgba(0, 0, 0, 0.35) 0px 5px 15px" > - + handleDeleteModalOpen(index)} + onClick={() => handleDeleteModalOpen(device?.id)} style={{ cursor: 'pointer' }} size={24} opacity="0.5" diff --git a/apps/open-spark/components/header/constants/index.ts b/apps/open-spark/components/header/constants/index.ts index 225f53a59..2cd349080 100644 --- a/apps/open-spark/components/header/constants/index.ts +++ b/apps/open-spark/components/header/constants/index.ts @@ -2,7 +2,7 @@ type PathnameObjectType = Record // -------------------------------- Top Header constants -------------------------------- const appLogoBlackList = ['/signIn', '/signUp', '/welcome'] -const homeIconBlackList = ['/', '/signIn', '/', '/myRides', '/profile', '/signUp', '/welcome', '/myDers'] +const homeIconBlackList = ['/', '/signIn', '/', '/myRides', '/profile', '/signUp', '/welcome'] const menuIconWhiteList = ['/', '/profile', '/myRides', '/buyingPreference', '/sellingPreference', '/myDers'] const topHeaderBlackList: string[] = ['/welcome'] const languageIconWhiteList: string[] = [] diff --git a/apps/open-spark/pages/index.tsx b/apps/open-spark/pages/index.tsx index 8b167c0e2..b46278b63 100644 --- a/apps/open-spark/pages/index.tsx +++ b/apps/open-spark/pages/index.tsx @@ -165,7 +165,7 @@ const Homepage = () => { @@ -179,7 +179,7 @@ const Homepage = () => { borderRadius="md" variant="outline" colorScheme="gray" - padding={'8px'} + padding={'4px 8px'} > {tag} handleRemoveTag(tag)} /> @@ -197,7 +197,7 @@ const Homepage = () => { > { const strapiUrl = process.env.NEXT_PUBLIC_STRAPI_URL const { role } = useSelector((state: RootState) => state.auth) const bearerToken = Cookies.get('authToken') - const [devices, setDevices] = useState([ - { name: 'Wifi', paired: true }, - { name: 'Orient electric Fan', paired: true }, - { name: 'Sony TV', paired: true }, - { name: 'OLA S1 Air Electric Scooter', paired: true }, - { name: 'Philips LED Light', paired: true }, - { name: 'Solar Panel', paired: true } - ]) + const [devices, setDevices] = useState<{ id: number; name: string; paired?: boolean }[]>([]) - const handleDeviceChange = (updatedDevices: React.SetStateAction<{ name: string; paired: boolean }[]>) => { + const handleDeviceChange = ( + updatedDevices: React.SetStateAction<{ id: number; name: string; paired?: boolean }[]> + ) => { setDevices(updatedDevices) } @@ -31,14 +26,13 @@ const MyDers = () => { withCredentials: true }) - const result = response.data.data - console.log(result) - - if (role === ROLE.PRODUCER) { - setDevices(result.production) - } else if (role === ROLE.CONSUMER) { - setDevices(result.consumption) - } + const result = response.data + const mappedDevices = result.map((item: { category: string; id: number }) => ({ + name: item.category, + paired: true, + id: item.id + })) + setDevices(mappedDevices) } catch (error) { console.error('Error fetching dashboard data:', error) } @@ -49,7 +43,6 @@ const MyDers = () => { fetchPairedData() } }, [role, bearerToken, strapiUrl]) - return ( = ({ isOpen, onClose, children, modalHeader }) => { +const BottomModal: React.FC = ({ isOpen, onClose, children, modalHeader, isLoading }) => { return ( <> { + if (!isLoading) { + onClose() + } + }} scrollBehavior="outside" motionPreset="slideInBottom" > @@ -41,7 +46,11 @@ const BottomModal: React.FC = ({ isOpen, onClose, children, modalHea > {modalHeader} - +