diff --git a/README.md b/README.md index eab7a10..3637d1c 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # E-commerce App -## Check the app live at [ecommerce](https://exquisite-pasca-338883.netlify.app/login) +## Check the app live at [ecommerce](https://exquisite-pasca-338883.netlify.app/login) **Render might delay first requests for 50 seconds or more due to inactivity so please be patient.** @@ -51,16 +51,34 @@ This app is a simplified version of **Vinted**, following a similar layout. Belo - **Frontend:** - React using Vite. - ## Images - ![Add feedback](/readmeImages/addFeedback.png) - ![Add Product](/readmeImages/addProduct.png) - ![Admin Dashboard](/readmeImages/AdminDashboardFeedbacks.png) - ![Edit profile](/readmeImages/EditProfile.png) - ![Add feedback](/readmeImages/addFeedback.png) - ![After Payment](/readmeImages/PaymentSuccess.png) - ![Product Page](/readmeImages/productPage.png) - ![Inbox](/readmeImages/Inbox.png) - ![Profile Page](/readmeImages/ProfilePage.png) - ![Catalog with filtering](/readmeImages/WomanCatalog.png) - ![Notifications in navbar](/readmeImages/mainPageShowNotifications.png) \ No newline at end of file + +Add feedback +![Add feedback](/readmeImages/addFeedback.png) + +Add product +![Add Product](/readmeImages/addProduct.png) + +Admin Dashboard +![Admin Dashboard](/readmeImages/AdminDashboardFeedbacks.png) + +Edit profile page +![Edit profile](/readmeImages/EditProfile.png) + +Profile page +![Profile Page](/readmeImages/ProfilePage.png) + +After stripe payment +![After Payment](/readmeImages/PaymentSuccess.png) + +Product page +![Product Page](/readmeImages/productPage.png) + +Inbox +![Inbox](/readmeImages/Inbox.png) + +Catalog with filtering +![Catalog with filtering](/readmeImages/WomanCatalog.png) + +Notifications + main page +![Notifications in navbar](/readmeImages/mainPageShowNotifications.png) diff --git a/client/ecommerce/src/components/conversation-details/ConversationDetailsContent.tsx b/client/ecommerce/src/components/conversation-details/ConversationDetailsContent.tsx index 7c3108b..ab90735 100644 --- a/client/ecommerce/src/components/conversation-details/ConversationDetailsContent.tsx +++ b/client/ecommerce/src/components/conversation-details/ConversationDetailsContent.tsx @@ -10,8 +10,10 @@ import { deleteConversation } from "../../api/axios"; import toast from "react-hot-toast"; export const ConversationDetailsContent = ({ selectedUserConversation, + setIsConversationDetailsOpen, }: { selectedUserConversation: Conversation | undefined; + setIsConversationDetailsOpen: React.Dispatch>; }) => { const { user } = useUserContext(); const [, navigate] = useLocation(); @@ -31,6 +33,7 @@ export const ConversationDetailsContent = ({ toast.success("Conversation deleted"); queryClient.invalidateQueries({ queryKey: ["conversations"] }); navigate("/inbox"); + setIsConversationDetailsOpen(false); }, onError: (error) => { toast.error("Something went wrong"); diff --git a/client/ecommerce/src/components/inbox/DisplayFilteredUsers.tsx b/client/ecommerce/src/components/inbox/DisplayFilteredUsers.tsx new file mode 100644 index 0000000..5066dff --- /dev/null +++ b/client/ecommerce/src/components/inbox/DisplayFilteredUsers.tsx @@ -0,0 +1,60 @@ +import { + Avatar, + Box, + Card, + CardActionArea, + CardContent, + Divider, + Typography, +} from "@mui/material"; +import { UserWithAvatar } from "../../types/types"; +import { AccountCircle } from "@mui/icons-material"; + +type Props = { + filteredUsers: UserWithAvatar[]; + setSearchInputValue: React.Dispatch> + setChosenUserId: React.Dispatch> + setIsSearchedIconClicked: React.Dispatch> +}; + +export const DisplayFilteredUsers = ({ filteredUsers, setSearchInputValue, setChosenUserId, setIsSearchedIconClicked }: Props) => { + return ( + + {filteredUsers.map((user, index) => ( + { + setSearchInputValue(user.username); + setChosenUserId(user.id); + + setIsSearchedIconClicked(false); + }} + > + + + {user.avatar ? ( + + ) : ( + + )} + {user.username} + + + + + ))} + + ); +}; diff --git a/client/ecommerce/src/components/inbox/InboxChatInput.tsx b/client/ecommerce/src/components/inbox/InboxChatInput.tsx index 4ba42c5..1a31792 100644 --- a/client/ecommerce/src/components/inbox/InboxChatInput.tsx +++ b/client/ecommerce/src/components/inbox/InboxChatInput.tsx @@ -101,6 +101,7 @@ export const InboxChatInput = ({ receiverId: parseInt(userId), senderId: meUser.id, }); + }} onChange={(e) => setMessage(e.target.value)} onKeyDown={(e) => handleKeyDown(e)} diff --git a/client/ecommerce/src/components/inbox/InboxSidebarNavbar.tsx b/client/ecommerce/src/components/inbox/InboxSidebarNavbar.tsx new file mode 100644 index 0000000..dee7aa1 --- /dev/null +++ b/client/ecommerce/src/components/inbox/InboxSidebarNavbar.tsx @@ -0,0 +1,40 @@ +import AddCommentOutlinedIcon from "@mui/icons-material/AddCommentOutlined"; +import { Box, Button, Typography } from "@mui/material"; +import { useLocation } from "wouter"; + +type Props = { + setIsNewChatClicked: React.Dispatch>; +}; +export const InboxSidebarNavbar = ({ setIsNewChatClicked }: Props) => { + const [, setLocation] = useLocation(); + const handleClick = () => { + setIsNewChatClicked(true); + setLocation("/inbox/new"); + }; + return ( + + + Inbox + + + + ); +}; diff --git a/client/ecommerce/src/components/pages/AddProduct.tsx b/client/ecommerce/src/components/pages/AddProduct.tsx index 970c1a8..0b85ce0 100644 --- a/client/ecommerce/src/components/pages/AddProduct.tsx +++ b/client/ecommerce/src/components/pages/AddProduct.tsx @@ -202,9 +202,10 @@ export const AddProduct = () => { sx={{ border: "1px dashed rgba(37,44,51,0.1)", display: "flex", - justifyent: "center", + justifyContent: "center", alignItems: "center", minHeight: "170px", + width: '100%' }} > @@ -220,13 +221,13 @@ export const AddProduct = () => { startIcon={!selectedFile ? : ""} disableRipple sx={{ - justifyContent: "center", alignItems: "center", padding: "14px", textTransform: "none", fontSize: "14px", color: "#007782", border: "1px solid #007782", + }} > diff --git a/client/ecommerce/src/components/pages/Inbox.tsx b/client/ecommerce/src/components/pages/Inbox.tsx index 749fe30..b017ea0 100644 --- a/client/ecommerce/src/components/pages/Inbox.tsx +++ b/client/ecommerce/src/components/pages/Inbox.tsx @@ -30,6 +30,8 @@ import { InboxSearchCard } from "../inbox/InboxSearchCard"; import { useDebounce } from "../../hooks/useDebounce"; import { useFetchUsersBySearchInput } from "../../hooks/useFetchUsersBySearchInput"; import { AccountCircle } from "@mui/icons-material"; +import { DisplayFilteredUsers } from "../inbox/DisplayFilteredUsers"; +import { InboxSidebarNavbar } from "../inbox/InboxSidebarNavbar"; export const Inbox = () => { const params = useParams(); @@ -39,7 +41,6 @@ export const Inbox = () => { const below1200 = useMediaQuery(1200); const below960 = useMediaQuery(960); const below1600 = useMediaQuery(1600); - // const [selectedImage, setSelectedImage] = useState(""); const [isNewChatClicked, setIsNewChatClicked] = useState(false); const handleClick = () => { @@ -176,6 +177,9 @@ export const Inbox = () => { /> ) : ( @@ -241,32 +245,7 @@ export const Inbox = () => { borderRight: "1px solid rgba(23, 23, 23, 0.08)", }} > - - - Inbox - - - + { {debouncedInput && filteredUsers && isSearchedIconClicked && ( - - {filteredUsers.map((user, index) => ( - { - setSearchInputValue(user.username); - setChosenUserId(user.id); - - setIsSearchedIconClicked(false); - }} - > - - - - {user.avatar ? ( - - ) : ( - - )} - {user.username} - - - - - ))} - + )} @@ -359,20 +306,6 @@ export const Inbox = () => { /> )} - {/* check if userId is valid (find user with that userId) */} - {/* {userId && ( - <> - - - - - - )} */} @@ -484,8 +417,9 @@ export const Inbox = () => { - - + + + ); };