Fix initial project loading for client

src/components/Sidebar/index.tsx

@@ -6,7 +6,7 @@ import {
   Box,
   ContextMenu,
   IconButton,
-  MessagingSidebar,
+  SupportSidebar,
   SidebarItem,
 } from '..';
 import { Add, Messaging } from '../../assets';
@@ -44,7 +44,7 @@ const Sidebar = () => {
   const [templates, setTemplates] = useState<Array<TemplateOutput>>();
   const [features, setFeatures] = useState<Array<FeatureOutput>>();
   const [categories, setCategories] = useState<Array<CategoryOutput>>();
-  const [messagingSidebarOpen, setMessagingSidebarOpen] =
+  const [supportSideBarOpen, setSupportSideBarOpen] =
     useState<boolean>(false);
 
   const [getProjectsByClientId] = useLazyQuery<
@@ -268,7 +268,7 @@ const Sidebar = () => {
                     icon={<Messaging />}
                     color={role}
                     onClick={() =>
-                      setMessagingSidebarOpen(!messagingSidebarOpen)
+                      setSupportSideBarOpen(!supportSideBarOpen)
                     }
                   />
                 </Box>
@@ -276,8 +276,8 @@ const Sidebar = () => {
           </Box>
         </>
       )}
-      {messagingSidebarOpen && (
-        <MessagingSidebar onClose={() => setMessagingSidebarOpen(false)} />
+      {supportSideBarOpen && (
+        <SupportSidebar onClose={() => setSupportSideBarOpen(false)} />
       )}
     </Wrapper>
   );

src/components/SupportSidebar/index.tsx

@@ -13,11 +13,11 @@ import { GET_PROJECT_THREADS } from '../../graphql/chat.api.support';
 import { Add, Empty } from '../../assets';
 import { clientSupport } from '../..';
 
-type MessagingSidebarProps = {
+type SupportSideBarProps = {
   onClose: () => void;
 };
 
-const MessagingSidebar = ({ onClose }: MessagingSidebarProps) => {
+const SupportSidebar = ({ onClose }: SupportSideBarProps) => {
   const role = useReactiveVar(roleVar);
   const location = useLocation();
   const navigate = useNavigate();
@@ -110,4 +110,4 @@ const MessagingSidebar = ({ onClose }: MessagingSidebarProps) => {
   );
 };
 
-export default MessagingSidebar;
+export default SupportSidebar;

src/components/index.tsx

@@ -28,7 +28,7 @@ import Specification from './Specification';
 import Chip from './Chip';
 import CategoryCard from './CategoryCard';
 import TemplateCard from './TemplateCard';
-import MessagingSidebar from './MessagingSidebar';
+import SupportSidebar from './SupportSidebar';
 
 export {
   Button,
@@ -61,5 +61,5 @@ export {
   Chip,
   CategoryCard,
   TemplateCard,
-  MessagingSidebar,
+  SupportSidebar,
 };

src/pages/Project/index.tsx

@@ -55,23 +55,6 @@ import {
   GET_PROJECT_BY_ID,
 } from '../../graphql/project.api';
 
-type Transaction = {
-  amount: number;
-  created: boolean;
-  selectedOption: number;
-  _id: string;
-};
-
-type TransactionData = {
-  transactions: Array<Transaction>;
-  remaining_amount: number;
-  amount: number;
-  project_id: string;
-  status: boolean;
-  total_amount: number;
-  _id: string;
-};
-
 const Project = () => {
   const role = useReactiveVar(roleVar);
   const currentUser = useReactiveVar(userVar);
@@ -83,7 +66,6 @@ const Project = () => {
   const [designModal, setDesignModal] = useState<boolean>(false);
   const [mvpModal, setMvpModal] = useState<boolean>(false);
   const [fullBuildModal, setFullBuildModal] = useState<boolean>(false);
-  const [transactionsData, setTransactionsData] = useState<TransactionData>();
 
   const [
     getProjectsByClientId,
@@ -96,8 +78,10 @@ const Project = () => {
       id: currentUser?.id!,
     },
     onCompleted({ getAllProjectsByClientId }) {
-      if (getAllProjectsByClientId.length > 0)
+      if (getAllProjectsByClientId.length > 0) {
         setProject(getAllProjectsByClientId[0]);
+        navigate(`/project/${getAllProjectsByClientId[0]?.id}`, { replace: true })
+      }
     },
   });
 
@@ -182,7 +166,7 @@ const Project = () => {
   useEffect(() => {
     if (id) {
       getProject({ variables: { id } });
-    } else if (role === 'client') {
+    } else if (role === 'client' && currentUser?.id) {
       getProjectsByClientId({
         variables: {
           id: currentUser?.id!,
@@ -195,31 +179,6 @@ const Project = () => {
     };
   }, [id, role]);
 
-  useEffect(() => {
-    (async () => {
-      if (project) {
-        try {
-          const transactionsResult = await (
-            await fetch(`${import.meta.env.VITE_PAYMENT_API}/transactions`, {
-              method: 'POST',
-              headers: {
-                'Content-Type': 'application/json',
-              },
-              body: JSON.stringify({ project_id: project.id }),
-            })
-          ).json();
-          if (transactionsResult) setTransactionsData(transactionsResult);
-        } catch (err) {
-          console.error(err);
-        }
-      }
-    })();
-
-    return () => {
-      setTransactionsData(undefined);
-    };
-  }, [project]);
-
   const handlePrint = useReactToPrint({
     content: () => printRef.current,
   });