Improve networking, loading and redirection

src/App.tsx

@@ -28,7 +28,7 @@ import {
   AddProject,
   UpdateProject,
   Payments,
-  SupportMessaging,
+  Support,
 } from './pages';
 import { GetUserByIdQuery, GetUserByIdQueryVariables } from './graphql/types';
 import { GET_USER_BY_ID } from './graphql/auth.api';
@@ -136,18 +136,18 @@ const App = () => {
           }
         />
         <Route
-          path='/support-messaging/:project'
+          path='/support/:project'
           element={
             <Protected>
-              <SupportMessaging />
+              <Support />
             </Protected>
           }
         />
         <Route
-          path='/support-messaging/:project/:id'
+          path='/support/:project/:id'
           element={
             <Protected>
-              <SupportMessaging />
+              <Support />
             </Protected>
           }
         />

src/components/Sidebar/index.tsx

@@ -56,8 +56,7 @@ const Sidebar = () => {
     },
     onCompleted({ getAllProjectsByClientId }) {
       setProjects(getAllProjectsByClientId);
-    },
+    }
-    fetchPolicy: 'network-only',
   });
 
   const [getProjects] = useLazyQuery<
@@ -66,8 +65,7 @@ const Sidebar = () => {
   >(GET_ALL_PROJECTS, {
     onCompleted({ getAllProjects }) {
       setProjects(getAllProjects);
-    },
+    }
-    fetchPolicy: 'network-only',
   });
 
   const [getTemplates] = useLazyQuery<
@@ -77,7 +75,6 @@ const Sidebar = () => {
     onCompleted({ getAllTemplates }) {
       setTemplates(getAllTemplates);
     },
-    fetchPolicy: 'network-only',
   });
 
   const [getFeatures] = useLazyQuery<
@@ -87,7 +84,6 @@ const Sidebar = () => {
     onCompleted({ getAllFeatures }) {
       setFeatures(getAllFeatures);
     },
-    fetchPolicy: 'network-only',
   });
 
   const [getCategories] = useLazyQuery<
