Merge branch 'main' into fix/issues

xgeekshq · Nov 29, 2022 · 1ad3a4a · 1ad3a4a
2 parents 3c4b789 + 227d20d
commit 1ad3a4a
Show file tree

Hide file tree

Showing 14 changed files with 1,439 additions and 1,366 deletions.
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -0,0 +1,22 @@
+version: 2
+updates:
+- package-ecosystem: github-actions
+  directory: /
+  schedule:
+    interval: weekly
+  ignore:
+    - dependency-name: '*'
+      update-types: ["version-update:semver-patch"]
+  open-pull-requests-limit: 10
+  reviewers:
+    - xgeekshq/split-admins
+- package-ecosystem: npm
+  directory: /
+  schedule:
+    interval: weekly
+  ignore:
+    - dependency-name: '*'
+      update-types: ["version-update:semver-patch"]
+  open-pull-requests-limit: 10
+  reviewers:
+    - xgeekshq/split-admins
diff --git a/.github/workflows/tests_backend_frontend.yml b/.github/workflows/tests_backend_frontend.yml
@@ -23,7 +23,7 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Use Node.js ${{ env.NODE_VERSION}}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ env.NODE_VERSION}}
           cache: "npm"
@@ -52,7 +52,7 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Use Node.js ${{ env.NODE_VERSION}}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ env.NODE_VERSION}}
           cache: "npm"
@@ -85,7 +85,7 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Use Node.js ${{ env.NODE_VERSION}}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ env.NODE_VERSION}}
           cache: "npm"
@@ -118,7 +118,7 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Use Node.js ${{ env.NODE_VERSION}}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ env.NODE_VERSION}}
           cache: "npm"
@@ -151,7 +151,7 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Use Node.js ${{ env.NODE_VERSION}}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ env.NODE_VERSION}}
           cache: "npm"

diff --git a/.github/workflows/validate_pr.yml b/.github/workflows/validate_pr.yml
@@ -18,7 +18,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: semantic-pull-request
-        uses: amannn/action-semantic-pull-request@v4.5.0
+        uses: amannn/action-semantic-pull-request@v5.0.2
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:

diff --git a/frontend/src/api/teamService.tsx b/frontend/src/api/teamService.tsx
@@ -18,3 +18,6 @@ export const getTeamRequest = (id: string, context?: GetServerSidePropsContext):
 
 export const updateTeamUserRequest = (team: TeamUserUpdate): Promise<TeamUserUpdate> =>
   fetchData(`/teams/${team.team}`, { method: 'PUT', data: team });
