feat: pod page (#1137)

* fix: mission control create * fix: remove logs * metamask payment (#1131) * hotfix - manual reload * fix: hide payment ledger bottom action bar when modal is visible (#1133) * feat: pod page * feat: show pods list [wip] * feat: pods list * feat: create new pod * feat: search pods * fix: show pod tab only for orgs * fix: collaboration link * fix: replaced mui components with custom styled-components * fix: podview naming * refactor: use useQuery instead of useLazyQuery * fix: add pod link with && operator * fix: collaborations pathname Co-authored-by: Andros <wong22@hotmail.co.uk> Co-authored-by: Terry Li <terryli0095@gmail.com>
wondrous-dev · Oct 26, 2022 · 74a7c2a · 74a7c2a
1 parent 138bbe7
commit 74a7c2a
Show file tree

Hide file tree

Showing 11 changed files with 588 additions and 10 deletions.
diff --git a/wondrous-app/components/Common/RolePill/index.tsx b/wondrous-app/components/Common/RolePill/index.tsx
@@ -9,7 +9,9 @@ interface RolePillType {
 }
 
 const RolePill: React.FC<RolePillType> = ({ roleName, onClick }) => (
-  <MemberRolePill onClick={onClick} roleName={roleName}>{`${getRoleEmoji(roleName)}  ${roleName}`}</MemberRolePill>
+  <MemberRolePill onClick={onClick} roleName={roleName}>{`${getRoleEmoji(roleName)}  ${
+    roleName || 'no role'
+  }`}</MemberRolePill>
 );
 
 export default RolePill;
diff --git a/wondrous-app/components/Common/SidebarEntityList/index.tsx b/wondrous-app/components/Common/SidebarEntityList/index.tsx
@@ -10,6 +10,7 @@ import PieChartIcon from 'components/Icons/Sidebar/pieChart.svg';
 import ShowChartIcon from 'components/Icons/Sidebar/showChart.svg';
 import StackIcon from 'components/Icons/Sidebar/stack.svg';
 import StartIcon from 'components/Icons/Sidebar/star.svg';
+import PodIcon from 'components/Icons/Sidebar/pods.svg';
 import { GET_TASKS_PER_TYPE, GET_TASKS_PER_TYPE_FOR_POD } from 'graphql/queries';
 import { useRouter } from 'next/router';
 import { ENTITIES_TYPES } from 'utils/constants';
@@ -48,7 +49,7 @@ const useSidebarData = () => {
     };
   const link = orgBoard ? `/organization/${board?.orgData?.username}` : `/pod/${board?.podId}`;
   const taskCount = usePerTypeTaskCountForBoard();
-  return {
+  const sidebarData = {
     handleOnClick,
     data: [
       {
@@ -93,12 +94,12 @@ const useSidebarData = () => {
               },
             },
           },
-
-          // {
-          //   text: 'Pods',
-          //   Icon: PodIcon,
-          //   link: null, // link: not sure yet
-          // },
+          !!orgBoard && {
+            text: 'Pods',
+            Icon: PodIcon,
+            link: `${link}/pods`,
+            count: board?.orgData?.podCount,
+          },
         ],
       },
       {
@@ -140,6 +141,7 @@ const useSidebarData = () => {
       },
     ],
   };
+  return sidebarData;
 };
 
 const location = () => {

diff --git a/wondrous-app/components/Settings/Members/MembersTableRow/helpers.ts b/wondrous-app/components/Settings/Members/MembersTableRow/helpers.ts
@@ -54,7 +54,7 @@ export const getRoleEmoji = (role) => {
 export const getRoleColor = (role) => {
   // role is either the role object or rolename
   if (!role) {
-    return '';
+    return ROLE_COLORS_AND_EMOJIS[ROLES.NO_ROLE].color;
   }
   let correspondingRoleKey;
   if (typeof role === 'string') {

diff --git a/wondrous-app/components/organization/pods/PodItem/index.tsx b/wondrous-app/components/organization/pods/PodItem/index.tsx
@@ -0,0 +1,51 @@
+import RolePill from 'components/Common/RolePill';
+import PodIcon from 'components/Icons/podIcon';
+import MemberIcon from 'components/Icons/Sidebar/people.svg';
+import { useOrgBoard } from 'utils/hooks';
+import {
+  PodDescriptionText,
+  PodItemContainer,
+  PodItemContributorsCount,
+  PodItemDetails,
+  PodItemDetailsContainer,
+  PodItemIconWrapper,
+  PodItemStats,
+  PodItemStatsContainer,
+  PodNameText,
+} from './styles';
+
+const PodItem = (props) => {
+  const { podData } = props;
+
+  const { userPermissionsContext } = useOrgBoard() || {};
+
+  const podId = podData?.id;
+  const bgColor = podData?.color;
+  const podName = podData?.name;
+  const podDescription = podData?.description;
+  const contributorCount = podData?.contributorCount || 0;
+  const role = userPermissionsContext?.podRoles[podId];
+
+  return (
+    <PodItemContainer>
+      <PodItemDetailsContainer>
+        <PodItemIconWrapper bgColor={bgColor}>
+          <PodIcon />
+        </PodItemIconWrapper>
+        <PodItemDetails>
+          <PodNameText>{podName}</PodNameText>
+          {!!podDescription && <PodDescriptionText>{podDescription}</PodDescriptionText>}
+        </PodItemDetails>
+      </PodItemDetailsContainer>
+      <PodItemStatsContainer>
+        <PodItemStats>
+          <MemberIcon />
+          <PodItemContributorsCount>{contributorCount}</PodItemContributorsCount>
+        </PodItemStats>
+        <RolePill roleName={role} />
+      </PodItemStatsContainer>
+    </PodItemContainer>
+  );
+};
+
+export default PodItem;
diff --git a/wondrous-app/components/organization/pods/PodItem/styles.tsx b/wondrous-app/components/organization/pods/PodItem/styles.tsx
@@ -0,0 +1,86 @@
+import { Typography } from '@mui/material';
+import styled from 'styled-components';
+import palette from 'theme/palette';
+
+export const PodItemContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 65px;
+  background: ${palette.background.default};
+  transition: background 0.2s ease-in-out;
+  border-radius: 6px;
+  padding: 20px;
+
+  &:hover {
+    background: ${palette.grey95};
+  }
+`;
+
+export const PodItemDetailsContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  max-width: 400px;
+  overflow: hidden;
+`;
+
+export const PodItemDetails = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+export const PodNameText = styled(Typography)`
+  && {
+    color: ${palette.blue20};
+    font-weight: 700;
+    font-size: 15px;
+  }
+`;
+
+export const PodDescriptionText = styled(Typography)`
+  && {
+    color: ${palette.grey250};
+    font-size: 14px;
+    max-width: 260px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
+
+export const PodItemIconWrapper = styled.div`
+  padding: 10px;
+  border-radius: 1000px;
+  background: ${({ bgColor }) => bgColor || palette.black85};
+  display: flex;
+`;
+
+export const PodItemStatsContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+
+  p {
+    font-weight: 500;
+    font-size: 13px;
+  }
+`;
+
+export const PodItemStats = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 6px;
+  border-radius: 4px;
+  background: ${palette.grey87};
+`;
+
+export const PodItemContributorsCount = styled(Typography)`
+  && {
+    color: ${palette.grey250};
+    font-size: 13px;
+    font-weight: 500;
+  }
+`;
diff --git a/wondrous-app/components/organization/pods/constants.tsx b/wondrous-app/components/organization/pods/constants.tsx
@@ -0,0 +1,5 @@
+export enum PodView {
+  ALL_PODS = 0,
+  PODS_USER_IS_MEMBER_OF = 1,
+  PODS_USER_IS_NOT_MEMBER_OF = 2,
+}