add inbox skeleton and move skeletons to separate directory

client/ecommerce/src/api/axios.tsx

@@ -21,7 +21,7 @@ import { RequestAccessTokenInterceptor } from "./request-access-token.intercepto
 import { ResponseOAuthInterceptor } from "./response-auth.interceptor";
 import { FeedbackFormData } from "../components/FeedbackDialog";
 const LIMIT = 5;
-const baseUrl = "https://ecommerce-123.onrender.com";
+const baseUrl = "http://localhost:3000";
 // if (import.meta.env.VITE_NETLIFY == "true") {
 //   baseUrl = "https://ecommerce-123.onrender.com";
 // } else {

client/ecommerce/src/components/Navbar.tsx

@@ -34,7 +34,7 @@ import { useMarkProductNotificationAsRead } from "../hooks/useMarkProductNotific
 import PopoverPopupState from "./PopoverPopupState";
 import { useFetchUserInfo } from "../hooks/useFetchUserInfo";
 import { isAdmin } from "../utils/isAdmin";
-import { NavbarSkeleton } from "./NavbarSkeleton";
+import { NavbarSkeleton } from "./skeletons/NavbarSkeleton";
 import { FeedbackDialog } from "./FeedbackDialog";
 
 export const NotAuthed = () => {

client/ecommerce/src/components/InboxChatContent.tsx → client/ecommerce/src/components/inbox/InboxChatContent.tsx

@@ -8,8 +8,8 @@ import {
   Typography,
 } from "@mui/material";
 import { useEffect, useRef } from "react";
-import { Conversation, UserWithFollows } from "../types/types";
-import { useUserContext } from "../contexts/UserContext";
+import { Conversation, UserWithFollows } from "../../types/types";
+import { useUserContext } from "../../contexts/UserContext";
 
 export const InboxChatContent = ({
   selectedUserConversation,

client/ecommerce/src/components/InboxChatInput.tsx → client/ecommerce/src/components/inbox/InboxChatInput.tsx

@@ -1,17 +1,15 @@
 import { Box, Input } from "@mui/material";
 import {
-  QueryClient,
   useMutation,
   useQueryClient,
 } from "@tanstack/react-query";
 
 import { useState } from "react";
-import { createConversationAndSendFirstMessage } from "../api/axios";
+import { createConversationAndSendFirstMessage } from "../../api/axios";
 import { useLocation } from "wouter";
-import { Conversation } from "../types/types";
-import { useNotificationsContext } from "../contexts/ChatNotificationsContext";
-import { useUserContext } from "../contexts/UserContext";
-import { useNotificationMutation } from "../hooks/useNotificationMutation";
+import { Conversation } from "../../types/types";
+import { useUserContext } from "../../contexts/UserContext";
+import { useNotificationMutation } from "../../hooks/useNotificationMutation";
 
 export const InboxChatInput = ({
   userId,

client/ecommerce/src/components/InboxChatNavbar.tsx → client/ecommerce/src/components/inbox/InboxChatNavbar.tsx

@@ -1,8 +1,8 @@
 import { Box, Button, Typography } from "@mui/material";
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
-import { Conversation } from "../types/types";
-import { getRecipientFromConversation } from "../utils/getRecipientFromConversation";
-import { useUserContext } from "../contexts/UserContext";
+import { Conversation } from "../../types/types";
+import { getRecipientFromConversation } from "../../utils/getRecipientFromConversation";
+import { useUserContext } from "../../contexts/UserContext";
 
 export const InboxChatNavbar = ({
   selectedUserConversation,

client/ecommerce/src/components/InboxSidebar.tsx → client/ecommerce/src/components/inbox/InboxSidebar.tsx

@@ -4,9 +4,9 @@ import { useLocation, useParams } from "wouter";
 import {
   FetchedNotifications,
   RecipientOfSidebarConversation,
-} from "../types/types";
+} from "../../types/types";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { markNotificationsAsRead } from "../api/axios";
+import { markNotificationsAsRead } from "../../api/axios";
 const displayLastMessage = (message: string) => {
   if (message.length > 20) {
     return message.slice(0, 20).concat("...");

client/ecommerce/src/components/pages/Inbox.tsx

@@ -1,11 +1,11 @@
 import { Box, Button, Container, Typography } from "@mui/material";
 import { useMediaQuery } from "../../hooks/useMediaQuery";
 import AddCommentOutlinedIcon from "@mui/icons-material/AddCommentOutlined";
-import { InboxSidebar } from "../InboxSidebar";
-import { InboxChatNavbar } from "../InboxChatNavbar";
-import { InboxChatContent } from "../InboxChatContent";
+import { InboxSidebar } from "../inbox/InboxSidebar";
+import { InboxChatNavbar } from "../inbox/InboxChatNavbar";
+import { InboxChatContent } from "../inbox/InboxChatContent";
 import { Route, Switch, useLocation, useParams } from "wouter";
-import { InboxChatInput } from "../InboxChatInput";
+import { InboxChatInput } from "../inbox/InboxChatInput";
 import { useAllConversations } from "../../hooks/useAllConversations";
 import { useUserContext } from "../../contexts/UserContext";
 import { getRecipientFromConversation } from "../../utils/getRecipientFromConversation";
@@ -14,6 +14,7 @@ import { useUserConversations } from "../../hooks/useUserConversations";
 import { ConversationDetailsNavbar } from "../conversation-details/ConversationDetailsNavbar";
 import { ConversationDetailsContent } from "../conversation-details/ConversationDetailsContent";
 import { useNotifications } from "../../hooks/useNotifications";
+import { InboxSkeleton } from "../skeletons/InboxSkeleton";
 
 export const Inbox = () => {
   const params = useParams();
@@ -37,18 +38,16 @@ export const Inbox = () => {
     isLoading: isSelectedUserConversationsLoading,
   } = useUserConversations(selectedUserId);
 
-  if (isSelectedUserConversationsLoading) {
-    return "isLoading...";
-  }
-  if (isNotificationsLoading) {
-    return "notifications loading...";
-  }
   if (!notificationsReceived) {
     return "no Notifications";
   }
 
-  if (isConversationsLoading) {
-    return "isLoading...";
+  if (
+    isSelectedUserConversationsLoading ||
+    isNotificationsLoading ||
+    isConversationsLoading
+  ) {
+    return <InboxSkeleton />;
   }
 
   const extractUserIdFromParam = (param: string) => {

client/ecommerce/src/components/pages/MainPage.tsx

@@ -5,7 +5,7 @@ import { Box, Typography } from "@mui/material";
 import { useAllProducts } from "../../hooks/useAllProducts";
 import { NotAuthed } from "../Navbar";
 import { PaginatedProducts } from "../PaginatedProducts";
-import { MainPageSkeleton } from "../MainPageSkeleton";
+import { MainPageSkeleton } from "../skeletons/MainPageSkeleton";
 
 export const MainPage = () => {
   const { user, setUser } = useUserContext();

client/ecommerce/src/components/pages/Member.tsx

@@ -6,8 +6,8 @@ import { useUserInfo } from "../../hooks/useUserInfo";
 import BasicTabs from "../TabPanel";
 import { useEffect, useState } from "react";
 import { compareDesc, formatDistanceToNowStrict } from "date-fns";
-import { UserProfileSkeleton } from "../UserProfileSkeleton";
-import MemberProductsSkeleton from "../MemberProductsSkeleton";
+import { UserProfileSkeleton } from "../skeletons/UserProfileSkeleton";
+import MemberProductsSkeleton from "../skeletons/MemberProductsSkeleton";
 
 export const Member = () => {
   const [tab, setTab] = useState("");

client/ecommerce/src/components/pages/MenCatalog.tsx

@@ -19,7 +19,7 @@ import { BrandButton } from "../filter-buttons/BrandButton";
 import { SortByPriceButton } from "../filter-buttons/SortByPriceButton";
 import { useFilteredProducts } from "../../hooks/useFilteredProducts";
 import { AccountCircle } from "@mui/icons-material";
-import { CatalogSkeleton } from "../CatalogSkeleton";
+import { CatalogSkeleton } from "../skeletons/CatalogSkeleton";
 
 export const MenCatalog = () => {
   const below1200 = useMediaQuery(1200);

client/ecommerce/src/components/pages/PaymentCancel.tsx

@@ -6,7 +6,7 @@ import { useUserContext } from "../../contexts/UserContext";
 import { useQuery } from "@tanstack/react-query";
 import { axiosApi } from "../../api/axios";
 import { useUserFromAccessToken } from "../../hooks/useUserFromAccessToken";
-import { PaymentCancelSkeleton } from "../PaymentCancelSkeleton";
+import { PaymentCancelSkeleton } from "../skeletons/PaymentCancelSkeleton";
 export const PaymentCancel = () => {
   const [, setLocation] = useLocation();
   const { user, setUser } = useUserContext();

client/ecommerce/src/components/pages/PaymentSuccess.tsx

@@ -9,7 +9,7 @@ import { axiosApi } from "../../api/axios";
 import { useGetBasicUserInfo } from "../../hooks/useGetBasicUserInfo";
 import { ReviewForm } from "../ratingSystem/ReviewForm";
 import { useMediaQuery } from "../../hooks/useMediaQuery";
-import { PaymentSuccessSkeleton } from "../PaymentSuccessSkeleton";
+import { PaymentSuccessSkeleton } from "../skeletons/PaymentSuccessSkeleton";
 import { useAddAdminNotification } from "../../hooks/useAddAdminNotification";
 
 export const PaymentSuccess = () => {
@@ -68,11 +68,8 @@ export const PaymentSuccess = () => {
       });
     }
   }, [ownerData, user, itemPrice, mutateAdminNotification]);
-  if (isLoading) {
-    return "user info is loading...";
-  }
 
-  if (isSessionObjLoading && !ownerData) {
+  if ((isSessionObjLoading && !ownerData) || isLoading) {
     return <PaymentSuccessSkeleton />;
   }
   const handleButtonClick = () => {

client/ecommerce/src/components/pages/Product.tsx

@@ -12,7 +12,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useUserContext } from "../../contexts/UserContext";
 import { useDeleteProduct } from "../../hooks/useDeleteProduct";
 import { useAddAdminNotification } from "../../hooks/useAddAdminNotification";
-import { ProductSkeleton } from "../ProductSkeleton";
+import { ProductSkeleton } from "../skeletons/ProductSkeleton";
 
 export const Product = () => {
   const stripe = useStripe();

client/ecommerce/src/components/pages/WomenCatalog.tsx

@@ -19,7 +19,7 @@ import { BrandButton } from "../filter-buttons/BrandButton";
 import { SortByPriceButton } from "../filter-buttons/SortByPriceButton";
 import { useFilteredProducts } from "../../hooks/useFilteredProducts";
 import { AccountCircle } from "@mui/icons-material";
-import { CatalogSkeleton } from "../CatalogSkeleton";
+import { CatalogSkeleton } from "../skeletons/CatalogSkeleton";
 
 export const WomenCatalog = () => {
   const below1200 = useMediaQuery(1200);

client/ecommerce/src/components/skeletons/InboxSkeleton.tsx

@@ -0,0 +1,80 @@
+import { Box, Container, Skeleton } from "@mui/material";
+import React from "react";
+const Sidebar = () => {
+  return (
+    <Box
+      sx={{
+        width: "30%",
+        borderRight: "1px solid rgba(23, 23, 23, 0.08)",
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
+      <Box
+        sx={{
+          borderBottom: "1px solid rgba(23, 23, 23, 0.08)",
+          marginTop: "50px",
+        }}
+      ></Box>
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "10px",
+          padding: "8px",
+        }}
+      >
+        {Array(7)
+          .fill(7)
+          .map((_, index) => (
+            <Box
+              sx={{
+                display: "flex",
+                justifyContent: "flex-start",
+                alignItems: "center",
+                gap: "10px",
+              }}
+            >
+              <Skeleton
+                variant="circular"
+                sx={{ height: "48px", width: "48px" }}
+              ></Skeleton>
+              <Skeleton
+                variant="text"
+                sx={{ width: "30%", height: "20px" }}
+              ></Skeleton>
+            </Box>
+          ))}
+      </Box>
+    </Box>
+  );
+};
+
+const InboxContainer = () => {
+  return (
+    <Container
+      maxWidth={false}
+      sx={{
+        maxWidth: "1280px",
+        margin: "0px 150px",
+        display: "flex",
+        padding: "20px 20px",
+        minHeight: "500px",
+      }}
+    >
+      <Box
+        sx={{
+          width: "75%",
+          border: "1px solid rgba(23, 23, 23, 0.08)",
+          display: "flex",
+        }}
+      >
+        <Sidebar />
+        <Box sx={{ width: "70%" }}></Box>
+      </Box>
+    </Container>
+  );
+};
+export const InboxSkeleton = () => {
+  return <InboxContainer></InboxContainer>;
+};

client/ecommerce/src/components/PaymentSuccessSkeleton.tsx → client/ecommerce/src/components/skeletons/PaymentSuccessSkeleton.tsx

@@ -6,7 +6,7 @@ import {
   Skeleton,
   TextField,
 } from "@mui/material";
-import { useMediaQuery } from "../hooks/useMediaQuery";
+import { useMediaQuery } from "../../hooks/useMediaQuery";
 const DisplayPaymentInfoSkeleton = () => {
   const below960 = useMediaQuery(960);
   return (

client/ecommerce/src/components/ProductSkeleton.tsx → client/ecommerce/src/components/skeletons/ProductSkeleton.tsx

@@ -1,5 +1,5 @@
 import { Box, Skeleton } from "@mui/material";
-import { useMediaQuery } from "../hooks/useMediaQuery";
+import { useMediaQuery } from "../../hooks/useMediaQuery";
 
 export const ProductSkeleton = () => {
   const below960 = useMediaQuery(960);