@@ -97,7 +93,6 @@ const Sidebar = () => {
     onCompleted({ getAllCategories }) {
       setCategories(getAllCategories);
     },
-    fetchPolicy: 'network-only',
   });
 
   useEffect(() => {
@@ -123,8 +118,6 @@ const Sidebar = () => {
       setFeatures([]);
       setCategories([]);
     };
-
-    // eslint-disable-next-line
   }, [location.pathname]);
 
   return (
@@ -133,14 +126,15 @@ const Sidebar = () => {
         <>
           <Box display='flex' flexDirection='column'>
             {projects &&
-              projects.map((project) => (
+            new RegExp(/project/, 'i').test(location.pathname) &&
+              projects.map((project, index) => (
                 <Box marginBottom='20px' key={project.id}>
                   <div id={`project-${project.id}`}>
                     <SidebarItem
                       color={role}
-                      selected={new RegExp(project.id, 'i').test(
+                      selected={
-                        location.pathname
+                        new RegExp(project.id, 'i').test(location.pathname) ||
-                      )}
+                        (index === 0 && location.pathname === '/project')}
                       text={project.name[0]}
                       onClick={() => navigate(`/project/${project.id}`)}
                     />
@@ -152,6 +146,7 @@ const Sidebar = () => {
                 </Box>
               ))}
             {templates &&
+            new RegExp(/template/, 'i').test(location.pathname) &&
               templates.map((template, index) => (
                 <Box marginBottom='20px' key={template.id}>
                   <div id={`template-${template.id}`}>
@@ -172,6 +167,7 @@ const Sidebar = () => {
                 </Box>
               ))}
             {features &&
+            new RegExp(/feature/, 'i').test(location.pathname) &&
               features.map((feature, index) => (
                 <Box marginBottom='20px' key={feature.id}>
                   <div id={`feature-${feature.id}`}>
@@ -192,6 +188,7 @@ const Sidebar = () => {
                 </Box>
               ))}
             {categories &&
+            new RegExp(/category/, 'i').test(location.pathname) &&
               categories.map((category, index) => (
                 <Box marginBottom='20px' key={category.id}>
                   <div id={`category-${category.id}`}>

src/pages/AddCategory/index.tsx

@@ -66,7 +66,14 @@ const AddCategory = () => {
     },
   });
 
-  return role === 'developer' ? (
+  if (role !== 'developer') return (
+    <>
+      {role === 'admin' && <Navigate to='/clients' />}
+      {['client', 'productOwer'].includes(role as string) && <Navigate to='/project' />}
+    </>
+  )
+
+  return (
     <Wrapper>
       <Box>
         <Button
@@ -188,12 +195,6 @@ const AddCategory = () => {
         </Box>
       </Box>
     </Wrapper>
-  ) : (
-    <>
-      {role === 'admin' && <Navigate to='/clients' />}
-      {role === 'client' ||
-        (role === 'productOwner' && <Navigate to='/project' />)}
-    </>
   );
 };
 

src/pages/AddFeature/index.tsx

@@ -86,7 +86,6 @@ const AddFeature = () => {
       imageName: Yup.string().required('Image is required'),
       imageSource: Yup.string().required('Image is required'),
       featureType: Yup.string().required('Feature Type is required'),
-      // prettier-ignore
       price: Yup.number().typeError('Price must be a number').required('Price is required'),
       repo: Yup.string().required('Repo is required'),
     }),
@@ -122,7 +121,14 @@ const AddFeature = () => {
     },
   });
 
-  return role === 'developer' ? (
+  if (role !== 'developer') return (
+    <>
+      {role === 'admin' && <Navigate to='/clients' />}
+      {['client', 'productOwer'].includes(role as string) && <Navigate to='/project' />}
+    </>
+  )
+
+  return (
     <Wrapper>
       <Box>
         <Button
@@ -477,12 +483,6 @@ const AddFeature = () => {
         </Box>
       </Box>
     </Wrapper>
-  ) : (
-    <>
-      {role === 'admin' && <Navigate to='/clients' />}
-      {role === 'client' ||
-        (role === 'productOwner' && <Navigate to='/project' />)}
-    </>
   );
 };
 

src/pages/AddProject/index.tsx

@@ -153,8 +153,7 @@ const AddProject = () => {
   >(GET_ALL_CATEGORIES, {
     onCompleted({ getAllCategories }) {
       setCategories(getAllCategories);
-    },
+    }
-    fetchPolicy: 'network-only',
   });
 
   const [getTemplates, { loading: templatesLoading }] = useLazyQuery<
@@ -163,8 +162,7 @@ const AddProject = () => {
   >(GET_ALL_TEMPLATES_BY_CATEGORIES_ID, {
     onCompleted({ getAllTemplatesByCategoriesId }) {
       setTemplates(getAllTemplatesByCategoriesId);
-    },
+    }
-    fetchPolicy: 'network-only',
   });
 
   const [getFeatures, { loading: featuresLoading }] = useLazyQuery<
@@ -173,8 +171,7 @@ const AddProject = () => {
   >(GET_ALL_FEATURES, {
     onCompleted({ getAllFeatures }) {
       setFeatures(getAllFeatures);
-    },
+    }
-    fetchPolicy: 'network-only',
   });
 
   const [getDevelopers, { loading: developersLoading }] = useLazyQuery<
@@ -183,8 +180,7 @@ const AddProject = () => {
   >(GET_ALL_USERS, {
     onCompleted({ getAllUsers }) {
       setDevelopers(getAllUsers.filter((user) => user.role === 'Developer'));
-    },
+    }
-    fetchPolicy: 'network-only',
   });
 
   const [createUser, { loading: createUserLoading }] = useMutation<
@@ -248,8 +244,6 @@ const AddProject = () => {
     if (step === 'features') getFeatures();
     if (step === 'client-creation') getCountryCodes();
     if (step === 'project-metadata') getDevelopers();
-
-    // eslint-disable-next-line
   }, [step]);
 
   const basicInfoForm = useFormik({
@@ -512,7 +506,6 @@ const AddProject = () => {
     validationSchema: Yup.object().shape({
       summary: Yup.string().required('Summary is required'),
       purpose: Yup.string().required('Purpose is required'),
-      // prettier-ignore
       months: Yup.number().typeError('Months must be a number').required('Months is required'),
     }),
     onSubmit: ({

src/pages/AddTemplate/index.tsx

@@ -22,7 +22,7 @@ import {
   FeatureCard,
 } from '../../components';
 import { Wrapper } from './styles';
-import { ArrowLeft, General, Specification, Features } from '../../assets';
+import { ArrowLeft, General, Specification, Features, Empty } from '../../assets';
 import {
   AddTemplateMutation,
   AddTemplateMutationVariables,
@@ -85,14 +85,14 @@ const AddTemplate = () => {
   >('general');
   const [error, setError] = useState<string>('');
 
-  const { data: categories, loading: categoriesLoading } = useQuery<
+  const { data: categories, loading: categoriesLoading, error: categoriesError } = useQuery<
     GetAllCategoriesQuery,
     GetAllCategoriesQueryVariables
   >(GET_ALL_CATEGORIES, {
     fetchPolicy: 'network-only',
   });
 
-  const [getFeatures, { loading: featuresLoading }] = useLazyQuery<
+  const [getFeatures, { loading: featuresLoading, error: featuresError }] = useLazyQuery<
     GetAllFeaturesQuery,
     GetAllFeaturesQueryVariables
   >(GET_ALL_FEATURES, {
@@ -267,7 +267,34 @@ const AddTemplate = () => {
     },
   });
 
-  return role === 'productOwner' ? (
+  if (role !== 'productOwner') return (
+    <>
+      {role === 'admin' && <Navigate to='/clients' />}
+      {['client', 'developer'].includes(role as string) && <Navigate to='/project' />}
+    </>
+  );
+
+  if (categoriesLoading || featuresLoading) return (
+    <Spinner fullScreen color={role || 'client'} />
+  );
+
+  if (categoriesError || featuresError || !availableFeatures || !categories) return (
+    <Wrapper color={role}>
+      <Box
+        width='100%'
+        height='100vh'
+        display='grid'
+        alignItems='center'
+        justifyContent='center'
+      >
+        <Box>
+          <Empty />
+        </Box>
+      </Box>
+    </Wrapper>
+  );
+
+  return (
     <Wrapper>
       <Box>
         <Button
@@ -733,8 +760,6 @@ const AddTemplate = () => {
             </>
           )}
           {selectedSection === 'features' && (
-            <>
-              {!featuresLoading ? (
             <>
               <Box
                 display='grid'
@@ -801,22 +826,10 @@ const AddTemplate = () => {
                 </Box>
               </form>
             </>
-              ) : (
-                <Box display='grid' alignItems='center' justifyContent='center'>
-                  <Spinner color={role || 'client'} />
-                </Box>
-              )}
-            </>
           )}
         </Box>
       </Box>
     </Wrapper>
-  ) : (
-    <>
-      {role === 'admin' && <Navigate to='/clients' />}
-      {role === 'client' ||
-        (role === 'developer' && <Navigate to='/project' />)}
-    </>
   );
 };
 

src/pages/Category/index.tsx

@@ -23,24 +23,22 @@ const Category = () => {
   const { id } = useParams<{ id: string }>();
   const [category, setCategory] = useState<CategoryOutput>();
 
-  const [getCategories, { loading: categoriesLoading }] = useLazyQuery<
+  const [getCategories, { loading: categoriesLoading, error: categoriesError }] = useLazyQuery<
     GetAllCategoriesQuery,
     GetAllCategoriesQueryVariables
   >(GET_ALL_CATEGORIES, {
     onCompleted({ getAllCategories }) {
       setCategory(getAllCategories[0]);
-    },
+    }
-    fetchPolicy: 'network-only',
   });
 
-  const [getCategory, { loading: categoryLoading }] = useLazyQuery<
+  const [getCategory, { loading: categoryLoading, error: categoryError }] = useLazyQuery<
     GetCategoryByIdQuery,
     GetCategoryByIdQueryVariables
   >(GET_CATEGORY_BY_ID, {
     onCompleted({ getCategoryById }) {
       setCategory(getCategoryById);
-    },
+    }
-    fetchPolicy: 'network-only',
   });
 
   useEffect(() => {
@@ -49,15 +47,36 @@ const Category = () => {
     } else {
       getCategories();
     }
-
-    // eslint-disable-next-line
   }, [id]);
 
-  return role === 'developer' ? (
+  if (role !== 'developer') return (
     <>
-      {!categoriesLoading && !categoryLoading ? (
+      {role === 'admin' && <Navigate to='/clients' />}
-        <>
+      {['client', 'productOwer'].includes(role as string) && <Navigate to='/project' />}
-          {category ? (
+    </>
+  )
+
+  if (categoriesLoading || categoryLoading) return (
+    <Spinner fullScreen color={role || 'client'} />
+  );
+
+  if (categoriesError || categoryError || !category) return (
+    <Wrapper color={role}>
+      <Box
+        width='100%'
+        height='100vh'
+        display='grid'
+        alignItems='center'
+        justifyContent='center'
+      >
+        <Box>
+          <Empty />
+        </Box>
+      </Box>
+    </Wrapper>
+  );
+
+  return (
     <Wrapper>
       <Box padding='35px 45px 0px 120px'>
         <Box
@@ -87,32 +106,6 @@ const Category = () => {
         </Box>
       </Box>
     </Wrapper>
-          ) : (
-            <Wrapper color={role}>
-              <Box
-                width='100%'
-                height='100vh'
-                display='grid'
-                alignItems='center'
-                justifyContent='center'
-              >
-                <Box>
-                  <Empty />
-                </Box>
-              </Box>
-            </Wrapper>
-          )}
-        </>
-      ) : (
-        <Spinner fullScreen color={role || 'client'} />
-      )}
-    </>
-  ) : (
-    <>
-      {role === 'admin' && <Navigate to='/clients' />}
-      {role === 'client' ||
-        (role === 'productOwner' && <Navigate to='/project' />)}
-    </>
   );
 };
 

src/pages/CategorySettings/index.tsx

@@ -16,7 +16,7 @@ import {
   Modal,
 } from '../../components';
 import { Wrapper } from './styles';
-import { ArrowLeft, General } from '../../assets';
+import { ArrowLeft, Empty, General } from '../../assets';
 import {
   CategoryOutput,
   DeleteCategoryMutation,
@@ -44,14 +44,13 @@ const CategorySettings = () => {
   const [deleteCategoryModal, setDeleteCategoryModal] =
     useState<boolean>(false);
 
-  const [getCategory, { loading: categoryLoading }] = useLazyQuery<
+  const [getCategory, { loading: categoryLoading, error: categoryError }] = useLazyQuery<
     GetCategoryByIdQuery,
     GetCategoryByIdQueryVariables
   >(GET_CATEGORY_BY_ID, {
     onCompleted({ getCategoryById }) {
       setCategory(getCategoryById);
-    },
+    }
-    fetchPolicy: 'network-only',
   });
 
   const [updateCategory, { loading }] = useMutation<
@@ -84,8 +83,6 @@ const CategorySettings = () => {
 
   useEffect(() => {
     getCategory({ variables: { id: id as string } });
-
-    // eslint-disable-next-line
   }, [id]);
 
   const form = useFormik({
@@ -116,7 +113,34 @@ const CategorySettings = () => {
     enableReinitialize: true,
   });
 
-  return role === 'developer' ? (
+  if (role !== 'developer') return (
+    <>
+      {role === 'admin' && <Navigate to='/clients' />}
+      {['client', 'productOwer'].includes(role as string) && <Navigate to='/project' />}
+    </>
+  )
+
+  if (categoryLoading) return (
+    <Spinner fullScreen color={role || 'client'} />
+  );
+
+  if (categoryError || !category) return (
+    <Wrapper color={role}>
+      <Box
+        width='100%'
+        height='100vh'
+        display='grid'
+        alignItems='center'
+        justifyContent='center'
+      >
+        <Box>
+          <Empty />
+        </Box>
+      </Box>
+    </Wrapper>
+  );
+
+  return (
     <Wrapper>
       {deleteCategoryModal && (
         <Modal
@@ -176,7 +200,6 @@ const CategorySettings = () => {
               <Alert color='success' text='Category updated successfully' />
             )}
           </Box>
-          {!categoryLoading ? (
             <form onSubmit={form.handleSubmit}>
               <Box
                 display='grid'
@@ -262,20 +285,9 @@ const CategorySettings = () => {
                 </Box>
               </Box>
             </form>
-          ) : (
-            <Box display='grid' alignItems='center' justifyContent='center'>
-              <Spinner color={role || 'client'} />
-            </Box>
-          )}
         </Box>
       </Box>
     </Wrapper>
-  ) : (
-    <>
-      {role === 'admin' && <Navigate to='/clients' />}
-      {role === 'client' ||
-        (role === 'productOwner' && <Navigate to='/project' />)}
-    </>
   );
 };
 

src/pages/CreateUser/index.tsx

@@ -172,7 +172,11 @@ const CreateUser = () => {
     },
   });
 
-  return role === 'admin' ? (
+  if (role !== 'admin') return (
+    <Navigate to='/' />
+  )
+
+  return (
     <Wrapper>
       <Box>
         <Button
@@ -470,8 +474,6 @@ const CreateUser = () => {
         </Box>
       </Box>
     </Wrapper>
-  ) : (
-    <Navigate to='/' />
   );
 };
 

src/pages/Feature/index.tsx

@@ -28,24 +28,22 @@ const Feature = () => {
   const { id } = useParams<{ id: string }>();
   const [feature, setFeature] = useState<FeatureOutput>();
 
-  const [getFeatures, { loading: featuresLoading }] = useLazyQuery<
+  const [getFeatures, { loading: featuresLoading, error: featuresError }] = useLazyQuery<
     GetAllFeaturesQuery,
     GetAllFeaturesQueryVariables
   >(GET_ALL_FEATURES, {
     onCompleted({ getAllFeatures }) {
       setFeature(getAllFeatures[0]);
-    },
+    }
-    fetchPolicy: 'network-only',
   });
 
-  const [getFeature, { loading: featureLoading }] = useLazyQuery<
+  const [getFeature, { loading: featureLoading, error: featureError }] = useLazyQuery<
     GetFeatureByIdQuery,
     GetFeatureByIdQueryVariables
   >(GET_FEATURE_BY_ID, {
     onCompleted({ getFeatureById }) {
       setFeature(getFeatureById);
-    },
+    }
-    fetchPolicy: 'network-only',
   });
 
   useEffect(() => {
@@ -54,15 +52,36 @@ const Feature = () => {
     } else {
       getFeatures();
     }
-
-    // eslint-disable-next-line
   }, [id]);
 
-  return role === 'developer' ? (
+  if (role !== 'developer') return (
     <>
-      {!featuresLoading && !featureLoading ? (
+      {role === 'admin' && <Navigate to='/clients' />}
-        <>
+      {['client', 'productOwer'].includes(role as string) && <Navigate to='/project' />}
-          {feature ? (
+    </>
+  );
+
+  if (featureLoading || featureLoading) return (
+    <Spinner fullScreen color={role || 'client'} />
+  );
+
+  if (featuresError || featureError || !feature) return (
+    <Wrapper color={role}>
+      <Box
+        width='100%'
+        height='100vh'
+        display='grid'
+        alignItems='center'
+        justifyContent='center'
+      >
+        <Box>
+          <Empty />
+        </Box>
+      </Box>
+    </Wrapper>
+  );
+
+  return (
     <Wrapper>
       <Box padding='35px 45px 0px 120px'>
         <Box
@@ -154,32 +173,6 @@ const Feature = () => {
         </Box>
       </Box>
     </Wrapper>
-          ) : (
-            <Wrapper color={role}>
-              <Box
-                width='100%'
-                height='100vh'
-                display='grid'
-                alignItems='center'
-                justifyContent='center'
-              >
-                <Box>
-                  <Empty />
-                </Box>
-              </Box>
-            </Wrapper>
-          )}
-        </>
-      ) : (
-        <Spinner fullScreen color={role || 'client'} />
-      )}
-    </>
-  ) : (
-    <>
-      {role === 'admin' && <Navigate to='/clients' />}
-      {role === 'client' ||
-        (role === 'productOwner' && <Navigate to='/project' />)}
-    </>
   );
 };
 

src/pages/FeatureSettings/index.tsx

@@ -18,7 +18,7 @@ import {
   ImagePreview,
 } from '../../components';
 import { Wrapper } from './styles';
-import { ArrowLeft, Design, General } from '../../assets';
+import { ArrowLeft, Design, Empty, General } from '../../assets';
 import {
   DeleteFeatureMutation,
   DeleteFeatureMutationVariables,
@@ -59,14 +59,13 @@ const FeatureSettings = () => {
 
   const [deleteFeatureModal, setDeleteFeatureModal] = useState<boolean>(false);
 
-  const [getFeature, { loading: featureLoading }] = useLazyQuery<
+  const [getFeature, { loading: featureLoading, error: featureError }] = useLazyQuery<
     GetFeatureByIdQuery,
     GetFeatureByIdQueryVariables
   >(GET_FEATURE_BY_ID, {
     onCompleted({ getFeatureById }) {
       setFeature(getFeatureById);
-    },
+    }
-    fetchPolicy: 'network-only',
   });
 
   const [updateFeature, { loading }] = useMutation<
@@ -99,8 +98,6 @@ const FeatureSettings = () => {
 
   useEffect(() => {
     getFeature({ variables: { id: id as string } });
-
-    // eslint-disable-next-line
   }, [id]);
 
   const generalForm = useFormik({
@@ -178,7 +175,34 @@ const FeatureSettings = () => {
     enableReinitialize: true,
   });
 
-  return role === 'developer' ? (
+  if (role !== 'developer') return (
+    <>
+      {role === 'admin' && <Navigate to='/clients' />}
+      {['client', 'productOwer'].includes(role as string) && <Navigate to='/project' />}
+    </>
+  )
+
+  if (featureLoading || featureLoading) return (
+    <Spinner fullScreen color={role || 'client'} />
+  );
+
+  if (featureError || !feature) return (
+    <Wrapper color={role}>
+      <Box
+        width='100%'
+        height='100vh'
+        display='grid'
+        alignItems='center'
+        justifyContent='center'
+      >
+        <Box>
+          <Empty />
+        </Box>
+      </Box>
+    </Wrapper>
+  );
+
+  return (
     <Wrapper>
       <Box>
         <Button
@@ -237,8 +261,6 @@ const FeatureSettings = () => {
             )}
           </Box>
           {selectedSection === 'general' && (
-            <>
-              {!featureLoading ? (
             <>
               {deleteFeatureModal && (
                 <Modal
@@ -489,12 +511,6 @@ const FeatureSettings = () => {
                 </Box>
               </form>
             </>
-              ) : (
-                <Box display='grid' alignItems='center' justifyContent='center'>
-                  <Spinner color={role || 'client'} />
-                </Box>
-              )}
-            </>
           )}
           {selectedSection === 'wireframes' && (
             <form onSubmit={wireframesForm.handleSubmit}>
@@ -564,12 +580,6 @@ const FeatureSettings = () => {
         </Box>
       </Box>
     </Wrapper>
-  ) : (
-    <>
-      {role === 'admin' && <Navigate to='/clients' />}
-      {role === 'client' ||
-        (role === 'productOwner' && <Navigate to='/project' />)}
-    </>
   );
 };
 

src/pages/FeatureSettings/styles.ts

@@ -5,6 +5,7 @@ export const Wrapper = styled.div`
 
   .feature-type {
     background: ${({ theme }) => theme.colors.gray.dark};
+    background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
   }

src/pages/Project/index.tsx

@@ -44,10 +44,7 @@ import {
   GetAllUsersQueryVariables,
   GetProjectByIdQuery,
   GetProjectByIdQueryVariables,
-  GetPrototypeByIdQuery,
-  GetPrototypeByIdQueryVariables,
   ProjectOutput,
-  ProtoTypeOutput,
 } from '../../graphql/types';
 import {
   ADD_PROJECT_DESIGN,
@@ -58,7 +55,6 @@ import {
   GET_ALL_PROJECTS_BY_CLIENT_ID,
   GET_PROJECT_BY_ID,
 } from '../../graphql/project.api';
-import { GET_PROTOTYPE_BY_ID } from '../../graphql/prototype.api';
 
 type Transaction = {
   amount: number;
@@ -84,14 +80,13 @@ const Project = () => {
   const printRef = useRef<HTMLDivElement>(null);
   const { id } = useParams<{ id: string }>();
   const [project, setProject] = useState<ProjectOutput>();
-  const [prototype, setPrototype] = useState<Array<ProtoTypeOutput>>();
   const [error, setError] = useState<string>('');
   const [designModal, setDesignModal] = useState<boolean>(false);
   const [mvpModal, setMvpModal] = useState<boolean>(false);
   const [fullBuildModal, setFullBuildModal] = useState<boolean>(false);
   const [transactionsData, setTransactionsData] = useState<TransactionData>();
 
-  const [getProjectsByClientId, { loading: clientProjectsLoading }] =
+  const [getProjectsByClientId, { loading: clientProjectsLoading, error: clientProjectsError }] =
     useLazyQuery<
       GetAllProjectsByClientIdQuery,
       GetAllProjectsByClientIdQueryVariables
@@ -101,39 +96,27 @@ const Project = () => {
       },
       onCompleted({ getAllProjectsByClientId }) {
         if (getAllProjectsByClientId.length > 0)
-          navigate(`/project/${getAllProjectsByClientId[0].id}`);
+        setProject(getAllProjectsByClientId[0]);
       },
-      fetchPolicy: 'network-only',
     });
 
-  const [getProjects, { loading: projectsLoading }] = useLazyQuery<
+  const [getProjects, { loading: projectsLoading, error: projectsError }] = useLazyQuery<
     GetAllProjectsQuery,
     GetAllUsersQueryVariables
   >(GET_ALL_PROJECTS, {
     onCompleted({ getAllProjects }) {
       if (getAllProjects.length > 0)
-        navigate(`/project/${getAllProjects[0].id}`);
+        setProject(getAllProjects[0]);
-    },
+    }
-    fetchPolicy: 'network-only',
   });
 
-  const [getProject, { loading: projectLoading }] = useLazyQuery<
+  const [getProject, { loading: projectLoading, error: projectError }] = useLazyQuery<
     GetProjectByIdQuery,
     GetProjectByIdQueryVariables
   >(GET_PROJECT_BY_ID, {
     onCompleted({ getProjectById }) {
       setProject(getProjectById);
-    },
+    }
-    fetchPolicy: 'network-only',
-  });
-
-  const [getPrototype, { loading: prototypeLoading }] = useLazyQuery<
-    GetPrototypeByIdQuery,
-    GetPrototypeByIdQueryVariables
-  >(GET_PROTOTYPE_BY_ID, {
-    onCompleted({ getPrototypeById }) {
-      setPrototype(getPrototypeById.prototype);
-    },
   });
 
   const [changeProjectState] = useMutation<
@@ -194,10 +177,6 @@ const Project = () => {
     },
   });
 
-  const handlePrint = useReactToPrint({
-    content: () => printRef.current,
-  });
-
   useEffect(() => {
     if (id) {
       getProject({ variables: { id } });
@@ -212,15 +191,11 @@ const Project = () => {
     return () => {
       setProject(undefined);
     };
-
-    // eslint-disable-next-line
   }, [id, role]);
 
   useEffect(() => {
     (async () => {
       if (project) {
-        getPrototype({ variables: { id: project?.template?.id } });
-
         try {
           const transactionsResult = await (
             await fetch(`${import.meta.env.VITE_PAYMENT_API}/transactions`, {
@@ -239,13 +214,14 @@ const Project = () => {
     })();
 
     return () => {
-      setPrototype(undefined);
       setTransactionsData(undefined);
     };
-
-    // eslint-disable-next-line
   }, [project]);
 
+  const handlePrint = useReactToPrint({
+    content: () => printRef.current,
+  });
+
   const addDesignForm = useFormik({
     initialValues: {
       fileName: '',
@@ -301,12 +277,31 @@ const Project = () => {
     },
   });
 
-  return role !== 'admin' ? (
+  if (role === 'admin') return (
-    <>
+    <Navigate to='/clients' />
-      {!projectsLoading &&
+  );
-      !clientProjectsLoading &&
+
-      !projectLoading &&
+  if (clientProjectsLoading || projectsLoading || projectLoading) return (
-      !prototypeLoading ? (
+    <Spinner fullScreen color={role || 'client'} />
+  );
+
+  if (clientProjectsError || projectsError || projectError || !project) return (
+    <Wrapper color={role}>
+      <Box
+        width='100%'
+        height='100vh'
+        display='grid'
+        alignItems='center'
+        justifyContent='center'
+      >
+        <Box>
+          <Empty />
+        </Box>
+      </Box>
+    </Wrapper>
+  );
+
+  return (
     <>
       {designModal && (
         <Modal
@@ -426,7 +421,6 @@ const Project = () => {
           />
         </Modal>
       )}
-          {project ? (
       <Wrapper>
         <Box padding='35px 45px 0px 120px'>
           <Box
@@ -458,7 +452,7 @@ const Project = () => {
                     variant='primary-action'
                     text='Prototype'
                     iconLeft={<Design />}
-                          disabled={!prototype}
+                    disabled={!project.template.id}
                     onClick={() =>
                       navigate(`/prototype/${project.template.id}`)
                     }
@@ -879,28 +873,7 @@ const Project = () => {
             )}
         </Box>
       </Wrapper>
-          ) : (
-            <Wrapper color={role}>
-              <Box
-                width='100%'
-                height='100vh'
-                display='grid'
-                alignItems='center'
-                justifyContent='center'
-              >
-                <Box>
-                  <Empty />
-                </Box>
-              </Box>
-            </Wrapper>
-          )}
     </>
-      ) : (
-        <Spinner fullScreen color={role || 'client'} />
-      )}
-    </>
-  ) : (
-    <Navigate to='/clients' />
   );
 };
 

src/pages/Prototype/index.tsx

@@ -6,12 +6,7 @@ import ReactFlow, {
   ControlButton,
   Connection,
   Edge,
-  Node,
   MarkerType,
-  applyNodeChanges,
-  applyEdgeChanges,
-  NodeChange,
-  EdgeChange,
   useEdgesState,
   useNodesState
 } from 'reactflow';
@@ -65,17 +60,16 @@ const Prototype = () => {
   const [success, setSuccess] = useState<boolean>(false);
   const diagramParentRef = useRef<HTMLDivElement>(null);
 
-  const [getTemplate, { loading: templateLoading }] = useLazyQuery<
+  const [getTemplate, { loading: templateLoading, error: templateError }] = useLazyQuery<
     GetTemplateByIdQuery,
     GetTemplateByIdQueryVariables
   >(GET_TEMPLATE_BY_ID, {
     onCompleted({ getTemplateById }) {
       setTemplate(getTemplateById);
     },
-    fetchPolicy: 'network-only',
   });
 
-  const [getPrototype, { loading: prototypeLoading }] = useLazyQuery<
+  const [getPrototype, { loading: prototypeLoading, error: prototypeError }] = useLazyQuery<
     GetPrototypeByIdQuery,
     GetPrototypeByIdQueryVariables
   >(GET_PROTOTYPE_BY_ID, {
@@ -197,13 +191,31 @@ const Prototype = () => {
     }
   };
 
-  return role === 'productOwner' ||
+  if (role === 'admin') return (
-    role === 'developer' ||
+    <Navigate to='/clients' />
-    role === 'client' ? (
+  )
-    <>
+
-      {!templateLoading && !prototypeLoading ? (
+  if (templateLoading || prototypeLoading) return (
-        <>
+    <Spinner fullScreen color={role || 'client'} />
-          {template ? (
+  );
+
+  if (templateError || prototypeError || !template || !prototype) return (
+    <Wrapper color={role}>
+      <Box
+        width='100%'
+        height='100vh'
+        display='grid'
+        alignItems='center'
+        justifyContent='center'
+      >
+        <Box>
+          <Empty />
+        </Box>
+      </Box>
+    </Wrapper>
+  );
+
+  return (
     <Wrapper color={role}>
       <Box padding='35px 45px 0px 120px'>
         <Box
@@ -327,28 +339,6 @@ const Prototype = () => {
         )}
       </Box>
     </Wrapper>
-          ) : (
-            <Wrapper color={role}>
-              <Box
-                width='100%'
-                height='100vh'
-                display='grid'
-                alignItems='center'
-                justifyContent='center'
-              >
-                <Box>
-                  <Empty />
-                </Box>
-              </Box>
-            </Wrapper>
-          )}
-        </>
-      ) : (
-        <Spinner fullScreen color={role || 'client'} />
-      )}
-    </>
-  ) : (
-    <>{role === 'admin' && <Navigate to='/clients' />}</>
   );
 };
 

src/pages/Support/index.tsx

@@ -31,7 +31,7 @@ import {
 import { theme } from '../../themes';
 import { clientSupport } from '../..';
 
-const SupportMessaging = () => {
+const Support = () => {
   const { project, id } = useParams<{ id: string; project: string }>();
   const role = useReactiveVar(roleVar);
   const currentUser = useReactiveVar(userVar);
@@ -97,8 +97,6 @@ const SupportMessaging = () => {
         });
       }
     })();
-
-    // eslint-disable-next-line
   }, [id]);
 
   const createThreadForm = useFormik({
@@ -123,7 +121,7 @@ const SupportMessaging = () => {
         },
       });
       navigate(
-        `/support-messaging/${project}/${createdThread.data?.createThread}`
+        `/support/${project}/${createdThread.data?.createThread}`
       );
     },
   });
@@ -338,4 +336,4 @@ const SupportMessaging = () => {
   );
 };
 
-export default SupportMessaging;
+export default Support;

src/pages/Template/index.tsx

@@ -22,11 +22,8 @@ import {
   GetAllTemplatesQueryVariables,
   GetCategoryByIdQuery,
   GetCategoryByIdQueryVariables,
-  GetPrototypeByIdQuery,
-  GetPrototypeByIdQueryVariables,
   GetTemplateByIdQuery,
   GetTemplateByIdQueryVariables,
-  ProtoTypeOutput,
   TemplateOutput,
 } from '../../graphql/types';
 import {
@@ -34,7 +31,6 @@ import {
   GET_TEMPLATE_BY_ID,
 } from '../../graphql/template.api';
 import { GET_CATEGORY_BY_ID } from '../../graphql/category.api';
-import { GET_PROTOTYPE_BY_ID } from '../../graphql/prototype.api';
 
 const Template = () => {
   const role = useReactiveVar(roleVar);
@@ -43,78 +39,83 @@ const Template = () => {
   const { id } = useParams<{ id: string }>();
   const [template, setTemplate] = useState<TemplateOutput>();
   const [category, setCategory] = useState<CategoryOutput>();
-  const [prototype, setPrototype] = useState<Array<ProtoTypeOutput>>();
 
-  const [getCategory, { loading: categoryLoading }] = useLazyQuery<
+  const [getCategory, { loading: categoryLoading, error: categoryError }] = useLazyQuery<
     GetCategoryByIdQuery,
     GetCategoryByIdQueryVariables
   >(GET_CATEGORY_BY_ID, {
     onCompleted({ getCategoryById }) {
       setCategory(getCategoryById);
-    },
+    }
-    fetchPolicy: 'network-only',
   });
 
-  const [getTemplates, { loading: templatesLoading }] = useLazyQuery<
+  const [getTemplates, { loading: templatesLoading, error: templatesError }] = useLazyQuery<
     GetAllTemplatesQuery,
     GetAllTemplatesQueryVariables
   >(GET_ALL_TEMPLATES, {
     onCompleted({ getAllTemplates }) {
-      if (getAllTemplates.length > 0)
+      if (getAllTemplates.length > 0) {
-        navigate(`/template/${getAllTemplates[0].id}`);
+        setTemplate(getAllTemplates[0]);
-    },
+        getCategory({ variables: { id: getAllTemplates[0]?.category! } });
-    fetchPolicy: 'network-only',
+      }
+    }
   });
 
-  const [getTemplate, { loading: templateLoading }] = useLazyQuery<
+  const [getTemplate, { loading: templateLoading, error: templateError }] = useLazyQuery<
     GetTemplateByIdQuery,
     GetTemplateByIdQueryVariables
   >(GET_TEMPLATE_BY_ID, {
     onCompleted({ getTemplateById }) {
       setTemplate(getTemplateById);
-      getCategory({ variables: { id: template?.category! } });
+      getCategory({ variables: { id: getTemplateById?.category! } });
-    },
+    }
-    fetchPolicy: 'network-only',
-  });
-
-  const [getPrototype, { loading: prototypeLoading }] = useLazyQuery<
-    GetPrototypeByIdQuery,
-    GetPrototypeByIdQueryVariables
-  >(GET_PROTOTYPE_BY_ID, {
-    onCompleted({ getPrototypeById }) {
-      if (getPrototypeById) setPrototype(getPrototypeById.prototype);
-    },
-    fetchPolicy: 'network-only',
-  });
-
-  const handlePrint = useReactToPrint({
-    content: () => printRef.current,
   });
 
   useEffect(() => {
     if (id) {
       getTemplate({ variables: { id } });
-      getPrototype({ variables: { id } });
     } else {
       getTemplates();
     }
 
     return () => {
       setTemplate(undefined);
-      setPrototype(undefined);
+      setCategory(undefined);
     };
-
-    // eslint-disable-next-line
   }, [id]);
 
-  return role === 'productOwner' || role === 'developer' ? (
+  const handlePrint = useReactToPrint({
+    content: () => printRef.current,
+  });
+
+  if (role !== 'productOwner' && role !== 'developer') return (
     <>
-      {!templatesLoading &&
+      {role === 'admin' && <Navigate to='/clients' />}
-      !templateLoading &&
+      {role === 'client' && <Navigate to='/project' />}
-      !categoryLoading &&
+    </>
-      !prototypeLoading ? (
+  );
-        <>
+
-          {template ? (
+  if (templatesLoading || templateLoading || categoryLoading) return (
+    <Spinner fullScreen color={role || 'client'} />
+  );
+
+  if (templatesError || templateError || categoryError || !template) return (
+    <Wrapper color={role}>
+      <Box
+        width='100%'
+        height='100vh'
+        display='grid'
+        alignItems='center'
+        justifyContent='center'
+      >
+        <Box>
+          <Empty />
+        </Box>
+      </Box>
+    </Wrapper>
+  );
+
+  return (
     <Wrapper>
       <Box padding='35px 45px 0px 120px'>
         <Box
@@ -147,7 +148,7 @@ const Template = () => {
               text='Prototype'
               iconLeft={<Design />}
               disabled={
-                        prototype === undefined && role === 'productOwner'
+                role === 'productOwner'
               }
               onClick={() =>
                 navigate(`/prototype/${id || template.id}`)
@@ -245,31 +246,6 @@ const Template = () => {
         )}
       </Box>
     </Wrapper>
-          ) : (
-            <Wrapper color={role}>
-              <Box
-                width='100%'
-                height='100vh'
-                display='grid'
-                alignItems='center'
-                justifyContent='center'
-              >
-                <Box>
-                  <Empty />
-                </Box>
-              </Box>
-            </Wrapper>
-          )}
-        </>
-      ) : (
-        <Spinner fullScreen color={role || 'client'} />
-      )}
-    </>
-  ) : (
-    <>
-      {role === 'admin' && <Navigate to='/clients' />}
-      {role === 'client' && <Navigate to='/project' />}
-    </>
   );
 };
 

src/pages/UpdateProject/index.tsx

@@ -14,7 +14,7 @@ import {
   UpdateProjectMutationVariables,
 } from '../../graphql/types';
 import { GET_PROJECT_BY_ID, UPDATE_PROJECT } from '../../graphql/project.api';
-import { ArrowLeft } from '../../assets';
+import { ArrowLeft, Empty } from '../../assets';
 import { theme } from '../../themes';
 
 const UpdateProject = () => {
@@ -24,14 +24,13 @@ const UpdateProject = () => {
   const [project, setProject] = useState<ProjectOutput>();
   const { id } = useParams<{ id: string }>();
 
-  const [getProject, { loading: projectLoading }] = useLazyQuery<
+  const [getProject, { loading: projectLoading, error: projectError }] = useLazyQuery<
     GetProjectByIdQuery,
     GetProjectByIdQueryVariables
   >(GET_PROJECT_BY_ID, {
     onCompleted({ getProjectById }) {
       setProject(getProjectById);
-    },
+    }
-    fetchPolicy: 'network-only',
   });
 
   const [updateProject, { loading: updateProjectLoading }] = useMutation<
@@ -51,8 +50,6 @@ const UpdateProject = () => {
     if (id) {
       getProject({ variables: { id } });
     }
-
-    // eslint-disable-next-line
   }, [id]);
 
   const basicInfoForm = useFormik({
@@ -78,7 +75,27 @@ const UpdateProject = () => {
     enableReinitialize: true,
   });
 
-  return !projectLoading ? (
+  if (projectLoading) return (
+    <Spinner fullScreen color={role || 'client'} />
+  );
+
+  if (projectError || !project) return (
+    <Wrapper color={role}>
+      <Box
+        width='100%'
+        height='100vh'
+        display='grid'
+        alignItems='center'
+        justifyContent='center'
+      >
+        <Box>
+          <Empty />
+        </Box>
+      </Box>
+    </Wrapper>
+  );
+
+  return (
     <Wrapper>
       <Box padding='35px 45px 30px 120px'>
         <Box
@@ -210,8 +227,6 @@ const UpdateProject = () => {
         </Box>
       </Box>
     </Wrapper>
-  ) : (
-    <Spinner fullScreen color={role || 'client'} />
   );
 };
 

src/pages/UserSettings/index.tsx

@@ -15,7 +15,7 @@ import {
   Spinner,
 } from '../../components';
 import { Wrapper } from './styles';
-import { ArrowLeft, Profile, Security } from '../../assets';
+import { ArrowLeft, Empty, Profile, Security } from '../../assets';
 import {
   UpdateUserInfoMutation,
   UpdateUserPasswordMutation,
@@ -39,11 +39,17 @@ const UserSettings = () => {
   const role = useReactiveVar(roleVar);
   const [userToEdit, setUserToEdit] = useState<UserOutput>();
   const { id } = useParams<{ id: string }>();
+  const [selectedSection, setSelectedSection] = useState<
+    'general' | 'security'
+  >('general');
+  const [error, setError] = useState<string>('');
+  const [success, setSuccess] = useState<boolean>(false);
+
   const { data: countryCodes, loading: countryCodesLoading } = useQuery<
     GetCountryCodesQuery,
     GetCountryCodesQueryVariables
   >(GET_COUNTRY_CODES);
-  const { loading: userInfoLoading } = useQuery<
+  const { loading: userInfoLoading, error: userInforError } = useQuery<
     GetUserByIdQuery,
     GetUserByIdQueryVariables
   >(GET_USER_BY_ID, {
@@ -55,12 +61,6 @@ const UserSettings = () => {
     },
   });
 
-  const [selectedSection, setSelectedSection] = useState<
-    'general' | 'security'
-  >('general');
-  const [error, setError] = useState<string>('');
-  const [success, setSuccess] = useState<boolean>(false);
-
   const [updateUserInfo, { loading: generalLoading }] = useMutation<
     UpdateUserInfoMutation,
     UpdateUserInfoMutationVariables
@@ -182,7 +182,27 @@ const UserSettings = () => {
       }),
   });
 
-  return role === 'admin' ? (
+  if (role !== 'admin') return (
+    <Navigate to='/' />
+  )
+
+  if (userInforError || !userToEdit) return (
+    <Wrapper color={role}>
+      <Box
+        width='100%'
+        height='100vh'
+        display='grid'
+        alignItems='center'
+        justifyContent='center'
+      >
+        <Box>
+          <Empty />
+        </Box>
+      </Box>
+    </Wrapper>
+  );
+
+  return (
     <Wrapper>
       <Box>
         <Button
@@ -480,8 +500,6 @@ const UserSettings = () => {
         </Box>
       </Box>
     </Wrapper>
-  ) : (
-    <Navigate to='/' />
   );
 };
 

src/pages/Users/index.tsx

@@ -12,7 +12,7 @@ import {
   Text,
   Modal,
   Input,
-  Alert,
+  Alert
 } from '../../components';
 import { Wrapper } from './styles';
 import {
@@ -34,7 +34,7 @@ const Users = () => {
   const [error, setError] = useState<string>('');
   const [deleteAccountModal, setDeleteAccountModal] = useState<boolean>(false);
 
-  const [getUsers, { loading }] = useLazyQuery<
+  const [getUsers, { loading, error: usersError }] = useLazyQuery<
     GetAllUsersQuery,
     GetAllUsersQueryVariables
   >(GET_ALL_USERS, {
@@ -52,8 +52,6 @@ const Users = () => {
 
   useEffect(() => {
     getUsers();
-
-    // eslint-disable-next-line
   }, [location.pathname]);
 
   const [deleteUser] = useMutation<
@@ -90,9 +88,31 @@ const Users = () => {
     },
   });
 
-  return role === 'admin' ? (
+  if (role !== 'admin') return (
-    <>
+    <Navigate to='/' />
-      {!loading ? (
+  )
+
+  if (loading) return (
+    <Spinner fullScreen color={role || 'client'} />
+  );
+
+  if (usersError || !users) return (
+    <Wrapper color={role}>
+      <Box
+        width='100%'
+        height='100vh'
+        display='grid'
+        alignItems='center'
+        justifyContent='center'
+      >
+        <Box>
+          <Empty />
+        </Box>
+      </Box>
+    </Wrapper>
+  );
+
+  return (
     <>
       {deleteAccountModal && (
         <Modal
@@ -297,12 +317,6 @@ const Users = () => {
         </Wrapper>
       )}
     </>
-      ) : (
-        <Spinner fullScreen color={role || 'client'} />
-      )}
-    </>
-  ) : (
-    <Navigate to='/clients' />
   );
 };
 

src/pages/Users/styles.ts

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 type WrapperProps = {
   color?: 'client' | 'productOwner' | 'developer' | 'admin';
-  empty: boolean;
+  empty?: boolean;
 };
 
 export const Wrapper = styled.div<WrapperProps>`
@@ -11,6 +11,7 @@ export const Wrapper = styled.div<WrapperProps>`
   .table-head {
     p {
       background: ${({ theme }) => theme.colors.gray.dark};
+      background-clip: text;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
     }

src/pages/index.tsx

@@ -21,7 +21,7 @@ import TemplateSettings from './TemplateSettings';
 import AddProject from './AddProject';
 import UpdateProject from './UpdateProject';
 import Payments from './Payments';
-import SupportMessaging from './SupportMessaging';
+import Support from './Support';
 
 export {
   Login,
@@ -47,5 +47,5 @@ export {
   AddProject,
   UpdateProject,
   Payments,
-  SupportMessaging,
+  Support,
 };