fix: Breadcrumb deprecated item

TrackER-Corporation · May 7, 2023 · b2b6426 · b2b6426
1 parent 78619b4
commit b2b6426
Show file tree

Hide file tree

Showing 9 changed files with 125 additions and 56 deletions.
diff --git a/src/Account/Account.tsx b/src/Account/Account.tsx
@@ -12,8 +12,15 @@ import AccountNotification from "./RightSide/AccountNotification";
 import OrganizationDrawer from "./OrganizationDrawer";
 import { accountMenu } from "../globalUtils";
 import { accountItems } from "../accountUtils";
+import { UserProps } from "../types";
 
-const Account = ({ updateRoute, user, avatar, socket }: any) => {
+interface AccountProps {
+    updateRoute: any,
+    user: UserProps,
+    avatar: string
+}
+
+const Account = ({ updateRoute, user, avatar }: AccountProps) => {
     const navigate = useNavigate()
     const location = useLocation()
     const [visible, setVisible] = useState(false)
@@ -28,11 +35,19 @@ const Account = ({ updateRoute, user, avatar, socket }: any) => {
             }}
         >
             <Row gutter={[16, 16]} style={{ marginTop: "32px" }}>
-                <Breadcrumb>
-                    <Breadcrumb.Item>Home</Breadcrumb.Item>
-                    <Breadcrumb.Item>Profile</Breadcrumb.Item>
-                    <Breadcrumb.Item>{window.location.pathname.split("/")[2]}</Breadcrumb.Item>
-                </Breadcrumb>
+                <Breadcrumb
+                    items={[
+                        {
+                            title: 'Home',
+                        },
+                        {
+                            title: <a>Profile</a>
+                        },
+                        {
+                            title: <a>{window.location.pathname.split("/")[2]}</a>
+                        }
+                    ]}
+                />
             </Row>
             <PageHeader
                 data-testid="back"
@@ -68,17 +83,17 @@ const Account = ({ updateRoute, user, avatar, socket }: any) => {
                         <Space direction="vertical" style={{ width: "100%" }} />
                     </Col>
                     <Col md={15} sm={24} >
-                        {location.pathname === "/Profile/Edit" && <InfoAccount socket={socket} user={user} />}
+                        {location.pathname === "/Profile/Edit" && <InfoAccount user={user} />}
                         {location.pathname === "/Profile/Notification" && <AccountNotification user={user} />}
                         {location.pathname === "/Profile/Activity" && <AccountActivity user={user} />}
-                        {location.pathname === "/Profile/Security" && <SecuritySettings socket={socket} user={user} updateRoute={() => updateRoute("/Profile/Password")} />}
+                        {location.pathname === "/Profile/Security" && <SecuritySettings user={user} updateRoute={() => updateRoute("/Profile/Password")} />}
                         {location.pathname === "/Profile/Password" && <ChangePassword user={user} />}
                     </Col>
                 </Row>
             </ProCard>
             {user.type === "Building" && <AvatarDrawer user={user} visible={visible} onClose={() => setVisible(false)} />}
             {user.type === "Vendor" && <OrganizationDrawer user={user} visible={visible} onClose={() => setVisible(false)} />}
-        </Layout>
+        </Layout >
     )
 }
 export default Account
