Merge pull request #237 from AppQuality/develop

Bug fixes

Author: cannarocks

package.json

@@ -3,7 +3,7 @@
   "version": "1.4.0",
   "private": true,
   "dependencies": {
-    "@appquality/unguess-design-system": "2.11.18",
+    "@appquality/unguess-design-system": "2.12.11",
     "@headwayapp/react-widget": "^0.0.4",
     "@reduxjs/toolkit": "^1.8.0",
     "@rtk-query/codegen-openapi": "^1.0.0-alpha.1",

src/app/store.ts

@@ -1,11 +1,11 @@
 import { configureStore } from '@reduxjs/toolkit';
 import { setupListeners } from '@reduxjs/toolkit/dist/query';
+import { unguessApiSlice } from 'src/features/api/apiTags';
 import userReducer from '../features/user/userSlice';
 import navigationReducer from '../features/navigation/navigationSlice';
 import workspaceReducer from '../features/workspaces/workspaceSlice';
 import filterReducer from '../features/campaignsFilter/campaignsFilterSlice';
 import expressReducer from '../features/express/expressSlice';
-import { apiSlice } from '../features/api/api';
 import { strapiSlice } from '../features/backoffice/strapi';
 
 export const store = configureStore({
@@ -15,13 +15,13 @@ export const store = configureStore({
     workspaces: workspaceReducer,
     filters: filterReducer,
     express: expressReducer,
-    [apiSlice.reducerPath]: apiSlice.reducer,
+    [unguessApiSlice.reducerPath]: unguessApiSlice.reducer,
     [strapiSlice.reducerPath]: strapiSlice.reducer,
   },
 
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware()
-      .concat(apiSlice.middleware)
+      .concat(unguessApiSlice.middleware)
       .concat(strapiSlice.middleware),
 });
 

src/features/api/api.ts

@@ -20,6 +20,7 @@ export const apiSlice = createApi({
     },
     paramsSerializer: (params) => stringify(params, { encodeValuesOnly: true }),
   }),
+  tagTypes: ['User', 'Workspaces', 'Projects', 'Campaigns', 'Templates'],
   endpoints: (build) => ({
     getWorkspacesByWid: build.query<
       GetWorkspacesByWidApiResponse,

src/features/api/apiTags.ts

@@ -0,0 +1,53 @@
+import { unguessApi } from '.';
+
+unguessApi.enhanceEndpoints({
+  endpoints: {
+    getUsersMe: {
+      providesTags: ['User'],
+    },
+    getWorkspaces: {
+      providesTags: ['Workspaces'],
+    },
+    getWorkspacesByWid: {
+      providesTags: ['Workspaces'],
+    },
+    getWorkspacesByWidCampaigns: {
+      providesTags: ['Campaigns', 'Projects'],
+    },
+    getWorkspacesByWidProjects: {
+      providesTags: ['Projects'],
+    },
+    getWorkspacesByWidProjectsAndPid: {
+      providesTags: ['Projects'],
+    },
+    getWorkspacesByWidProjectsAndPidCampaigns: {
+      providesTags: ['Campaigns', 'Projects'],
+    },
+    getProjectsByPidCampaigns: {
+      providesTags: ['Campaigns', 'Projects'],
+    },
+    getProjectsByPid: {
+      providesTags: ['Projects'],
+    },
+    patchProjectsByPid: {
+      invalidatesTags: ['Projects'],
+    },
+    postCampaigns: {
+      invalidatesTags: ['Campaigns'],
+    },
+    patchCampaignsByCid: {
+      invalidatesTags: ['Campaigns'],
+    },
+    postProjects: {
+      invalidatesTags: ['Projects'],
+    },
+    getWorkspacesByWidCoins: {
+      providesTags: ['Workspaces'],
+    },
+    getTemplates: {
+      providesTags: ['Templates'],
+    },
+  },
+});
+
+export { unguessApi as unguessApiSlice };

src/features/api/index.ts

@@ -90,6 +90,16 @@ const injectedRtkApi = api.injectEndpoints({
     >({
       query: (queryArg) => ({ url: `/projects/${queryArg.pid}` }),
     }),
+    patchProjectsByPid: build.mutation<
+      PatchProjectsByPidApiResponse,
+      PatchProjectsByPidApiArg
+    >({
+      query: (queryArg) => ({
+        url: `/projects/${queryArg.pid}`,
+        method: 'PATCH',
+        body: queryArg.body,
+      }),
+    }),
     postCampaigns: build.mutation<
       PostCampaignsApiResponse,
       PostCampaignsApiArg
@@ -100,6 +110,16 @@ const injectedRtkApi = api.injectEndpoints({
         body: queryArg.body,
       }),
     }),
+    patchCampaignsByCid: build.mutation<
+      PatchCampaignsByCidApiResponse,
+      PatchCampaignsByCidApiArg
+    >({
+      query: (queryArg) => ({
+        url: `/campaigns/${queryArg.cid}`,
+        method: 'PATCH',
+        body: queryArg.body,
+      }),
+    }),
     postProjects: build.mutation<PostProjectsApiResponse, PostProjectsApiArg>({
       query: (queryArg) => ({
         url: `/projects`,
@@ -250,6 +270,14 @@ export type GetProjectsByPidApiArg = {
   /** Project id */
   pid: number;
 };
+export type PatchProjectsByPidApiResponse = /** status 200 OK */ Project;
+export type PatchProjectsByPidApiArg = {
+  /** Project id */
+  pid: number;
+  body: {
+    display_name: string;
+  };
+};
 export type PostCampaignsApiResponse = /** status 200 OK */ Campaign;
 export type PostCampaignsApiArg = {
   body: {
@@ -275,6 +303,14 @@ export type PostCampaignsApiArg = {
     use_cases?: UseCase[];
   };
 };
+export type PatchCampaignsByCidApiResponse = /** status 200 OK */ Campaign;
+export type PatchCampaignsByCidApiArg = {
+  /** Campaign id */
+  cid: number;
+  body: {
+    customer_title?: string;
+  };
+};
 export type PostProjectsApiResponse = /** status 200 OK */ Project;
 export type PostProjectsApiArg = {
   body: {
@@ -439,7 +475,9 @@ export const {
   useGetWorkspacesByWidProjectsAndPidCampaignsQuery,
   useGetProjectsByPidCampaignsQuery,
   useGetProjectsByPidQuery,
+  usePatchProjectsByPidMutation,
   usePostCampaignsMutation,
+  usePatchCampaignsByCidMutation,
   usePostProjectsMutation,
   useGetWorkspacesByWidCoinsQuery,
   useGetTemplatesQuery,

src/features/navigation/Navigation.tsx

@@ -3,7 +3,6 @@ import {
   Content,
   Sidebar,
   ProfileModal,
-  PageLoader,
   theme,
 } from '@appquality/unguess-design-system';
 import { useTranslation } from 'react-i18next';
@@ -84,10 +83,6 @@ export const Navigation = ({
     wid: activeWorkspace?.id || 0,
   });
 
-  if (projects.isFetching || projects.isLoading) {
-    return <PageLoader />;
-  }
-
   const projectsList =
     !projects.data || !projects.data.items
       ? []
@@ -211,6 +206,8 @@ export const Navigation = ({
     dispatch(setProfileModalOpen(false));
   };
 
+  if (!activeWorkspace) return null;
+
   return (
     <>
       <AppHeader
@@ -253,6 +250,8 @@ export const Navigation = ({
           projects={projectsList}
           isExpanded={isSidebarOpen}
           onToggleMenu={toggleSidebarState}
+          defaultAccordionPanels={[0]}
+          isLoading={projects.isFetching || projects.isLoading}
           dividerLabel={t('__APP_SIDEBAR_PROJECTS_DIVIDER_LABEL')}
           onNavToggle={navigateTo}
           currentRoute={

src/locales/en/translation.json

@@ -117,7 +117,7 @@
   "__EXPRESS_LABEL": "Express",
   "__EXPRESS_WIZARD_BACK_BUTTON_LABEL": "Back",
   "__EXPRESS_WIZARD_CONFIRM_BUTTON_LABEL": "Launch",
-  "__EXPRESS_WIZARD_CONFIRM_CLOSE_MESSAGE": "If you close this modal, you will lose all the informations you have entered.",
+  "__EXPRESS_WIZARD_CONFIRM_CLOSE_MESSAGE": "The campaign will be discarded.",
   "__EXPRESS_WIZARD_CONFIRM_DELETE_USE_CASE": "If you delete it, you will lose all the informations you have entered.",
   "__EXPRESS_WIZARD_CONFIRM_PLANNING_BUTTON_LABEL": "Plan",
   "__EXPRESS_WIZARD_NEXT_BUTTON_LABEL": "Next",
@@ -295,6 +295,7 @@
   "__PROFILE_MODAL_FEEDBACK_TITLE": "Give us your feedback",
   "__PROFILE_MODAL_LANGUAGES_TITLE": "Change Language",
   "__PROFILE_MODAL_LOGOUT_TITLE": "Log Out",
+  "__PROJECT_PAGE_UPDATE_PROJECT_NAME_ERROR": "",
   "__SERVICE_DETAIL_PAGE_TAG_RESULTS_DAYS_LABEL": "First results in <1><0>{{hours}}</0></1>h",
   "__SIDEBAR_CAMPAIGNS_LABEL": "campaigns",
   "__TAILORED_LABEL": "Tailored",

src/locales/it/translation.json

@@ -117,7 +117,7 @@
   "__EXPRESS_LABEL": "Express",
   "__EXPRESS_WIZARD_BACK_BUTTON_LABEL": "Indietro",
   "__EXPRESS_WIZARD_CONFIRM_BUTTON_LABEL": "Lancia",
-  "__EXPRESS_WIZARD_CONFIRM_CLOSE_MESSAGE": "Se chiudi questa modale, perderai tutte le informazioni da te inserite.",
+  "__EXPRESS_WIZARD_CONFIRM_CLOSE_MESSAGE": "La campagna verrà eliminata per sempre.",
   "__EXPRESS_WIZARD_CONFIRM_DELETE_USE_CASE": "Se lo elimini, perderai tutte le informazioni inserite.",
   "__EXPRESS_WIZARD_CONFIRM_PLANNING_BUTTON_LABEL": "Pianifica",
   "__EXPRESS_WIZARD_NEXT_BUTTON_LABEL": "Avanti",
@@ -295,6 +295,7 @@
   "__PROFILE_MODAL_FEEDBACK_TITLE": "Dacci il tuo feedback",
   "__PROFILE_MODAL_LANGUAGES_TITLE": "Cambia Lingua",
   "__PROFILE_MODAL_LOGOUT_TITLE": "Esci",
+  "__PROJECT_PAGE_UPDATE_PROJECT_NAME_ERROR": "",
   "__SERVICE_DETAIL_PAGE_TAG_RESULTS_DAYS_LABEL": "Primi risultati in <1><0>{{hours}}</0></1>h",
   "__SIDEBAR_CAMPAIGNS_LABEL": "campagne",
   "__TAILORED_LABEL": "Tailored",

src/pages/Dashboard/Project.tsx

@@ -8,10 +8,8 @@ import {
   projectFilterChanged,
   resetFilters,
 } from 'src/features/campaignsFilter/campaignsFilterSlice';
-import { useGetProjectsByPidQuery } from 'src/features/api';
-import { DashboardHeaderContent } from './headerContent';
-import { CardRowLoading } from './CardRowLoading';
 import { ProjectItems } from './project-items';
+import { ProjectPageHeader } from './projectPageHeader';
 
 const Project = () => {
   const { t } = useTranslation();
@@ -22,30 +20,20 @@ const Project = () => {
 
   if (!projectId || Number.isNaN(Number(projectId))) {
     navigate(notFoundRoute, { replace: true });
-  }
-
-  const project = useGetProjectsByPidQuery({
-    pid: projectId ? parseInt(projectId, 10) : 0,
-  });
-
-  if (project.isError) navigate(notFoundRoute, { replace: true });
-
-  if (project.isSuccess && project.data) {
+  } else {
     dispatch(resetFilters());
-    dispatch(projectFilterChanged(project.data.id));
+    dispatch(projectFilterChanged(Number(projectId)));
   }
 
-  const isLoading = project.isFetching || project.isLoading;
-
   return (
     <Page
       title={t('__PAGE_TITLE_PRIMARY_DASHBOARD_SINGLE_PROJECT')}
       route="projects"
-      pageHeader={
-        <DashboardHeaderContent pageTitle={project?.data?.name || 'Project'} />
-      }
+      pageHeader={<ProjectPageHeader projectId={Number(projectId) || 0} />}
     >
-      <Grid>{isLoading ? <CardRowLoading /> : <ProjectItems />}</Grid>
+      <Grid>
+        <ProjectItems />
+      </Grid>
     </Page>
   );
 };

src/pages/Dashboard/headerContent.tsx

@@ -23,10 +23,12 @@ export const DashboardHeaderContent = ({
 
   return status === 'idle' || status === 'loading' ? null : (
     <PageHeader>
-      <PageHeader.Main
-        infoTitle={pageTitle || 'My Dashboard'}
-        infoCounters={<Counters />}
-      />
+      <PageHeader.Main infoTitle={pageTitle || 'My Dashboard'}>
+        <PageHeader.Title>{pageTitle || 'My Dashboard'}</PageHeader.Title>
+        <PageHeader.Counters>
+          <Counters />
+        </PageHeader.Counters>
+      </PageHeader.Main>
       {hasButton && (
         <PageHeader.Buttons>
           <Button