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
beckn · Dec 9, 2024 · 74f4d5a · 74f4d5a
1 parent 2975f6b
commit 74f4d5a
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 76 deletions.
diff --git 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 (
     <Flex
       flexDir={'column'}
@@ -21,10 +25,10 @@ const EmptyCurrentTrade = () => {
         sx={{ textAlign: 'center' }}
       />
       <Typography
-        text="Click on “Buy” to purchase energy"
         fontSize="15px"
         fontWeight="400"
         sx={{ textAlign: 'center' }}
+        text={`Click on ${emptyCurrentText} to ${sellText} energy`}
       />
     </Flex>
   )

diff --git 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,20 +55,40 @@ 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))
     }
   }
 
   return (
-    <Box>
-      <BottomModalScan
-        isOpen={isOpen}
-        onClose={onClose}
-        modalHeader="Add New DER"
-      >
+    <BottomModalScan
+      isOpen={isOpen}
+      onClose={onClose}
+      modalHeader="Add New DER"
+      isLoading={isLoading}
+    >
+      {isLoading ? (
+        <Box
+          display="grid"
+          height="100%"
+          alignContent="center"
+        >
+          <LoaderWithMessage
+            loadingText="Please Wait"
+            loadingSubText="While We are adding DERS"
+          />
+        </Box>
+      ) : (
         <Flex
           padding="0 20px"
           flexDir="column"
@@ -91,14 +111,13 @@ const AddNewDerModal = (props: AddNewDerModalProps) => {
               setAllFilesProcessed(status)
             }}
           />
-
           <DragAndDropUpload
             multiple={true}
             setFiles={handleFileChange}
             fileSelectionElement={(fileInputRef: any) => {
               return (
                 <Flex
-                  alignItems={'center'}
+                  alignItems="center"
                   cursor="pointer"
                   onClick={() => {
                     if (fileInputRef.current) {
@@ -110,9 +129,8 @@ const AddNewDerModal = (props: AddNewDerModalProps) => {
                     src={uploadIcon}
                     alt="upload"
                   />
-
                   <Typography
-                    text={'Upload Documents'}
+                    text="Upload Documents"
                     sx={{
                       marginLeft: '0.5rem'
                     }}
@@ -122,15 +140,15 @@ const AddNewDerModal = (props: AddNewDerModalProps) => {
             }}
           />
           <BecknButton
-            children={'Add DER'}
+            children="Add DER"
             handleClick={handleAddDevice}
             disabled={!category.trim() || uploadedFiles.length === 0}
             sx={{ marginTop: '20px' }}
             isLoading={isLoading}
           />
         </Flex>
-      </BottomModalScan>
-    </Box>
+      )}
+    </BottomModalScan>
   )
 }
 

diff --git 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,36 +31,32 @@ export default function DeviceList({ initialDevices, onDeviceChange, fetchPaired
   const [selectedDeviceIndex, setSelectedDeviceIndex] = useState<number | null>(null)
   const [isLoading, setIsLoading] = useState<boolean>(false)
   const [isDeleteLoading, setIsDeleteLoading] = useState<boolean>(false)
-
   const strapiUrl = process.env.NEXT_PUBLIC_STRAPI_URL
   const { role } = useSelector((state: RootState) => state.auth)
   const bearerToken = Cookies.get('authToken')
 
   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 (
     <Container>
@@ -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"
               >
-                <Typography text={device.name} />
+                <Typography text={device?.name} />
                 <CiCircleMinus
-                  onClick={() => 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
@@ -2,7 +2,7 @@ type PathnameObjectType = Record<string, string>
 
 // -------------------------------- 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
@@ -161,7 +161,7 @@ const Homepage = () => {
         <Box>
           <Typography
             text="Preferences"
-            fontSize="15"
+            fontSize="14px"
             fontWeight="600"
             sx={{ marginBottom: '10px' }}
           />
@@ -175,7 +175,7 @@ const Homepage = () => {
                 borderRadius="md"
                 variant="outline"
                 colorScheme="gray"
-                padding={'8px'}
+                padding={'4px 8px'}
               >
                 <TagLabel>{tag}</TagLabel>
                 <TagCloseButton onClick={() => handleRemoveTag(tag)} />
@@ -193,7 +193,7 @@ const Homepage = () => {
               >
                 <Typography
                   text="Current Status"
-                  fontSize="15px"
+                  fontSize="14px"
                   fontWeight="600"
                 />
                 <Typography

diff --git a/apps/open-spark/pages/myDers.tsx b/apps/open-spark/pages/myDers.tsx
@@ -11,16 +11,11 @@ const MyDers = () => {
   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 (
     <Box
       maxWidth={{ base: '100vw', md: '30rem', lg: '40rem' }}

diff --git a/apps/open-spark/styles/globals.css b/apps/open-spark/styles/globals.css
@@ -302,3 +302,6 @@ select:-webkit-autofill:focus {
 .trade-status-accordion-icon {
   display: none !important;
 }
+.css-1juf683 {
+  font-size: 12px !important;
+}
diff --git a/packages/common/src/components/BottomModal/BottomModalScan.tsx b/packages/common/src/components/BottomModal/BottomModalScan.tsx
@@ -7,15 +7,20 @@ interface ModalProps {
   children: React.ReactNode
   partialClose?: boolean
   modalHeader?: string
+  isLoading?: boolean
 }
 
-const BottomModal: React.FC<ModalProps> = ({ isOpen, onClose, children, modalHeader }) => {
+const BottomModal: React.FC<ModalProps> = ({ isOpen, onClose, children, modalHeader, isLoading }) => {
   return (
     <>
       <Modal
         isCentered
-        onClose={onClose}
         isOpen={isOpen}
+        onClose={() => {
+          if (!isLoading) {
+            onClose()
+          }
+        }}
         scrollBehavior="outside"
         motionPreset="slideInBottom"
       >
@@ -41,7 +46,11 @@ const BottomModal: React.FC<ModalProps> = ({ isOpen, onClose, children, modalHea
             >
               {modalHeader}
             </ModalHeader>
-            <Box onClick={onClose}>
+            <Box
+              onClick={!isLoading ? onClose : undefined}
+              cursor={isLoading ? 'not-allowed' : 'pointer'}
+              opacity={isLoading ? 0.5 : 1}
+            >
               <Image src="/images/crossIcon.svg" />
             </Box>
           </Flex>