From 74f4d5a334a2f2b58c9d84d4237107e2dff40dad Mon Sep 17 00:00:00 2001 From: skrushna1506 Date: Mon, 9 Dec 2024 18:01:56 +0530 Subject: [PATCH] feat(open-spark): api integration for my ders page 1. api integration for get method 2. api integration for post method 3. api integration for delete method 4. when there is loading bottom modal should not close button should be disabled 5. added logic for empty current page text, text should be beased on role --- .../currentTrade/EmptyCurrentTrade.tsx | 10 +++- .../components/deviceList/AddNewDerModal.tsx | 46 +++++++++++----- .../components/deviceList/DeviceList.tsx | 55 +++++++------------ .../components/header/constants/index.ts | 2 +- apps/open-spark/pages/index.tsx | 6 +- apps/open-spark/pages/myDers.tsx | 29 ++++------ apps/open-spark/styles/globals.css | 3 + .../BottomModal/BottomModalScan.tsx | 15 ++++- 8 files changed, 90 insertions(+), 76 deletions(-) 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 ac7b364bf..01dd9f484 100644 --- a/apps/open-spark/pages/index.tsx +++ b/apps/open-spark/pages/index.tsx @@ -161,7 +161,7 @@ const Homepage = () => { @@ -175,7 +175,7 @@ const Homepage = () => { borderRadius="md" variant="outline" colorScheme="gray" - padding={'8px'} + padding={'4px 8px'} > {tag} handleRemoveTag(tag)} /> @@ -193,7 +193,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} - +