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
@@ -734,89 +761,75 @@ const AddTemplate = () => {
           )}
           {selectedSection === 'features' && (
             <>
-              {!featuresLoading ? (
+              <Box
-                <>
+                display='grid'
-                  <Box
+                gridTemplateColumns='auto 1fr'
-                    display='grid'
+                columnGap='1rem'
-                    gridTemplateColumns='auto 1fr'
+                alignItems='center'
-                    columnGap='1rem'
+                marginBottom='50px'
-                    alignItems='center'
+              >
-                    marginBottom='50px'
+                <Text variant='subheader' weight='bold'>
-                  >
+                  Features
-                    <Text variant='subheader' weight='bold'>
+                </Text>
-                      Features
+                {error && <Alert color='error' text={error} />}
-                    </Text>
+              </Box>
-                    {error && <Alert color='error' text={error} />}
+              <form onSubmit={featuresForm.handleSubmit}>
-                  </Box>
+                <Box
-                  <form onSubmit={featuresForm.handleSubmit}>
+                  display='grid'
-                    <Box
+                  gridTemplateColumns='repeat(2, 1fr)'
-                      display='grid'
+                  columnGap='40px'
-                      gridTemplateColumns='repeat(2, 1fr)'
+                  rowGap='45px'
-                      columnGap='40px'
+                  alignItems='stretch'
-                      rowGap='45px'
+                >
-                      alignItems='stretch'
+                  {availableFeatures &&
-                    >
+                    availableFeatures.map((feature) => (
-                      {availableFeatures &&
+                      <FeatureCard
-                        availableFeatures.map((feature) => (
+                        feature={feature}
-                          <FeatureCard
+                        selectable
-                            feature={feature}
+                        selected={featuresForm.values.features.includes(
-                            selectable
+                          feature.id
-                            selected={featuresForm.values.features.includes(
+                        )}
+                        toggleSelect={() => {
+                          if (
+                            !featuresForm.values.features.includes(
                               feature.id
-                            )}
+                            )
-                            toggleSelect={() => {
+                          ) {
-                              if (
+                            featuresForm.setFieldValue('features', [
-                                !featuresForm.values.features.includes(
+                              ...featuresForm.values.features,
-                                  feature.id
+                              feature.id,
-                                )
+                            ]);
-                              ) {
+                          } else {
-                                featuresForm.setFieldValue('features', [
+                            featuresForm.setFieldValue(
-                                  ...featuresForm.values.features,
+                              'features',
-                                  feature.id,
+                              featuresForm.values.features.filter(
-                                ]);
+                                (id) => id !== feature.id
-                              } else {
+                              )
-                                featuresForm.setFieldValue(
+                            );
-                                  'features',
+                          }
-                                  featuresForm.values.features.filter(
+                        }}
-                                    (id) => id !== feature.id
-                                  )
-                                );
-                              }
-                            }}
-                          />
-                        ))}
-                    </Box>
-                    <Box
-                      marginTop='1rem'
-                      display='flex'
-                      justifyContent='flex-end'
-                    >
-                      <Button
-                        variant='primary-action'
-                        color={role || 'client'}
-                        text='Save'
-                        type='submit'
-                        loading={loading}
                       />
-                    </Box>
+                    ))}
-                  </form>
-                </>
-              ) : (
-                <Box display='grid' alignItems='center' justifyContent='center'>
-                  <Spinner color={role || 'client'} />
                 </Box>
-              )}
+                <Box
+                  marginTop='1rem'
+                  display='flex'
+                  justifyContent='flex-end'
+                >
+                  <Button
+                    variant='primary-action'
+                    color={role || 'client'}
+                    text='Save'
+                    type='submit'
+                    loading={loading}
+                  />
+                </Box>
+              </form>
             </>
           )}
         </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,70 +47,65 @@ const Category = () => {
     } else {
       getCategories();
     }
-
-    // eslint-disable-next-line
   }, [id]);
 
-  return role === 'developer' ? (
+  if (role !== 'developer') return (
-    <>
-      {!categoriesLoading && !categoryLoading ? (
-        <>
-          {category ? (
-            <Wrapper>
-              <Box padding='35px 45px 0px 120px'>
-                <Box
-                  display='flex'
-                  flexDirection='row'
-                  alignItems='center'
-                  marginBottom='20px'
-                >
-                  <Box flexGrow='1'>
-                    <Text variant='headline' weight='bold'>
-                      {category.name}
-                    </Text>
-                  </Box>
-                  <Button
-                    color={role || 'client'}
-                    variant='primary-action'
-                    text='Settings'
-                    iconLeft={<Settings />}
-                    onClick={() =>
-                      navigate(`/category-settings/${id || category.id}`)
-                    }
-                  />
-                </Box>
-                <Box>
-                  <Text variant='headline'>Description</Text>
-                  <Text>{category.description}</Text>
-                </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' ||
+      {['client', 'productOwer'].includes(role as string) && <Navigate to='/project' />}
-        (role === 'productOwner' && <Navigate to='/project' />)}
     </>
+  )
+
+  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
+          display='flex'
+          flexDirection='row'
+          alignItems='center'
+          marginBottom='20px'
+        >
+          <Box flexGrow='1'>
+            <Text variant='headline' weight='bold'>
+              {category.name}
+            </Text>
+          </Box>
+          <Button
+            color={role || 'client'}
+            variant='primary-action'
+            text='Settings'
+            iconLeft={<Settings />}
+            onClick={() =>
+              navigate(`/category-settings/${id || category.id}`)
+            }
+          />
+        </Box>
+        <Box>
+          <Text variant='headline'>Description</Text>
+          <Text>{category.description}</Text>
+        </Box>
+      </Box>
+    </Wrapper>
   );
 };
 

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,133 +52,128 @@ const Feature = () => {
     } else {
       getFeatures();
     }
-
-    // eslint-disable-next-line
   }, [id]);
 
