fix: avatar image render

TrackER-Corporation · May 8, 2023 · c7a5fbc · c7a5fbc
1 parent 0217852
commit c7a5fbc
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 25 deletions.
diff --git a/src/Account/AvatarDrawer.tsx b/src/Account/AvatarDrawer.tsx
@@ -2,14 +2,13 @@ import { Avatar, Button, Card, Drawer, Row, Tooltip } from "antd";
 import { useState } from "react";
 import { AccountSubTitle, AvatarHover } from "../Components/CustomComponents";
 import { useAppDispatch, useAppSelector } from "../hooks";
-import { avatarImages } from "../globalUtils";
+import avatarImages from "../globalUtils";
 import { confirmPreference } from "../accountUtils";
 
 const AvatarDrawer = ({ user, visible, onClose }: any) => {
     const userPreference = useAppSelector((state) => state.preference.preference)
     const [current, setCurrent] = useState(userPreference.avatar)
     const dispatch = useAppDispatch()
-
     return (
         <Drawer title="Change Avatar" size="large" placement="right" open={visible} onClose={() => onClose()}>
             <Row justify="center">
@@ -28,16 +27,18 @@ const AvatarDrawer = ({ user, visible, onClose }: any) => {
                             size={60} src={"https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"}
                             onClick={() => setCurrent("https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png")} />
                     </Tooltip>
-                    {[...Array(38)].map((_, i) =>
-                        <Tooltip title={"Avatar-" + (i + 1)}>
+
+                    {Object.keys(avatarImages).map((key, i) =>
+                        <Tooltip title={"Avatar " + (i + 1)}>
                             <AvatarHover
                                 data-testid={"avatar" + (i + 1)}
-                                style={
-                                    current === avatarImages['Avatar-' + (i + 1) + '.svg']
-                                        ? {} :
-                                        { boxShadow: "0 2px 2px #000000" }}
-                                size={60} src={avatarImages['Avatar-' + (i + 1) + '.svg']}
-                                onClick={() => setCurrent(avatarImages['Avatar-' + (i + 1) + '.svg'])} />
+                                style={current === avatarImages[key]
+                                    ? {} :
+                                    { boxShadow: "0 2px 2px #000000" }
+                                }
+                                size={60}
+                                src={avatarImages[key]}
+                                onClick={() => setCurrent(avatarImages[key])} />
                         </Tooltip>
                     )}
                     <Tooltip title="No Avatar">

diff --git a/src/Consumer/Dashboard.tsx b/src/Consumer/Dashboard.tsx
@@ -6,7 +6,7 @@ import { ProCard } from "@ant-design/pro-components";
 import { ArrowRightOutlined } from "@ant-design/icons";
 import { getBillsAggregated, getBillsRenewable, getData, statebar } from "./utils";
 import { useAppSelector } from "../hooks";
-import { avatarImages } from "../globalUtils";
+import avatarImages from "../globalUtils";
 import { ApexOptions } from "apexcharts";
 import ReactApexChart from "react-apexcharts";
 import BannerCard from "./DashboardCards/BannerCard";
@@ -35,7 +35,6 @@ const Dashboard = () => {
 
   const navigate = useNavigate();
 
-
   useEffect(() => {
     if (buildings === null || buildings === undefined) return
 

diff --git a/src/globalUtils.tsx b/src/globalUtils.tsx
@@ -1,4 +1,3 @@
-
 import React from 'react';
 import { Button, Col, Row, Carousel as AntCarousel, } from 'antd';
 import QueueAnim, { IObject } from 'rc-queue-anim';
@@ -38,7 +37,6 @@ export const getSelectedKeys = () =>
             ? ['item0']
             : ['item2']
 
-
 export const getChildrenToRenderComponent = (item: any) => {
     if (item.children && item.children.indexOf('iframe') !== -1) {
         return (
@@ -264,20 +262,19 @@ export const getItem: (label: string, key: string, icon: JSX.Element) => GetItem
     label,
 });
 
+type AvatarImages = {
+    [key: string]: string;
+};
 
-async function importAll() {
-    const images: { [key: string]: any } = {};
-    const files = import.meta.glob('../src/assets/avatars/*.svg');
-    for (const path in files) {
-        const match = path.match(/\.\/(\w+)\.svg$/);
-        if (match) {
-            images[match[1]] = await files[path]();
-        }
-    }
-    return images;
+
+const avatarImages: AvatarImages = {};
+
+for (let i = 1; i <= 38; i++) {
+    const fileName = `Avatar-${i}.svg`;
+    avatarImages[fileName] = `/assets/avatars/${fileName}`;
 }
 
-export const avatarImages = await importAll();
+export default avatarImages;
 
 export const accountMenu = (user: UserProps, setVisible: (arg: boolean) => void): MenuProps['items'] =>
     [