+
+export const deleteTeamRequest = ({ id }: { id: string }): Promise<Team> =>
+  fetchData(`/teams/${id}`, { method: 'DELETE' });
diff --git a/frontend/src/components/Teams/TeamsList/partials/CardTeam/CardEnd.tsx b/frontend/src/components/Teams/TeamsList/partials/CardTeam/CardEnd.tsx
@@ -23,7 +23,7 @@ const CardEnd: React.FC<CardEndProps> = React.memo(
       return (
         <Flex css={{ alignItems: 'center' }}>
           <Flex align="center" css={{ ml: '$24' }} gap="24">
-            <DeleteTeam teamName={name} />
+            <DeleteTeam teamName={name} teamId={team._id} />
           </Flex>
         </Flex>
       );

diff --git a/frontend/src/components/Teams/TeamsList/partials/CardTeam/DeleteTeam.tsx b/frontend/src/components/Teams/TeamsList/partials/CardTeam/DeleteTeam.tsx
@@ -3,33 +3,41 @@ import AlertCustomDialog from '@/components/Primitives/AlertCustomDialog';
 import { AlertDialogTrigger } from '@/components/Primitives/AlertDialog';
 import Flex from '@/components/Primitives/Flex';
 import Tooltip from '@/components/Primitives/Tooltip';
+import useTeam from '@/hooks/useTeam';
 
-type DeleteTeamProps = { teamName: string };
+type DeleteTeamProps = { teamName: string; teamId: string; socketId?: string };
 
-const DeleteTeam: React.FC<DeleteTeamProps> = ({ teamName }) => (
-  <AlertCustomDialog
-    cancelText="Cancel"
-    confirmText="Delete"
-    css={undefined}
-    defaultOpen={false}
-    text={`Do you really want to delete the team “${teamName}”?`}
-    title="Delete Team"
-  >
-    <Tooltip content="Delete Team">
-      <AlertDialogTrigger asChild>
-        <Flex pointer>
-          <Icon
-            name="trash-alt"
-            css={{
-              color: '$primary400',
-              width: '$20',
-              height: '$20',
-            }}
-          />
-        </Flex>
-      </AlertDialogTrigger>
-    </Tooltip>
-  </AlertCustomDialog>
-);
+const DeleteTeam: React.FC<DeleteTeamProps> = ({ teamName, teamId }) => {
+  const { deleteTeam } = useTeam({ autoFetchTeam: false });
+  const handleDelete = () => {
+    deleteTeam.mutate({ id: teamId });
+  };
+  return (
+    <AlertCustomDialog
+      cancelText="Cancel"
+      confirmText="Delete"
+      css={undefined}
+      defaultOpen={false}
+      handleConfirm={handleDelete}
+      text={`Do you really want to delete the team “${teamName}”?`}
+      title="Delete Team"
+    >
+      <Tooltip content="Delete Team">
+        <AlertDialogTrigger asChild>
+          <Flex pointer>
+            <Icon
+              name="trash-alt"
+              css={{
+                color: '$primary400',
+                width: '$20',
+                height: '$20',
+              }}
+            />
+          </Flex>
+        </AlertDialogTrigger>
+      </Tooltip>
+    </AlertCustomDialog>
+  );
+};
 
 export default DeleteTeam;
diff --git a/frontend/src/hooks/useTeam.tsx b/frontend/src/hooks/useTeam.tsx
@@ -3,6 +3,7 @@ import { useMutation, useQuery } from 'react-query';
 import { ToastStateEnum } from '@/utils/enums/toast-types';
 import {
   createTeamRequest,
+  deleteTeamRequest,
   getAllTeams,
   getTeamRequest,
   getTeamsOfUser,
@@ -16,7 +17,15 @@ interface AutoFetchProps {
 }
 
 const useTeam = ({ autoFetchTeam = false }: AutoFetchProps): UseTeamType => {
-  const { teamId, setToastState, membersList, setMembersList, queryClient } = useTeamUtils();
+  const {
+    teamId,
+    setToastState,
+    membersList,
+    setMembersList,
+    queryClient,
+    teamsList,
+    setTeamsList,
+  } = useTeamUtils();
 
   const fetchAllTeams = useQuery(['allTeams'], () => getAllTeams(), {
     enabled: autoFetchTeam,
@@ -99,12 +108,37 @@ const useTeam = ({ autoFetchTeam = false }: AutoFetchProps): UseTeamType => {
     },
   });
 
+  const deleteTeam = useMutation(deleteTeamRequest, {
+    onSuccess: (data, variables) => {
+      queryClient.invalidateQueries('teams');
+
+      // updates the teamsList recoil
+      const teams = teamsList.filter((team) => team._id !== variables.id);
+
+      setTeamsList(teams);
+
+      setToastState({
+        open: true,
+        content: 'The team was successfully deleted.',
+        type: ToastStateEnum.SUCCESS,
+      });
+    },
+    onError: () => {
+      setToastState({
+        open: true,
+        content: 'Error deleting the team',
+        type: ToastStateEnum.ERROR,
+      });
+    },
+  });
+
   return {
     fetchAllTeams,
     fetchTeamsOfUser,
     createTeam,
     fetchTeam,
     updateTeamUser,
+    deleteTeam,
   };
 };
 

diff --git a/frontend/src/hooks/useTeamUtils.tsx b/frontend/src/hooks/useTeamUtils.tsx
@@ -1,10 +1,11 @@
 import { QueryClient, useQueryClient } from 'react-query';
 import { NextRouter, useRouter } from 'next/router';
 import { useSession } from 'next-auth/react';
-import { SetterOrUpdater, useRecoilValue, useSetRecoilState } from 'recoil';
+import { SetterOrUpdater, useRecoilState, useSetRecoilState } from 'recoil';
 
 import { toastState } from '@/store/toast/atom/toast.atom';
-import { membersListState } from '../store/team/atom/team.atom';
+import { Team } from '@/types/team/team';
+import { membersListState, teamsListState } from '../store/team/atom/team.atom';
 import { TeamUser } from '../types/team/team.user';
 import { ToastStateEnum } from '../utils/enums/toast-types';
 
@@ -16,6 +17,8 @@ type TeamUtilsType = {
   router: NextRouter;
   membersList: TeamUser[];
   setMembersList: SetterOrUpdater<TeamUser[]>;
+  teamsList: Team[];
+  setTeamsList: SetterOrUpdater<Team[]>;
 };
 
 const useTeamUtils = (): TeamUtilsType => {
@@ -29,11 +32,12 @@ const useTeamUtils = (): TeamUtilsType => {
   if (session) userId = session.user.id;
 
   const setToastState = useSetRecoilState(toastState);
-  const membersList = useRecoilValue(membersListState);
-  const setMembersList = useSetRecoilState(membersListState);
+  const [membersList, setMembersList] = useRecoilState(membersListState);
 
   const { teamId } = router.query;
 
+  const [teamsList, setTeamsList] = useRecoilState(teamsListState);
+
   return {
     userId,
     teamId: String(teamId),
@@ -42,6 +46,8 @@ const useTeamUtils = (): TeamUtilsType => {
     router,
     membersList,
     setMembersList,
+    teamsList,
+    setTeamsList,
   };
 };
 

diff --git a/frontend/src/pages/teams/index.tsx b/frontend/src/pages/teams/index.tsx
@@ -1,4 +1,4 @@
-import { ReactElement, Suspense } from 'react';
+import { ReactElement, Suspense, useEffect } from 'react';
 import { dehydrate, QueryClient } from 'react-query';
 import { GetServerSideProps, GetServerSidePropsContext } from 'next';
 import { getSession, useSession } from 'next-auth/react';
@@ -11,20 +11,28 @@ import LoadingPage from '@/components/loadings/LoadingPage';
 import Flex from '@/components/Primitives/Flex';
 import TeamsList from '@/components/Teams/TeamsList';
 import useTeam from '@/hooks/useTeam';
+import useTeamUtils from '@/hooks/useTeamUtils';
 
 const Teams = () => {
   const { data: session } = useSession({ required: true });
+  const { teamsList, setTeamsList } = useTeamUtils();
 
   const {
     fetchTeamsOfUser: { data, isFetching },
   } = useTeam({ autoFetchTeam: false });
 
+  useEffect(() => {
+    if (!data) return;
+    setTeamsList(data);
+  }, [data, setTeamsList]);
+
   if (!session || !data) return null;
+
   return (
     <Flex direction="column">
       <Suspense fallback={<LoadingPage />}>
         <QueryError>
-          <TeamsList isFetching={isFetching} teams={data} userId={session.user.id} />
+          <TeamsList isFetching={isFetching} teams={teamsList} userId={session.user.id} />
         </QueryError>
       </Suspense>
     </Flex>

diff --git a/frontend/src/store/team/atom/team.atom.tsx b/frontend/src/store/team/atom/team.atom.tsx
@@ -1,3 +1,4 @@
+import { Team } from '@/types/team/team';
 import { atom } from 'recoil';
 
 import { TeamUser } from '../../../types/team/team.user';
@@ -12,3 +13,8 @@ export const usersListState = atom<UserList[]>({
   key: 'usersList',
   default: [],
 });
+
+export const teamsListState = atom<Team[]>({
+  key: 'teamsList',
+  default: [],
+});
diff --git a/frontend/src/types/team/useTeam.ts b/frontend/src/types/team/useTeam.ts
@@ -9,4 +9,5 @@ export default interface UseTeamType {
   fetchTeamsOfUser: UseQueryResult<Team[] | null, unknown>;
   fetchTeam: UseQueryResult<Team | null | undefined, unknown>;
   updateTeamUser: UseMutationResult<TeamUserUpdate, unknown, TeamUserUpdate, unknown>;
+  deleteTeam: UseMutationResult<Team, unknown, { id: string }, unknown>;
 }