-  return role === 'developer' ? (
+  if (role !== 'developer') return (
-    <>
-      {!featuresLoading && !featureLoading ? (
-        <>
-          {feature ? (
-            <Wrapper>
-              <Box padding='35px 45px 0px 120px'>
-                <Box
-                  display='flex'
-                  flexDirection='row'
-                  alignItems='center'
-                  marginBottom='20px'
-                >
-                  <Box flexGrow='1'>
-                    <Text variant='headline' weight='bold'>
-                      {feature.name}
-                    </Text>
-                  </Box>
-                  <Button
-                    color={role || 'client'}
-                    variant='primary-action'
-                    text='Settings'
-                    iconLeft={<Settings />}
-                    onClick={() =>
-                      navigate(`/feature-settings/${id || feature.id}`)
-                    }
-                  />
-                </Box>
-                <Box marginBottom='30px'>
-                  <Text variant='headline' gutterBottom>
-                    Description
-                  </Text>
-                  <Text>{feature.description}</Text>
-                </Box>
-                <Box
-                  display='flex'
-                  flexDirection='row'
-                  alignItems='center'
-                  marginBottom='30px'
-                >
-                  <Box marginRight='35px'>
-                    <Text variant='headline' gutterBottom>
-                      Price
-                    </Text>
-                  </Box>
-                  <Text variant='title' weight='bold'>
-                    ${feature.price}
-                  </Text>
-                </Box>
-                {feature.wireframes && (
-                  <Box
-                    display='flex'
-                    flexDirection='column'
-                    marginBottom='30px'
-                  >
-                    <Text variant='headline' gutterBottom>
-                      Wireframes
-                    </Text>
-                    <Box
-                      background='white'
-                      boxShadow='1px 1px 10px 0px rgba(50, 59, 105, 0.25)'
-                      borderRadius='10px'
-                      width='100%'
-                      padding='30px'
-                      display='grid'
-                      gridTemplate='auto / repeat(auto-fit, 175px)'
-                      gap='30px'
-                      alignItems='stretch'
-                    >
-                      {feature.wireframes.map((image) => (
-                        <ImagePreview
-                          key={image.name}
-                          color={role}
-                          image={image}
-                        />
-                      ))}
-                    </Box>
-                  </Box>
-                )}
-                <Box
-                  display='flex'
-                  flexDirection='row'
-                  alignItems='center'
-                  marginBottom='30px'
-                >
-                  <Box marginRight='35px'>
-                    <Text variant='headline' gutterBottom>
-                      Repo
-                    </Text>
-                  </Box>
-                  <Link url target='_blank' href={feature.repo}>
-                    {feature.repo}
-                  </Link>
-                </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' ||
+      {['client', 'productOwer'].includes(role as string) && <Navigate to='/project' />}
-        (role === 'productOwner' && <Navigate to='/project' />)}
     </>
   );
+
+  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
+          display='flex'
+          flexDirection='row'
+          alignItems='center'
+          marginBottom='20px'
+        >
+          <Box flexGrow='1'>
+            <Text variant='headline' weight='bold'>
+              {feature.name}
+            </Text>
+          </Box>
+          <Button
+            color={role || 'client'}
+            variant='primary-action'
+            text='Settings'
+            iconLeft={<Settings />}
+            onClick={() =>
+              navigate(`/feature-settings/${id || feature.id}`)
+            }
+          />
+        </Box>
+        <Box marginBottom='30px'>
+          <Text variant='headline' gutterBottom>
+            Description
+          </Text>
+          <Text>{feature.description}</Text>
+        </Box>
+        <Box
+          display='flex'
+          flexDirection='row'
+          alignItems='center'
+          marginBottom='30px'
+        >
+          <Box marginRight='35px'>
+            <Text variant='headline' gutterBottom>
+              Price
+            </Text>
+          </Box>
+          <Text variant='title' weight='bold'>
+            ${feature.price}
+          </Text>
+        </Box>
+        {feature.wireframes && (
+          <Box
+            display='flex'
+            flexDirection='column'
+            marginBottom='30px'
+          >
+            <Text variant='headline' gutterBottom>
+              Wireframes
+            </Text>
+            <Box
+              background='white'
+              boxShadow='1px 1px 10px 0px rgba(50, 59, 105, 0.25)'
+              borderRadius='10px'
+              width='100%'
+              padding='30px'
+              display='grid'
+              gridTemplate='auto / repeat(auto-fit, 175px)'
+              gap='30px'
+              alignItems='stretch'
+            >
+              {feature.wireframes.map((image) => (
+                <ImagePreview
+                  key={image.name}
+                  color={role}
+                  image={image}
+                />
+              ))}
+            </Box>
+          </Box>
+        )}
+        <Box
+          display='flex'
+          flexDirection='row'
+          alignItems='center'
+          marginBottom='30px'
+        >
+          <Box marginRight='35px'>
+            <Text variant='headline' gutterBottom>
+              Repo
+            </Text>
+          </Box>
+          <Link url target='_blank' href={feature.repo}>
+            {feature.repo}
+          </Link>
+        </Box>
+      </Box>
+    </Wrapper>
+  );
 };
 
 export default Feature;

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
@@ -238,262 +262,254 @@ const FeatureSettings = () => {
           </Box>
           {selectedSection === 'general' && (
             <>
-              {!featureLoading ? (
+              {deleteFeatureModal && (
-                <>
+                <Modal
-                  {deleteFeatureModal && (
+                  color={role || 'client'}
-                    <Modal
+                  title='Delete Feature'
-                      color={role || 'client'}
+                  description='
-                      title='Delete Feature'
+          If you delete this feature you cannot recover it.'
-                      description='
+                  onClose={() => setDeleteFeatureModal(false)}
-              If you delete this feature you cannot recover it.'
+                  onConfirm={() =>
-                      onClose={() => setDeleteFeatureModal(false)}
+                    deleteFeature({ variables: { id: id as string } })
-                      onConfirm={() =>
+                  }
-                        deleteFeature({ variables: { id: id as string } })
+                ></Modal>
+              )}
+              <form onSubmit={generalForm.handleSubmit}>
+                <Box
+                  display='grid'
+                  gridTemplateColumns='auto'
+                  rowGap='0.5rem'
+                  position='relative'
+                >
+                  <Input
+                    name='name'
+                    label='Name'
+                    color={role || 'client'}
+                    value={generalForm.values.name}
+                    onChange={generalForm.handleChange}
+                    onBlur={generalForm.handleBlur}
+                    error={
+                      generalForm.touched.name && !!generalForm.errors.name
+                    }
+                    errorMessage={generalForm.errors.name}
+                  />
+                  <Input
+                    type='file'
+                    label='Image'
+                    color={role || 'client'}
+                    onChange={async (
+                      event: React.ChangeEvent<HTMLInputElement>
+                    ) => {
+                      const formData = new FormData();
+
+                      if (event.target.files && event.target.files[0]) {
+                        formData.append('file', event.target.files[0]);
+                        formData.append('upload_preset', 'xofll5kc');
+
+                        generalForm.setFieldValue('imageName', '');
+                        generalForm.setFieldValue('imageSource', '');
+
+                        const data = await (
+                          await fetch(
+                            `${import.meta.env.VITE_CLOUDINARY_URL}`,
+                            {
+                              method: 'POST',
+                              body: formData,
+                            }
+                          )
+                        ).json();
+
+                        const filename = data.original_filename;
+                        const filesource = data.secure_url;
+
+                        generalForm.setFieldValue('imageName', filename);
+                        generalForm.setFieldValue(
+                          'imageSource',
+                          filesource
+                        );
                       }
-                    ></Modal>
+                    }}
-                  )}
+                    error={
-                  <form onSubmit={generalForm.handleSubmit}>
+                      generalForm.touched.imageName &&
+                      (!!generalForm.errors.imageName ||
+                        !!generalForm.errors.imageSource)
+                    }
+                    errorMessage={generalForm.errors.imageName}
+                  />
+                  <Box>
                     <Box
-                      display='grid'
+                      display='flex'
-                      gridTemplateColumns='auto'
+                      flexDirection='row'
-                      rowGap='0.5rem'
+                      alignItems='center'
-                      position='relative'
+                      justifyContent='space-between'
                     >
-                      <Input
+                      <Box justifySelf='flex-start'>
-                        name='name'
+                        <Text
-                        label='Name'
+                          variant='body'
-                        color={role || 'client'}
+                          weight='bold'
-                        value={generalForm.values.name}
+                          className='feature-type'
-                        onChange={generalForm.handleChange}
-                        onBlur={generalForm.handleBlur}
-                        error={
-                          generalForm.touched.name && !!generalForm.errors.name
-                        }
-                        errorMessage={generalForm.errors.name}
-                      />
-                      <Input
-                        type='file'
-                        label='Image'
-                        color={role || 'client'}
-                        onChange={async (
-                          event: React.ChangeEvent<HTMLInputElement>
-                        ) => {
-                          const formData = new FormData();
-
-                          if (event.target.files && event.target.files[0]) {
-                            formData.append('file', event.target.files[0]);
-                            formData.append('upload_preset', 'xofll5kc');
-
-                            generalForm.setFieldValue('imageName', '');
-                            generalForm.setFieldValue('imageSource', '');
-
-                            const data = await (
-                              await fetch(
-                                `${import.meta.env.VITE_CLOUDINARY_URL}`,
-                                {
-                                  method: 'POST',
-                                  body: formData,
-                                }
-                              )
-                            ).json();
-
-                            const filename = data.original_filename;
-                            const filesource = data.secure_url;
-
-                            generalForm.setFieldValue('imageName', filename);
-                            generalForm.setFieldValue(
-                              'imageSource',
-                              filesource
-                            );
-                          }
-                        }}
-                        error={
-                          generalForm.touched.imageName &&
-                          (!!generalForm.errors.imageName ||
-                            !!generalForm.errors.imageSource)
-                        }
-                        errorMessage={generalForm.errors.imageName}
-                      />
-                      <Box>
-                        <Box
-                          display='flex'
-                          flexDirection='row'
-                          alignItems='center'
-                          justifyContent='space-between'
                         >
-                          <Box justifySelf='flex-start'>
+                          Type
-                            <Text
+                        </Text>
-                              variant='body'
-                              weight='bold'
-                              className='feature-type'
-                            >
-                              Type
-                            </Text>
-                          </Box>
-                          {!!generalForm.errors.featureType && (
-                            <Box justifySelf='flex-end'>
-                              <Text variant='body' color='error'>
-                                {generalForm.errors.featureType}
-                              </Text>
-                            </Box>
-                          )}
-                        </Box>
-                        <Box
-                          display='flex'
-                          flexDirection='row'
-                          alignItems='center'
-                          marginTop='5px'
-                        >
-                          <Box marginRight='50px'>
-                            <CheckBox
-                              label='Frontend'
-                              name='featureType'
-                              color={role || 'client'}
-                              onClick={() => {
-                                if (
-                                  generalForm.values.featureType === 'fullstack'
-                                ) {
-                                  generalForm.setFieldValue(
-                                    'featureType',
-                                    'backend'
-                                  );
-                                  return;
-                                }
-                                if (
-                                  generalForm.values.featureType === 'backend'
-                                ) {
-                                  generalForm.setFieldValue(
-                                    'featureType',
-                                    'fullstack'
-                                  );
-                                  return;
-                                }
-                                if (
-                                  generalForm.values.featureType === 'frontend'
-                                ) {
-                                  generalForm.setFieldValue('featureType', '');
-                                  return;
-                                }
-                                generalForm.setFieldValue(
-                                  'featureType',
-                                  'frontend'
-                                );
-                              }}
-                              checked={
-                                generalForm.values.featureType === 'frontend' ||
-                                generalForm.values.featureType === 'fullstack'
-                              }
-                            />
-                          </Box>
-                          <Box>
-                            <CheckBox
-                              label='Backend'
-                              name='featureType'
-                              color={role || 'client'}
-                              onClick={() => {
-                                if (
-                                  generalForm.values.featureType === 'fullstack'
-                                ) {
-                                  generalForm.setFieldValue(
-                                    'featureType',
-                                    'frontend'
-                                  );
-                                  return;
-                                }
-                                if (
-                                  generalForm.values.featureType === 'frontend'
-                                ) {
-                                  generalForm.setFieldValue(
-                                    'featureType',
-                                    'fullstack'
-                                  );
-                                  return;
-                                }
-                                if (
-                                  generalForm.values.featureType === 'backend'
-                                ) {
-                                  generalForm.setFieldValue('featureType', '');
-                                  return;
-                                }
-                                generalForm.setFieldValue(
-                                  'featureType',
-                                  'backend'
-                                );
-                              }}
-                              checked={
-                                generalForm.values.featureType === 'backend' ||
-                                generalForm.values.featureType === 'fullstack'
-                              }
-                            />
-                          </Box>
-                        </Box>
                       </Box>
-                      <TextArea
+                      {!!generalForm.errors.featureType && (
-                        name='description'
+                        <Box justifySelf='flex-end'>
-                        label='Description'
+                          <Text variant='body' color='error'>
-                        color={role || 'client'}
+                            {generalForm.errors.featureType}
-                        value={generalForm.values.description}
+                          </Text>
-                        onChange={generalForm.handleChange}
+                        </Box>
-                        onBlur={generalForm.handleBlur}
+                      )}
-                        error={
+                    </Box>
-                          generalForm.touched.description &&
+                    <Box
-                          !!generalForm.errors.description
+                      display='flex'
-                        }
+                      flexDirection='row'
-                        errorMessage={generalForm.errors.description}
+                      alignItems='center'
-                      />
+                      marginTop='5px'
-                      <Input
+                    >
-                        name='price'
+                      <Box marginRight='50px'>
-                        label='Price'
+                        <CheckBox
-                        color={role || 'client'}
+                          label='Frontend'
-                        value={generalForm.values.price}
+                          name='featureType'
-                        onChange={generalForm.handleChange}
-                        onBlur={generalForm.handleBlur}
-                        error={
-                          generalForm.touched.price &&
-                          !!generalForm.errors.price
-                        }
-                        errorMessage={generalForm.errors.price}
-                      />
-                      <Input
-                        name='repo'
-                        label='Repo'
-                        color={role || 'client'}
-                        value={generalForm.values.repo}
-                        onChange={generalForm.handleChange}
-                        onBlur={generalForm.handleBlur}
-                        error={
-                          generalForm.touched.repo && !!generalForm.errors.repo
-                        }
-                        errorMessage={generalForm.errors.repo}
-                      />
-                      <Box
-                        marginTop='0.5rem'
-                        display='flex'
-                        justifyContent='space-between'
-                      >
-                        <Button
-                          variant='text'
-                          color='error'
-                          text='Delete Feature'
-                          onClick={() => setDeleteFeatureModal(true)}
-                        />
-                        <Button
-                          variant='primary-action'
                           color={role || 'client'}
-                          text='Save'
+                          onClick={() => {
-                          type='submit'
+                            if (
-                          loading={loading}
+                              generalForm.values.featureType === 'fullstack'
-                          disabled={loading}
+                            ) {
+                              generalForm.setFieldValue(
+                                'featureType',
+                                'backend'
+                              );
+                              return;
+                            }
+                            if (
+                              generalForm.values.featureType === 'backend'
+                            ) {
+                              generalForm.setFieldValue(
+                                'featureType',
+                                'fullstack'
+                              );
+                              return;
+                            }
+                            if (
+                              generalForm.values.featureType === 'frontend'
+                            ) {
+                              generalForm.setFieldValue('featureType', '');
+                              return;
+                            }
+                            generalForm.setFieldValue(
+                              'featureType',
+                              'frontend'
+                            );
+                          }}
+                          checked={
+                            generalForm.values.featureType === 'frontend' ||
+                            generalForm.values.featureType === 'fullstack'
+                          }
+                        />
+                      </Box>
+                      <Box>
+                        <CheckBox
+                          label='Backend'
+                          name='featureType'
+                          color={role || 'client'}
+                          onClick={() => {
+                            if (
+                              generalForm.values.featureType === 'fullstack'
+                            ) {
+                              generalForm.setFieldValue(
+                                'featureType',
+                                'frontend'
+                              );
+                              return;
+                            }
+                            if (
+                              generalForm.values.featureType === 'frontend'
+                            ) {
+                              generalForm.setFieldValue(
+                                'featureType',
+                                'fullstack'
+                              );
+                              return;
+                            }
+                            if (
+                              generalForm.values.featureType === 'backend'
+                            ) {
+                              generalForm.setFieldValue('featureType', '');
+                              return;
+                            }
+                            generalForm.setFieldValue(
+                              'featureType',
+                              'backend'
+                            );
+                          }}
+                          checked={
+                            generalForm.values.featureType === 'backend' ||
+                            generalForm.values.featureType === 'fullstack'
+                          }
                         />
                       </Box>
                     </Box>
-                  </form>
+                  </Box>
-                </>
+                  <TextArea
-              ) : (
+                    name='description'
-                <Box display='grid' alignItems='center' justifyContent='center'>
+                    label='Description'
-                  <Spinner color={role || 'client'} />
+                    color={role || 'client'}
+                    value={generalForm.values.description}
+                    onChange={generalForm.handleChange}
+                    onBlur={generalForm.handleBlur}
+                    error={
+                      generalForm.touched.description &&
+                      !!generalForm.errors.description
+                    }
+                    errorMessage={generalForm.errors.description}
+                  />
+                  <Input
+                    name='price'
+                    label='Price'
+                    color={role || 'client'}
+                    value={generalForm.values.price}
+                    onChange={generalForm.handleChange}
+                    onBlur={generalForm.handleBlur}
+                    error={
+                      generalForm.touched.price &&
+                      !!generalForm.errors.price
+                    }
+                    errorMessage={generalForm.errors.price}
+                  />
+                  <Input
+                    name='repo'
+                    label='Repo'
+                    color={role || 'client'}
+                    value={generalForm.values.repo}
+                    onChange={generalForm.handleChange}
+                    onBlur={generalForm.handleBlur}
+                    error={
+                      generalForm.touched.repo && !!generalForm.errors.repo
+                    }
+                    errorMessage={generalForm.errors.repo}
+                  />
+                  <Box
+                    marginTop='0.5rem'
+                    display='flex'
+                    justifyContent='space-between'
+                  >
+                    <Button
+                      variant='text'
+                      color='error'
+                      text='Delete Feature'
+                      onClick={() => setDeleteFeatureModal(true)}
+                    />
+                    <Button
+                      variant='primary-action'
+                      color={role || 'client'}
+                      text='Save'
+                      type='submit'
+                      loading={loading}
+                      disabled={loading}
+                    />
+                  </Box>
                 </Box>
-              )}
+              </form>
             </>
           )}
           {selectedSection === 'wireframes' && (
@@ -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/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,158 +191,154 @@ 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 ? (
+  );
-            <Wrapper color={role}>
+
-              <Box padding='35px 45px 0px 120px'>
+  if (templateError || prototypeError || !template || !prototype) return (
-                <Box
+    <Wrapper color={role}>
-                  display='flex'
+      <Box
-                  flexDirection='row'
+        width='100%'
-                  alignItems='center'
+        height='100vh'
-                  marginBottom='20px'
+        display='grid'
-                >
+        alignItems='center'
-                  <Box marginRight='50px'>
+        justifyContent='center'
-                    <Button
+      >
-                      text='Back'
+        <Box>
-                      color={role || 'client'}
+          <Empty />
-                      size='small'
+        </Box>
-                      onClick={() => navigate(-1)}
+      </Box>
-                      iconLeft={<ArrowLeft />}
+    </Wrapper>
-                    />
+  );
-                    <Text variant='headline' weight='bold'>
+
-                      Prototype
+  return (
-                    </Text>
+    <Wrapper color={role}>
-                  </Box>
+      <Box padding='35px 45px 0px 120px'>
-                  {success && (
+        <Box
-                    <Alert
+          display='flex'
-                      color='success'
+          flexDirection='row'
-                      text='Prototype updated successfully'
+          alignItems='center'
-                    />
+          marginBottom='20px'
-                  )}
+        >
-                  {error && <Alert color='error' text={error} />}
+          <Box marginRight='50px'>
-                </Box>
+            <Button
-                {template.features && (
+              text='Back'
-                  <>
+              color={role || 'client'}
-                    <Box
+              size='small'
-                      display='flex'
+              onClick={() => navigate(-1)}
-                      flexDirection='column'
+              iconLeft={<ArrowLeft />}
-                      marginBottom='30px'
+            />
-                    >
+            <Text variant='headline' weight='bold'>
-                      <Box marginBottom='10px'>
+              Prototype
-                        <Text variant='headline' gutterBottom>
+            </Text>
-                          Frontend Features
+          </Box>
-                        </Text>
+          {success && (
-                      </Box>
+            <Alert
-                      <Box
+              color='success'
-                        display='grid'
+              text='Prototype updated successfully'
-                        background='#F9FAFA'
+            />
-                        boxShadow='1px 1px 10px rgba(50, 59, 105, 0.25)'
+          )}
-                        borderRadius='10px'
+          {error && <Alert color='error' text={error} />}
-                        width='100%'
+        </Box>
-                        height='400px'
+        {template.features && (
-                        ref={diagramParentRef}
+          <>
-                      >
+            <Box
-                        <Box
+              display='flex'
-                          width={
+              flexDirection='column'
-                            diagramParentRef.current
+              marginBottom='30px'
-                              ? `${
+            >
-                                  getComputedStyle(diagramParentRef.current)
+              <Box marginBottom='10px'>
-                                    ?.width
+                <Text variant='headline' gutterBottom>
-                                }}px`
+                  Frontend Features
-                              : '100%'
+                </Text>
-                          }
-                          height='auto'
-                        >
-                          <ReactFlow
-                            fitView
-                            nodes={nodes}
-                            edges={edges}
-                            nodeTypes={nodeTypes}
-                            onNodesChange={onNodesChange}
-                            onEdgesChange={onEdgesChange}
-                            onConnect={onConnect}
-                          >
-                            {role === 'developer' && (
-                              <>
-                                <MiniMap />
-                                <Controls
-                                  showInteractive={false}
-                                  showFitView
-                                >
-                                  <ControlButton onClick={handleEditPrototype}>
-                                    {!editing ? <Edit /> : <CheckCircle />}
-                                  </ControlButton>
-                                </Controls>
-                              </>
-                            )}
-                          </ReactFlow>
-                        </Box>
-                      </Box>
-                    </Box>
-                    <Box
-                      display='flex'
-                      flexDirection='column'
-                      marginBottom='30px'
-                    >
-                      <Box marginBottom='10px'>
-                        <Text variant='headline' gutterBottom>
-                          Backend Features
-                        </Text>
-                      </Box>
-                      <Box
-                        display='grid'
-                        gridTemplateColumns='repeat(3, 1fr)'
-                        gap='20px'
-                        alignItems='stretch'
-                        justifyContent='center'
-                      >
-                        {template.features.map((feature) => {
-                          if (
-                            feature.featureType === 'backend' ||
-                            feature.featureType === 'fullstack'
-                          ) {
-                            return (
-                              <BackendFeatureCard
-                                feature={feature}
-                                key={feature.id}
-                              />
-                            );
-                          }
-                          return null;
-                        })}
-                      </Box>
-                    </Box>
-                  </>
-                )}
               </Box>
-            </Wrapper>
-          ) : (
-            <Wrapper color={role}>
               <Box
-                width='100%'
-                height='100vh'
                 display='grid'
-                alignItems='center'
+                background='#F9FAFA'
+                boxShadow='1px 1px 10px rgba(50, 59, 105, 0.25)'
+                borderRadius='10px'
+                width='100%'
+                height='400px'
+                ref={diagramParentRef}
+              >
+                <Box
+                  width={
+                    diagramParentRef.current
+                      ? `${
+                          getComputedStyle(diagramParentRef.current)
+                            ?.width
+                        }}px`
+                      : '100%'
+                  }
+                  height='auto'
+                >
+                  <ReactFlow
+                    fitView
+                    nodes={nodes}
+                    edges={edges}
+                    nodeTypes={nodeTypes}
+                    onNodesChange={onNodesChange}
+                    onEdgesChange={onEdgesChange}
+                    onConnect={onConnect}
+                  >
+                    {role === 'developer' && (
+                      <>
+                        <MiniMap />
+                        <Controls
+                          showInteractive={false}
+                          showFitView
+                        >
+                          <ControlButton onClick={handleEditPrototype}>
+                            {!editing ? <Edit /> : <CheckCircle />}
+                          </ControlButton>
+                        </Controls>
+                      </>
+                    )}
+                  </ReactFlow>
+                </Box>
+              </Box>
+            </Box>
+            <Box
+              display='flex'
+              flexDirection='column'
+              marginBottom='30px'
+            >
+              <Box marginBottom='10px'>
+                <Text variant='headline' gutterBottom>
+                  Backend Features
+                </Text>
+              </Box>
+              <Box
+                display='grid'
+                gridTemplateColumns='repeat(3, 1fr)'
+                gap='20px'
+                alignItems='stretch'
                 justifyContent='center'
               >
-                <Box>
+                {template.features.map((feature) => {
-                  <Empty />
+                  if (
-                </Box>
+                    feature.featureType === 'backend' ||
+                    feature.featureType === 'fullstack'
+                  ) {
+                    return (
+                      <BackendFeatureCard
+                        feature={feature}
+                        key={feature.id}
+                      />
+                    );
+                  }
+                  return null;
+                })}
               </Box>
-            </Wrapper>
+            </Box>
-          )}
+          </>
-        </>
+        )}
-      ) : (
+      </Box>
-        <Spinner fullScreen color={role || 'client'} />
+    </Wrapper>
-      )}
-    </>
-  ) : (
-    <>{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,234 +39,214 @@ 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,
-      {!templatesLoading &&
+  });
-      !templateLoading &&
+
-      !categoryLoading &&
+  if (role !== 'productOwner' && role !== 'developer') return (
-      !prototypeLoading ? (
-        <>
-          {template ? (
-            <Wrapper>
-              <Box padding='35px 45px 0px 120px'>
-                <Box
-                  display='flex'
-                  flexDirection='row'
-                  alignItems='center'
-                  marginBottom='20px'
-                >
-                  <Box
-                    flexGrow='1'
-                    display='flex'
-                    flexDirection='row'
-                    alignItems='center'
-                  >
-                    <Text variant='headline' weight='bold'>
-                      {template.name}
-                    </Text>
-                    {category && (
-                      <Box marginLeft='20px'>
-                        <Chip text={category.name} color={role} />
-                      </Box>
-                    )}
-                  </Box>
-                  <Box
-                    marginRight={role === 'productOwner' ? '20px' : undefined}
-                  >
-                    <Button
-                      color={role || 'client'}
-                      variant='primary-action'
-                      text='Prototype'
-                      iconLeft={<Design />}
-                      disabled={
-                        prototype === undefined && role === 'productOwner'
-                      }
-                      onClick={() =>
-                        navigate(`/prototype/${id || template.id}`)
-                      }
-                    />
-                  </Box>
-                  {role === 'productOwner' && (
-                    <Box>
-                      <Button
-                        color={role || 'client'}
-                        variant='primary-action'
-                        text='Settings'
-                        iconLeft={<Settings />}
-                        onClick={() =>
-                          navigate(`/template-settings/${id || template.id}`)
-                        }
-                      />
-                    </Box>
-                  )}
-                </Box>
-                <Box marginBottom='30px'>
-                  <Text variant='headline' gutterBottom>
-                    Description
-                  </Text>
-                  <Text>{template.description}</Text>
-                </Box>
-                {template.features && (
-                  <Box
-                    display='flex'
-                    flexDirection='column'
-                    marginBottom='30px'
-                  >
-                    <Box marginBottom='10px'>
-                      <Text variant='headline' gutterBottom>
-                        Features
-                      </Text>
-                    </Box>
-                    <Box
-                      display='grid'
-                      gridTemplateColumns='repeat(3, 1fr)'
-                      columnGap='40px'
-                      rowGap='45px'
-                      alignItems='stretch'
-                    >
-                      {template.features.map((feature) => (
-                        <FeatureCard feature={feature} key={feature.id} />
-                      ))}
-                    </Box>
-                  </Box>
-                )}
-                {template.specification && (
-                  <Box
-                    display='flex'
-                    flexDirection='column'
-                    marginBottom='30px'
-                  >
-                    <Box marginBottom='10px'>
-                      <Text variant='headline' gutterBottom>
-                        Deliverables
-                      </Text>
-                    </Box>
-                    <Box
-                      display='flex'
-                      flexDirection='row'
-                      alignItems='center'
-                      justifyContent='space-between'
-                      padding='35px 20px'
-                      boxShadow='1px 1px 10px rgba(50, 59, 105, 0.25)'
-                      borderRadius='10px'
-                    >
-                      <Box
-                        display='flex'
-                        flexDirection='row'
-                        alignItems='center'
-                      >
-                        <Box marginRight='10px'>
-                          <Specification />
-                        </Box>
-                        <Text variant='title'>Specification</Text>
-                      </Box>
-                      <Link href='#' color={role} onClick={handlePrint}>
-                        Download
-                      </Link>
-                    </Box>
-                  </Box>
-                )}
-                {template.specification && template.features && (
-                  <Box display='none'>
-                    <SpecificationPrint
-                      ref={printRef}
-                      specification={template.specification}
-                      features={template.features}
-                    />
-                  </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' && <Navigate to='/project' />}
     </>
   );
+
+  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
+          display='flex'
+          flexDirection='row'
+          alignItems='center'
+          marginBottom='20px'
+        >
+          <Box
+            flexGrow='1'
+            display='flex'
+            flexDirection='row'
+            alignItems='center'
+          >
+            <Text variant='headline' weight='bold'>
+              {template.name}
+            </Text>
+            {category && (
+              <Box marginLeft='20px'>
+                <Chip text={category.name} color={role} />
+              </Box>
+            )}
+          </Box>
+          <Box
+            marginRight={role === 'productOwner' ? '20px' : undefined}
+          >
+            <Button
+              color={role || 'client'}
+              variant='primary-action'
+              text='Prototype'
+              iconLeft={<Design />}
+              disabled={
+                role === 'productOwner'
+              }
+              onClick={() =>
+                navigate(`/prototype/${id || template.id}`)
+              }
+            />
+          </Box>
+          {role === 'productOwner' && (
+            <Box>
+              <Button
+                color={role || 'client'}
+                variant='primary-action'
+                text='Settings'
+                iconLeft={<Settings />}
+                onClick={() =>
+                  navigate(`/template-settings/${id || template.id}`)
+                }
+              />
+            </Box>
+          )}
+        </Box>
+        <Box marginBottom='30px'>
+          <Text variant='headline' gutterBottom>
+            Description
+          </Text>
+          <Text>{template.description}</Text>
+        </Box>
+        {template.features && (
+          <Box
+            display='flex'
+            flexDirection='column'
+            marginBottom='30px'
+          >
+            <Box marginBottom='10px'>
+              <Text variant='headline' gutterBottom>
+                Features
+              </Text>
+            </Box>
+            <Box
+              display='grid'
+              gridTemplateColumns='repeat(3, 1fr)'
+              columnGap='40px'
+              rowGap='45px'
+              alignItems='stretch'
+            >
+              {template.features.map((feature) => (
+                <FeatureCard feature={feature} key={feature.id} />
+              ))}
+            </Box>
+          </Box>
+        )}
+        {template.specification && (
+          <Box
+            display='flex'
+            flexDirection='column'
+            marginBottom='30px'
+          >
+            <Box marginBottom='10px'>
+              <Text variant='headline' gutterBottom>
+                Deliverables
+              </Text>
+            </Box>
+            <Box
+              display='flex'
+              flexDirection='row'
+              alignItems='center'
+              justifyContent='space-between'
+              padding='35px 20px'
+              boxShadow='1px 1px 10px rgba(50, 59, 105, 0.25)'
+              borderRadius='10px'
+            >
+              <Box
+                display='flex'
+                flexDirection='row'
+                alignItems='center'
+              >
+                <Box marginRight='10px'>
+                  <Specification />
+                </Box>
+                <Text variant='title'>Specification</Text>
+              </Box>
+              <Link href='#' color={role} onClick={handlePrint}>
+                Download
+              </Link>
+            </Box>
+          </Box>
+        )}
+        {template.specification && template.features && (
+          <Box display='none'>
+            <SpecificationPrint
+              ref={printRef}
+              specification={template.specification}
+              features={template.features}
+            />
+          </Box>
+        )}
+      </Box>
+    </Wrapper>
+  );
 };
 
 export default Template;

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,83 +88,128 @@ const Users = () => {
     },
   });
 
-  return role === 'admin' ? (
+  if (role !== 'admin') return (
+    <Navigate to='/' />
+  )
+
+  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 (
     <>
-      {!loading ? (
+      {deleteAccountModal && (
-        <>
+        <Modal
-          {deleteAccountModal && (
+          color={role || 'client'}
-            <Modal
+          title='Delete Account'
-              color={role || 'client'}
+          description='Enter password to confirm account deletion.
-              title='Delete Account'
+        If you delete your account you cannot recover any of your projects.'
-              description='Enter password to confirm account deletion.
+          onClose={() => setDeleteAccountModal(false)}
-            If you delete your account you cannot recover any of your projects.'
+          onConfirm={deleteAccountForm.handleSubmit}
-              onClose={() => setDeleteAccountModal(false)}
+        >
-              onConfirm={deleteAccountForm.handleSubmit}
+          <Input
+            type='password'
+            placeholder='Password'
+            name='password'
+            value={deleteAccountForm.values.password}
+            onChange={deleteAccountForm.handleChange}
+            onBlur={deleteAccountForm.handleBlur}
+            color={role || 'client'}
+            error={
+              deleteAccountForm.touched.password &&
+              !!deleteAccountForm.errors.password
+            }
+            errorMessage={deleteAccountForm.errors.password}
+          />
+        </Modal>
+      )}
+      {users && users.length > 0 ? (
+        <Wrapper color={role} empty={false}>
+          <Box width='100%' height='100vh' alignItems='center'>
+            <Box
+              display='flex'
+              flexDirection='row'
+              alignItems='center'
+              marginBottom='20px'
             >
-              <Input
+              <Box flexGrow={!error ? '1' : undefined}>
-                type='password'
+                <Text variant='headline' weight='bold'>
-                placeholder='Password'
+                  {location.pathname === '/clients'
-                name='password'
+                    ? 'Clients'
-                value={deleteAccountForm.values.password}
+                    : location.pathname === '/product-owners'
-                onChange={deleteAccountForm.handleChange}
+                    ? 'Product Owners'
-                onBlur={deleteAccountForm.handleBlur}
+                    : 'Developers'}
+                </Text>
+              </Box>
+              {error && (
+                <Box flexGrow='1' marginLeft='55px' marginRight='55px'>
+                  <Alert color='error' text={error} />
+                </Box>
+              )}
+              <Button
                 color={role || 'client'}
-                error={
+                variant='primary-action'
-                  deleteAccountForm.touched.password &&
+                text={`New ${
-                  !!deleteAccountForm.errors.password
+                  location.pathname === '/clients'
-                }
+                    ? 'Client'
-                errorMessage={deleteAccountForm.errors.password}
+                    : location.pathname === '/product-owners'
-              />
+                    ? 'Product Owner'
-            </Modal>
+                    : 'Developer'
-          )}
+                }`}
-          {users && users.length > 0 ? (
+                iconLeft={<Add />}
-            <Wrapper color={role} empty={false}>
+                onClick={() =>
-              <Box width='100%' height='100vh' alignItems='center'>
+                  navigate(
-                <Box
+                    `/create-user/${
-                  display='flex'
-                  flexDirection='row'
-                  alignItems='center'
-                  marginBottom='20px'
-                >
-                  <Box flexGrow={!error ? '1' : undefined}>
-                    <Text variant='headline' weight='bold'>
-                      {location.pathname === '/clients'
-                        ? 'Clients'
-                        : location.pathname === '/product-owners'
-                        ? 'Product Owners'
-                        : 'Developers'}
-                    </Text>
-                  </Box>
-                  {error && (
-                    <Box flexGrow='1' marginLeft='55px' marginRight='55px'>
-                      <Alert color='error' text={error} />
-                    </Box>
-                  )}
-                  <Button
-                    color={role || 'client'}
-                    variant='primary-action'
-                    text={`New ${
                       location.pathname === '/clients'
                         ? 'Client'
                         : location.pathname === '/product-owners'
-                        ? 'Product Owner'
+                        ? 'ProductOwner'
                         : 'Developer'
-                    }`}
+                    }`
-                    iconLeft={<Add />}
+                  )
-                    onClick={() =>
+                }
-                      navigate(
+              />
-                        `/create-user/${
+            </Box>
-                          location.pathname === '/clients'
+            <Box
-                            ? 'Client'
+              padding='15px 20px'
-                            : location.pathname === '/product-owners'
+              borderRadius='10px'
-                            ? 'ProductOwner'
+              boxShadow='1px 1px 10px 0px rgba(50, 59, 105, 0.25)'
-                            : 'Developer'
+              display='grid'
-                        }`
+              gridTemplateColumns='repeat(5, 1fr)'
-                      )
+              alignItems='center'
-                    }
+              justifyContent='flex-start'
-                  />
+              className='table-head'
-                </Box>
+              marginBottom='20px'
+              columnGap='3rem'
+            >
+              <Text variant='title'>First Name</Text>
+              <Text variant='title'>Last Name</Text>
+              <Text variant='title'>Email </Text>
+              <Text variant='title'>Phone </Text>
+              <Box justifySelf='flex-end'>
+                <Text variant='title'>Actions</Text>
+              </Box>
+            </Box>
+            <Box padding='10px 0px'>
+              {users.map((user) => (
                 <Box
+                  key={user.id}
                   padding='15px 20px'
                   borderRadius='10px'
                   boxShadow='1px 1px 10px 0px rgba(50, 59, 105, 0.25)'
@@ -174,135 +217,106 @@ const Users = () => {
                   gridTemplateColumns='repeat(5, 1fr)'
                   alignItems='center'
                   justifyContent='flex-start'
-                  className='table-head'
                   marginBottom='20px'
                   columnGap='3rem'
                 >
-                  <Text variant='title'>First Name</Text>
+                  <Text variant='headline' weight='bold'>
-                  <Text variant='title'>Last Name</Text>
+                    {user.firstName}
-                  <Text variant='title'>Email </Text>
+                  </Text>
-                  <Text variant='title'>Phone </Text>
+                  <Text variant='headline' weight='bold'>
-                  <Box justifySelf='flex-end'>
+                    {user.lastName}
-                    <Text variant='title'>Actions</Text>
+                  </Text>
+                  <Text variant='headline' weight='bold'>
+                    {user.email}
+                  </Text>
+                  <Text variant='headline' weight='bold'>
+                    +{user.phone.prefix}
+                    {user.phone.number}
+                  </Text>
+                  <Box
+                    display='flex'
+                    flexDirection='row'
+                    alignItems='center'
+                    justifySelf='flex-end'
+                  >
+                    <Box
+                      onClick={() => navigate(`/user-settings/${user.id}`)}
+                      marginRight='15px'
+                      cursor='pointer'
+                    >
+                      <Edit />
+                    </Box>
+                    <Box
+                      onClick={() => {
+                        setUserToDelete(user);
+                        setDeleteAccountModal(true);
+                      }}
+                      cursor='pointer'
+                    >
+                      <Delete />
+                    </Box>
                   </Box>
                 </Box>
-                <Box padding='10px 0px'>
+              ))}
-                  {users.map((user) => (
+            </Box>
-                    <Box
+          </Box>
-                      key={user.id}
+        </Wrapper>
-                      padding='15px 20px'
+      ) : (
-                      borderRadius='10px'
+        <Wrapper color={role} empty>
-                      boxShadow='1px 1px 10px 0px rgba(50, 59, 105, 0.25)'
+          <Box
-                      display='grid'
+            display='flex'
-                      gridTemplateColumns='repeat(5, 1fr)'
+            flexDirection='row'
-                      alignItems='center'
+            alignItems='center'
-                      justifyContent='flex-start'
+            marginBottom='20px'
-                      marginBottom='20px'
+            padding='35px 45px 0px 120px'
-                      columnGap='3rem'
+          >
-                    >
+            <Box flexGrow='1'>
-                      <Text variant='headline' weight='bold'>
+              <Text variant='headline' weight='bold'>
-                        {user.firstName}
+                {location.pathname === '/clients'
-                      </Text>
+                  ? 'Clients'
-                      <Text variant='headline' weight='bold'>
+                  : location.pathname === '/product-owners'
-                        {user.lastName}
+                  ? 'Product Owners'
-                      </Text>
+                  : 'Developers'}
-                      <Text variant='headline' weight='bold'>
+              </Text>
-                        {user.email}
+            </Box>
-                      </Text>
+            <Button
-                      <Text variant='headline' weight='bold'>
+              color={role || 'client'}
-                        +{user.phone.prefix}
+              variant='primary-action'
-                        {user.phone.number}
+              text={`New ${
-                      </Text>
+                location.pathname === '/clients'
-                      <Box
+                  ? 'Client'
-                        display='flex'
+                  : location.pathname === '/product-owners'
-                        flexDirection='row'
+                  ? 'Product Owner'
-                        alignItems='center'
+                  : 'Developer'
-                        justifySelf='flex-end'
+              }`}
-                      >
+              iconLeft={<Add />}
-                        <Box
+              onClick={() =>
-                          onClick={() => navigate(`/user-settings/${user.id}`)}
+                navigate(
-                          marginRight='15px'
+                  `/create-user/${
-                          cursor='pointer'
-                        >
-                          <Edit />
-                        </Box>
-                        <Box
-                          onClick={() => {
-                            setUserToDelete(user);
-                            setDeleteAccountModal(true);
-                          }}
-                          cursor='pointer'
-                        >
-                          <Delete />
-                        </Box>
-                      </Box>
-                    </Box>
-                  ))}
-                </Box>
-              </Box>
-            </Wrapper>
-          ) : (
-            <Wrapper color={role} empty>
-              <Box
-                display='flex'
-                flexDirection='row'
-                alignItems='center'
-                marginBottom='20px'
-                padding='35px 45px 0px 120px'
-              >
-                <Box flexGrow='1'>
-                  <Text variant='headline' weight='bold'>
-                    {location.pathname === '/clients'
-                      ? 'Clients'
-                      : location.pathname === '/product-owners'
-                      ? 'Product Owners'
-                      : 'Developers'}
-                  </Text>
-                </Box>
-                <Button
-                  color={role || 'client'}
-                  variant='primary-action'
-                  text={`New ${
                     location.pathname === '/clients'
                       ? 'Client'
                       : location.pathname === '/product-owners'
-                      ? 'Product Owner'
+                      ? 'ProductOwner'
                       : 'Developer'
-                  }`}
+                  }`
-                  iconLeft={<Add />}
+                )
-                  onClick={() =>
+              }
-                    navigate(
+            />
-                      `/create-user/${
+          </Box>
-                        location.pathname === '/clients'
+          <Box
-                          ? 'Client'
+            width='100%'
-                          : location.pathname === '/product-owners'
+            height='100vh'
-                          ? 'ProductOwner'
+            display='grid'
-                          : 'Developer'
+            alignItems='center'
-                      }`
+            justifyContent='center'
-                    )
+          >
-                  }
+            <Box>
-                />
+              <Empty />
-              </Box>
+            </Box>
-              <Box
+          </Box>
-                width='100%'
+        </Wrapper>
-                height='100vh'
-                display='grid'
-                alignItems='center'
-                justifyContent='center'
-              >
-                <Box>
-                  <Empty />
-                </Box>
-              </Box>
-            </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,
 };