diff --git a/src/Consumer/Building/AddNewBuilding.tsx b/src/Consumer/Building/AddNewBuilding.tsx
@@ -53,11 +53,19 @@ const AddNewBuildings = (user: UserProps) => {
         >
             {show && <LoadingSpinner message={"Creating new building..."} />}
             <Row gutter={[16, 16]} style={{ marginTop: "32px" }}>
-                <Breadcrumb>
-                    <Breadcrumb.Item>Home</Breadcrumb.Item>
-                    <Breadcrumb.Item>Buildings</Breadcrumb.Item>
-                    <Breadcrumb.Item>Create Building</Breadcrumb.Item>
-                </Breadcrumb>
+                <Breadcrumb
+                    items={[
+                        {
+                            title: 'Home',
+                        },
+                        {
+                            title: <a>Buildings</a>
+                        },
+                        {
+                            title: <a>Create Building</a>
+                        },
+                    ]}
+                />
             </Row>
             <PageHeader
                 style={{ paddingLeft: 0 }}

diff --git a/src/Consumer/Building/BuildingsTab.tsx b/src/Consumer/Building/BuildingsTab.tsx
@@ -14,7 +14,6 @@ import "./style.css"
 import { getBills } from "../utils";
 import { deleteBuilding } from "./utils";
 
-const { Option } = Select;
 const { Search } = Input;
 
 interface BuildingTabProps {
@@ -108,10 +107,16 @@ const BuildingTab = ({ updateRoute }: BuildingTabProps) => {
         >
             {show && <LoadingSpinner message={myMessage}></LoadingSpinner>}
             <Row gutter={[16, 16]} >
-                <Breadcrumb>
-                    <Breadcrumb.Item>Home</Breadcrumb.Item>
-                    <Breadcrumb.Item>Buildings</Breadcrumb.Item>
-                </Breadcrumb>
+                <Breadcrumb
+                    items={[
+                        {
+                            title: 'Home',
+                        },
+                        {
+                            title: <a>Buildings</a>
+                        }
+                    ]}
+                />
             </Row>
             <PageHeader
                 style={{ paddingLeft: 0 }}
@@ -126,10 +131,11 @@ const BuildingTab = ({ updateRoute }: BuildingTabProps) => {
                         onChange={(val) => setFilter(val)}
                         defaultValue="Address"
                         style={{ width: "35%" }}
-                    >
-                        <Option value="Address">Address</Option>
-                        <Option value="Building">Building</Option>
-                    </Select>
+                        options={[
+                            { value: "Address", label: "Address", },
+                            { value: "Building", label: "Building", }
+                        ]}
+                    />
                     <AutoComplete
                         allowClear
                         onClear={() => {

diff --git a/src/Consumer/Invoices/Invoices.tsx b/src/Consumer/Invoices/Invoices.tsx
@@ -41,11 +41,19 @@ const Invoices = ({ user }: Invoices) => {
             }}
         >
             <Row gutter={[16, 16]} >
-                <Breadcrumb>
-                    <Breadcrumb.Item>Home</Breadcrumb.Item>
-                    <Breadcrumb.Item>Invoices</Breadcrumb.Item>
-                    <Breadcrumb.Item>{filter}</Breadcrumb.Item>
-                </Breadcrumb>
+                <Breadcrumb
+                    items={[
+                        {
+                            title: 'Home',
+                        },
+                        {
+                            title: <a>Invoices</a>
+                        },
+                        {
+                            title: <a>{filter}</a>
+                        },
+                    ]}
+                />
             </Row>
             <PageHeader
                 style={{ paddingLeft: 0 }}

diff --git a/src/Consumer/Invoices/InvoicesModal.tsx b/src/Consumer/Invoices/InvoicesModal.tsx
@@ -1,4 +1,4 @@
-import { Modal, Tabs } from "antd"
+import { Modal, Tabs, TabsProps } from "antd"
 import moment from "moment";
 import { useEffect, useState } from "react";
 import ElectricInvoices from "./ElectricInvoices";
@@ -7,7 +7,6 @@ import WaterInvoices from "./WaterInvoices";
 import { Building, TimeStamp } from "../../types";
 import { useAppSelector } from "../../hooks";
 import { dataInRange } from "../../globalUtils";
-const { TabPane } = Tabs;
 
 interface InvoicesModal {
     data: any,
@@ -64,20 +63,37 @@ const InvoicesModal = ({ data, visible, setVisible, timeSpan, building }: Invoic
                 break;
         }
     });
+    const items: TabsProps['items'] = [
+        {
+            key: '1',
+            label: `Electric`,
+            children: <ElectricInvoices bills={data} cost={electricDetail} filtered={elec} />,
+        },
+        {
+            key: '2',
+            label: `Gas`,
+            children: <GasInvoices bills={data} cost={gasDetail} filtered={gas} />
+        },
+        {
+            key: '3',
+            label: `Water`,
+            children: <WaterInvoices bills={data} cost={waterDetail} filtered={water} />
+        },
+    ];
+
 
     return (
-        <Modal destroyOnClose open={visible} width={1200} onOk={() => setVisible(!visible)} onCancel={() => setVisible(!visible)}>
-            <Tabs defaultActiveKey="1" centered destroyInactiveTabPane>
-                <TabPane tab="Electric" key="1">
-                    <ElectricInvoices bills={data} cost={electricDetail} filtered={elec} />
-                </TabPane>
-                <TabPane tab="Gas" key="2">
-                    <GasInvoices bills={data} cost={gasDetail} filtered={gas} />
-                </TabPane>
-                <TabPane tab="Water" key="3">
-                    <WaterInvoices bills={data} cost={waterDetail} filtered={water} />
-                </TabPane>
-            </Tabs>
+        <Modal destroyOnClose open={visible}
+            width={1200}
+            onOk={() => setVisible(!visible)}
+            onCancel={() => setVisible(!visible)}
+        >
+            <Tabs
+                defaultActiveKey="1"
+                centered
+                destroyInactiveTabPane
+                items={items}
+            />
         </Modal>
     )
 }

diff --git a/src/Consumer/Invoices/InvoicesWrapper.tsx b/src/Consumer/Invoices/InvoicesWrapper.tsx
@@ -1,7 +1,5 @@
 import { PageHeader } from "@ant-design/pro-components"
 import { Breadcrumb, Card, Carousel, Col, Divider, Empty, Layout, Row, Statistic } from "antd"
-import ReactApexChart from "react-apexcharts"
-import { pieOptions } from "./utilsInvoices"
 import IconFont from "../../Iconfont"
 
 interface ChangeTitle {
@@ -49,10 +47,16 @@ const InvoicesWrapper = ({
             }}
         >
             <Row gutter={[16, 16]} style={{ marginTop: "32px" }}>
-                <Breadcrumb>
-                    <Breadcrumb.Item>Home</Breadcrumb.Item>
-                    <Breadcrumb.Item>{window.location.pathname.split("/")[1]}</Breadcrumb.Item>
-                </Breadcrumb>
+                <Breadcrumb
+                    items={[
+                        {
+                            title: 'Home',
+                        },
+                        {
+                            title: <a>{window.location.pathname.split("/")[1]}</a>
+                        },
+                    ]}
+                />
             </Row>
             <PageHeader
                 style={{ paddingLeft: 0 }}

diff --git a/src/Consumer/Organizations/Organizations.tsx b/src/Consumer/Organizations/Organizations.tsx
@@ -25,10 +25,16 @@ const Organizations = ({ allOrganization, allUser }: Organizations) => {
             }}
         >
             <Row gutter={[16, 16]} >
-                <Breadcrumb>
-                    <Breadcrumb.Item>Home</Breadcrumb.Item>
-                    <Breadcrumb.Item>Organizations</Breadcrumb.Item>
-                </Breadcrumb>
+                <Breadcrumb
+                    items={[
+                        {
+                            title: 'Home',
+                        },
+                        {
+                            title: <a>Organizations</a>
+                        },
+                    ]}
+                />
             </Row>
             <PageHeader
                 style={{ paddingLeft: 0 }}

diff --git a/src/accountUtils.tsx b/src/accountUtils.tsx
@@ -90,15 +90,21 @@ export const fetchActivity = async (user: any, setData: (arg: any) => void, setL
                 setLoad(false)
             }, 300)
         })
