feat: new style for project number count and responsiveness (unstruct…

…uredstudio#937)
coderatomy · Nov 3, 2023 · e202e45 · e202e45
1 parent 4b601fa
commit e202e45
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 25 deletions.
diff --git a/zubhub_frontend/zubhub/src/components/Sidenav/Sidenav.jsx b/zubhub_frontend/zubhub/src/components/Sidenav/Sidenav.jsx
@@ -18,6 +18,7 @@ import { images } from '../../assets/images';
 import { logout } from '../../store/actions/authActions';
 import { bottomLinks, links } from './data';
 import { sidenavStyle } from './sidenav.styles';
+import CustomButton from '../button/Button';
 
 export default function Sidenav() {
   const classes = makeStyles(sidenavStyle)();
@@ -35,12 +36,22 @@ export default function Sidenav() {
     const api = new API();
     const request1 = api.getUserDrafts({ username: auth?.username, token: auth?.token });
     const request2 = api.getUserProjects({ username: auth?.username, token: auth?.token });
-    let res = Promise.all([request1, request2]);
-    res.then(data => {
-      setDraftCount(data[0].count);
-      setMyProjectCount(data[1].count);
-    });
-  }, []);
+
+    Promise.all([request1, request2])
+      .then(([draftData, projectData]) => {
+        setDraftCount(draftData.count);
+        setMyProjectCount(projectData.count);
+      })
+      .catch(error => {
+        console.error(error);
+      });
+  }, [auth?.username, auth?.token]);
+
+  // for translation
+  useEffect(() => {
+    setDraftCount(draftCount);
+    setMyProjectCount(myProjectCount);
+  }, [t]);
 
   const handleLogout = async () => {
     setIsLogginOut(true);
@@ -64,24 +75,62 @@ export default function Sidenav() {
         )}
 
         {links({ draftCount, myProjectCount, auth, t }).map(
-          ({ label, link, icon: Icon, red, requireAuth, target }, index) =>
-            displayLink(requireAuth) && (
-              <Link
-                key={index + label}
-                className={clsx(classes.label, classes.link, pathname == link && classes.active, red && classes.red)}
-                href={link}
-                target={target || '_self'}
-              >
-                <ListItem key={label}>
-                  <ListItemIcon>
-                    <Icon size={22} />
-                  </ListItemIcon>
-                  <ListItemText primary={label} />
-                </ListItem>
-              </Link>
-            ),
+          ({ label, link, icon: Icon, red, requireAuth, target, customButton }, index) => {
+            if (displayLink(requireAuth)) {
+              if (customButton) {
+                return (
+                  <Link
+                    key={index + label}
+                    className={clsx(classes.label, classes.link, pathname === link && classes.active, red && classes.red)}
+                    href={link}
+                    target={target || '_self'}
+                  >
+                    <ListItem key={label}>
+                      <ListItemIcon>
+                        <Icon size={22} />
+                      </ListItemIcon>
+                      <ListItemText
+                        primary={
+                          <span>
+                            {label}
+                            {((label === t('pageWrapper.sidebar.myDrafts') && draftCount > 0) || (label === t('pageWrapper.sidebar.myProjects') && myProjectCount > 0)) && (
+                              <CustomButton
+                                variant="outlined"
+                                customButtonStyle
+                                className={classes.customNumberTag}
+                              >
+                                {label === t('pageWrapper.sidebar.myDrafts') ? draftCount : myProjectCount}
+                              </CustomButton>
+                            )}
+                          </span>
+                        }
+                      />
+                    </ListItem>
+                  </Link>
+
+                );
+              } else {
+                return (
+                  <Link
+                    key={index + label}
+                    className={clsx(classes.label, classes.link, pathname == link && classes.active, red && classes.red)}
+                    href={link}
+                    target={target || '_self'}
+                  >
+                    <ListItem key={label}>
+                      <ListItemIcon>
+                        <Icon size={22} />
+                      </ListItemIcon>
+                      <ListItemText primary={label} />
+                    </ListItem>
+                  </Link>
+                );
+              }
+            }
+          }
         )}
 
+
         {bottomLinks({ t }).map(
           ({ label, link, icon: Icon, red, action, requireAuth }, index) =>
             displayLink(requireAuth) && (

diff --git a/zubhub_frontend/zubhub/src/components/Sidenav/data.js b/zubhub_frontend/zubhub/src/components/Sidenav/data.js
@@ -21,16 +21,18 @@ export const links = ({ draftCount, myProjectCount, auth, t }) => [
         ? [{ label: t('pageWrapper.sidebar.createActivity'), link: '/activities/create', icon: PostAddOutlined }]
         : []),
     {
-        label: `${t('pageWrapper.sidebar.myDrafts')}(${draftCount})`,
+        label: `${t('pageWrapper.sidebar.myDrafts')}`,
         link: `/creators/${auth?.username}/drafts`,
         icon: GiNotebook,
         requireAuth: true,
+        customButton: true,
     },
     {
-        label: `${t('pageWrapper.sidebar.myProjects')}(${myProjectCount})`,
+        label: `${t('pageWrapper.sidebar.myProjects')}`,
         link: `/creators/${auth?.username}/projects`,
         icon: Publish,
         requireAuth: true,
+        customButton: true,
     },
     { label: t('pageWrapper.sidebar.bookmarks'), link: '/projects/saved', icon: Bookmark, requireAuth: true },
     ...(TEAM_ENABLED ? [{ label: t('pageWrapper.sidebar.teams'), link: '/teams/all', icon: RiTeamFill }] : []),

diff --git a/zubhub_frontend/zubhub/src/components/Sidenav/sidenav.styles.js b/zubhub_frontend/zubhub/src/components/Sidenav/sidenav.styles.js
@@ -59,5 +59,25 @@ export const sidenavStyle = theme => ({
     link: {
         textDecoration: 'none', padding: '0 30px',
     },
-    listContainer: { display: 'flex', flex: 1, flexDirection: 'column', paddingTop: 30 }
+    listContainer: { display: 'flex', flex: 1, flexDirection: 'column', paddingTop: 30 },
+    customNumberTag: {
+        backgroundColor: colors.primary,
+        color: 'white',
+        borderRadius: 40,
+        padding: '0 5px',
+        fontSize: 12,
+        marginLeft: 30,
+        alignSelf: 'right',
+        border: 'none',
+        height: 20,
+        minWidth: 30,
+        '& span': {
+            color: 'white',
+            fontSize: 12,
+            fontWeight: '300',
+        },
+        '&:hover': {
+            backgroundColor: colors.primary,
+        },
+    },
 })