feat: render tenant connections in the Sidebar component

src/components/SideBar/SideBar.tsx

@@ -2,6 +2,45 @@ import React from "react";
 import { Link } from "react-router-dom";
 import { Teams } from "./Teams";
 import { styled } from "@mui/material/styles";
+import { useTenantMap } from "../../hooks/users";
+import { assignColor, findPinnedByPath, getOrgs, orderBy } from "../../helpers";
+import { usePinned } from "../../services/PinnedProvider";
+
+const RenderOrganizations = () => {
+  const { isLoading, isError, data: tmap } = useTenantMap();
+  const { pinned } = usePinned();
+
+  if (isLoading || isError || !tmap) {
+    return <div></div>;
+  }
+
+  const orgs = orderBy("company", getOrgs(tmap)).map(assignColor);
+
+  return (
+    <>
+      {orgs.map(({ name, path, color }, index) => {
+        const pinnedProjects = findPinnedByPath(pinned, path);
+        return (
+          <li key={index}>
+            <OrgLink to={`/${path}/projects`}>
+              <aside className={color}></aside>
+              <p>{name}</p>
+            </OrgLink>
+
+            {(pinnedProjects || []).map((project, index) => (
+              <ProjectLink
+                key={index}
+                to={`/${path}/projects/${project.projectId}`}
+              >
+                {project.name}
+              </ProjectLink>
+            ))}
+          </li>
+        );
+      })}
+    </>
+  );
+};
 
 export const SideBar = () => {
   return (
@@ -14,11 +53,12 @@ export const SideBar = () => {
         </div>
       </Container>
       <PrimaryNav>
-        <li>
+        <li className="bottom">
           <StyledLink to="/projects">
             <div>Projects</div>
           </StyledLink>
         </li>
+        <RenderOrganizations />
       </PrimaryNav>
       <Teams />
     </StyledSideBar>
@@ -28,7 +68,7 @@ export const SideBar = () => {
 const StyledSideBar = styled("div")`
   background: var(--white1);
   height: calc(100vh + 48px);
-  width: var(--p256);
+  width: var(--p300);
   font-size: var(--p18);
   position: relative;
   ul {
@@ -38,12 +78,44 @@ const StyledSideBar = styled("div")`
     display: none;
   }
 `;
+
+const OrgLink = styled(Link)`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-family: ProximaNova-Semibold;
+  font-size: var(--p16);
+  color: var(--gray7);
+  text-decoration: none;
+
+  aside {
+    height: 30px;
+    width: 30px;
+    margin-right: var(--p14);
+  }
+`;
+
+const ProjectLink = styled(Link)`
+  margin-left: 44px;
+  margin-top: 14px;
+  display: block;
+  text-decoration: none;
+  color: var(--gray7);
+  font-family: ProximaNova-Light;
+`;
+
 const PrimaryNav = styled("ul")`
   list-style: none;
   padding: 0;
   li {
     padding: var(--p12) var(--p24);
   }
+  li.bottom {
+    margin-bottom: 52px;
+  }
+  p {
+    margin: 0;
+  }
 `;
 const Container = styled("div")`
   padding: var(--p16) var(--p24);
@@ -58,7 +130,9 @@ const Logo = styled("img")`
 const StyledLink = styled(Link)`
   text-decoration: none;
   cursor: pointer;
-  color: var(--gray3);
+  color: var(--gray6);
+  font-family: ProximaNova-Semibold;
+  font-size: var(--p20);
   padding-top: var(--p8);
   &:hover {
     color: var(--gray5);

src/features/Projects/Card/Card.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import { Project } from "../../Project/types";
 import { styled } from "@mui/material/styles";
@@ -7,33 +7,90 @@ import { Memberships } from "../../Project/types";
 import { Avatar } from "../../../components/Avatar";
 import { useTenantMap } from "../../../hooks/users";
 import { Loader } from "../../../components/Loader";
+import PushPinIcon from "@mui/icons-material/PushPin";
+import {
+  assignColor,
+  getOrgs,
+  getPinState,
+  PinnedProject,
+  orderBy,
+} from "../../../helpers";
+import IconButton from "@mui/material/IconButton";
+import { usePinned } from "../../../services/PinnedProvider";
 
 interface Props {
   project: Project;
-  seq: number;
 }
 
-export const Card = ({ project, seq }: Props) => {
+export const Card = ({ project }: Props) => {
+  const [pinState, setPinState] = useState(getPinState(project));
   const { data: memberships } = useTeamMemberships(project.teamId);
   const { data: team } = useTeam(project.teamId);
-  const { isLoading, isError, data } = useTenantMap();
+  const { isLoading, isError, data: tmap } = useTenantMap();
+  const { pinned, setPinned } = usePinned();
 
-  const color = (seq % 9) + 1;
-
-  if (isLoading || isError || data === undefined) {
+  if (isLoading || isError || !tmap) {
     return <Loader />;
   }
 
+  const orgs = orderBy("company", getOrgs(tmap)).map(assignColor);
+  const org = (orgs || []).find((org) => org.id === project.tenantId);
+
+  const handlePin = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.preventDefault();
+    if (!org) {
+      return;
+    }
+
+    const isPinned = !!pinned.find(
+      (p: PinnedProject) => p.projectId === project.id
+    );
+
+    if (isPinned) {
+      const updatedPins = pinned.filter((p) => p.projectId != project.id);
+      localStorage.setItem("settings.pinned", JSON.stringify(updatedPins));
+      setPinned(updatedPins);
+      setPinState(false);
+    } else {
+      const updatedPins = [
+        ...pinned,
+        {
+          name: project.name,
+          projectId: project.id,
+          tenantPath: org.path,
+        },
+      ];
+
+      localStorage.setItem("settings.pinned", JSON.stringify(updatedPins));
+      setPinned(updatedPins);
+      setPinState(true);
+    }
+  };
+
+  const path = tmap[project.tenantId].path;
+  const link = `/${path}/projects/${project.id}`;
+
+  if (!org) {
+    return <></>;
+  }
+
   return (
     <StyledCard className="shade2">
-      <Link
-        key={project.id}
-        to={`/${data[project.tenantId]}/projects/${project.id}`}
-      >
-        <div className={`color-tip badge${color}`} />
+      <Link key={project.id} to={link}>
+        <div className={`color-tip ${org.color}`} />
         <CardHeader>
-          <CardTitle>{project.name}</CardTitle>
-          <CardSubtitle>Developed by {team ? team.name : "Me"}</CardSubtitle>
+          <div className="header">
+            <CardTitle>{project.name}</CardTitle>
+            <CardSubtitle>Developed by {org.name}</CardSubtitle>
+          </div>
+          <div>
+            <IconButton onClick={(e) => handlePin(e)}>
+              <PushPinIcon
+                color={pinState ? "secondary" : "disabled"}
+                fontSize="small"
+              />
+            </IconButton>
+          </div>
         </CardHeader>
         <CardBody>
           <CardText>{project.description}</CardText>
@@ -116,6 +173,10 @@ const CardHeader = styled("div")`
   padding: var(--p16);
   box-sizing: border-box;
   border-bottom: 1px solid var(--gray1);
+  display: flex;
+  justify-content: space-between;
+  .header {
+  }
 `;
 const CardBody = styled("div")`
   display: flex;

src/features/Projects/List/List.tsx

@@ -3,21 +3,18 @@ import { CircularProgress, Grid } from "@mui/material";
 import { Card } from "../Card";
 import { styled } from "@mui/material/styles";
 import { Project } from "../../Project/types";
-import { orderBy } from "../helpers";
-
-interface Props {
-  isLoading: boolean;
-  projects: Project[] | undefined;
-}
+import { orderBy } from "../../../helpers";
+import { useProjects } from "../../../hooks/project";
 
 const renderProjectCards = (projects: Project[]) => {
-  const seq = projects.map((_, idx) => idx);
-  return orderBy(projects, "name").map((project: Project, index: number) => (
-    <Card key={project.id} project={project} seq={seq[index]} />
+  return orderBy("name", projects).map((project: Project) => (
+    <Card key={project.id} project={project} />
   ));
 };
 
-export const List = ({ isLoading, projects }: Props) => {
+export const List = () => {
+  const { isLoading, data: projects } = useProjects();
+
   if (isLoading) {
     return (
       <Grid item={true} xs={12}>

src/features/Projects/Projects.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import Grid from "@mui/material/Grid";
 import Fab from "@mui/material/Fab";
 import Add from "@mui/icons-material/Add";
@@ -10,8 +10,6 @@ import { Layout } from "../../Layout";
 
 export const Projects = () => {
   const [isOpen, setOpen] = useState(false);
-  const projects = useProjects();
-
   const [createProject] = useCreateProject();
 
   const toggleModal = () => {
@@ -28,7 +26,7 @@ export const Projects = () => {
               <Add />
             </Fab>
           </Header>
-          <List isLoading={projects.isLoading} projects={projects.data} />
+          <List />
           <Grid item={true} xs={12}>
             <Modal
               open={isOpen}