-        .catch(() => message.error("Error on Update Data"))
+        .catch(() => {
+            message.error("Error on Update Data")
+            setLoad(false)
+        })
 }
 
 export const updateUserData = async (user: any, name: string, surname: string, email: string, dispatch: AppDispatch, setVisible: (arg: boolean) => void) =>
     await api.user.update(user._id, { name, surname, email })
         .then(res => {
             dispatch(updateUser(res.data))
             setVisible(false)
-        }).catch(() => message.error("Error on Update Data"))
+        }).catch(() => {
+            message.error("Error on Update Data")
+            setVisible(false)
+        })
 
 
 export const activityColumns: any = [

diff --git a/src/globalUtils.tsx b/src/globalUtils.tsx
@@ -1,10 +1,10 @@
 
 import React from 'react';
-import { Button, Col, Row, Carousel as AntCarousel, Menu, } from 'antd';
+import { Button, Col, Row, Carousel as AntCarousel, } from 'antd';
 import QueueAnim, { IObject } from 'rc-queue-anim';
 import { isMobile } from 'react-device-detect';
 import TweenOne from 'rc-tween-one';
-import { GetItem, User, UserProps } from './types';
+import { GetItem, UserProps } from './types';
 import { UploadRequestOption } from "rc-upload/lib/interface";
 import { MenuProps } from 'antd/lib/menu';
 import moment from 'moment';