Skip to content

Commit

Permalink
fix inbox not closing conversation after deleting one
Browse files Browse the repository at this point in the history
  • Loading branch information
radekm2000 committed May 2, 2024
1 parent 7e5eae4 commit 5e159b9
Show file tree
Hide file tree
Showing 7 changed files with 153 additions and 96 deletions.
44 changes: 31 additions & 13 deletions README.md
Original file line number Diff line number Diff line change
@@ -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)

<font color='#e50000'>**Render might delay first requests for 50 seconds or more due to inactivity so please be patient.**</font>

Expand Down Expand Up @@ -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)

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)
Original file line number Diff line number Diff line change
Expand Up @@ -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<React.SetStateAction<boolean>>;
}) => {
const { user } = useUserContext();
const [, navigate] = useLocation();
Expand All @@ -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");
Expand Down
60 changes: 60 additions & 0 deletions client/ecommerce/src/components/inbox/DisplayFilteredUsers.tsx
Original file line number Diff line number Diff line change
@@ -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<React.SetStateAction<string>>
setChosenUserId: React.Dispatch<React.SetStateAction<number | null>>
setIsSearchedIconClicked: React.Dispatch<React.SetStateAction<boolean>>
};

export const DisplayFilteredUsers = ({ filteredUsers, setSearchInputValue, setChosenUserId, setIsSearchedIconClicked }: Props) => {
return (
<Card
sx={{
width: "100%",
height: "281px",
boxShadow: "none",
overflowY: "auto",
}}
>
{filteredUsers.map((user, index) => (
<CardActionArea
onClick={() => {
setSearchInputValue(user.username);
setChosenUserId(user.id);

setIsSearchedIconClicked(false);
}}
>
<CardContent key={index} sx={{ display: "flex" }}>
<Box sx={{ display: "flex", gap: "10px" }}>
{user.avatar ? (
<Avatar src={user.avatar} />
) : (
<AccountCircle
sx={{
color: "grey",
width: "24px",
height: "24px",
}}
/>
)}
<Typography>{user.username}</Typography>
</Box>
</CardContent>
<Divider />
</CardActionArea>
))}
</Card>
);
};
1 change: 1 addition & 0 deletions client/ecommerce/src/components/inbox/InboxChatInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@ export const InboxChatInput = ({
receiverId: parseInt(userId),
senderId: meUser.id,
});

}}
onChange={(e) => setMessage(e.target.value)}
onKeyDown={(e) => handleKeyDown(e)}
Expand Down
40 changes: 40 additions & 0 deletions client/ecommerce/src/components/inbox/InboxSidebarNavbar.tsx
Original file line number Diff line number Diff line change
@@ -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<React.SetStateAction<boolean>>;
};
export const InboxSidebarNavbar = ({ setIsNewChatClicked }: Props) => {
const [, setLocation] = useLocation();
const handleClick = () => {
setIsNewChatClicked(true);
setLocation("/inbox/new");
};
return (
<Box
sx={{
height: "52px",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
borderRight: "1px solid rgba(23, 23, 23, 0.08)",
borderBottom: "1px solid rgba(23, 23, 23, 0.08)",
padding: "4px",
}}
>
<Typography sx={{ fontSize: "16px", padding: "8px", fontWeight: "500" }}>
Inbox
</Typography>
<Button onClick={handleClick}>
<AddCommentOutlinedIcon
sx={{
color: "#007782",
width: "24px",
height: "24px",
}}
/>
</Button>
</Box>
);
};
5 changes: 3 additions & 2 deletions client/ecommerce/src/components/pages/AddProduct.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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%'
}}
>
<Box sx={{ marginRight: selectedFile ? "auto" : "" }}>
Expand All @@ -220,13 +221,13 @@ export const AddProduct = () => {
startIcon={!selectedFile ? <AddIcon /> : ""}
disableRipple
sx={{
justifyContent: "center",
alignItems: "center",
padding: "14px",
textTransform: "none",
fontSize: "14px",
color: "#007782",
border: "1px solid #007782",

}}
>
<Typography sx={{ fontSize: "16px" }}>
Expand Down
96 changes: 15 additions & 81 deletions client/ecommerce/src/components/pages/Inbox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -39,7 +41,6 @@ export const Inbox = () => {
const below1200 = useMediaQuery(1200);
const below960 = useMediaQuery(960);
const below1600 = useMediaQuery(1600);
// const [selectedImage, setSelectedImage] = useState<File | "">("");

const [isNewChatClicked, setIsNewChatClicked] = useState(false);
const handleClick = () => {
Expand Down Expand Up @@ -176,6 +177,9 @@ export const Inbox = () => {
/>
<ConversationDetailsContent
selectedUserConversation={selectedUserConversation}
setIsConversationDetailsOpen={
setisConversationDetailsOpen
}
/>
</>
) : (
Expand Down Expand Up @@ -241,32 +245,7 @@ export const Inbox = () => {
borderRight: "1px solid rgba(23, 23, 23, 0.08)",
}}
>
<Box
sx={{
height: "52px",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
borderRight: "1px solid rgba(23, 23, 23, 0.08)",
borderBottom: "1px solid rgba(23, 23, 23, 0.08)",
padding: "4px",
}}
>
<Typography
sx={{ fontSize: "16px", padding: "8px", fontWeight: "500" }}
>
Inbox
</Typography>
<Button onClick={handleClick}>
<AddCommentOutlinedIcon
sx={{
color: "#007782",
width: "24px",
height: "24px",
}}
/>
</Button>
</Box>
<InboxSidebarNavbar setIsNewChatClicked={setIsNewChatClicked} />
<InboxSidebar
setSelectedUserId={setSelectedUserId}
recipientsOfSidebarConversations={
Expand Down Expand Up @@ -310,44 +289,12 @@ export const Inbox = () => {
</Box>
<Divider />
{debouncedInput && filteredUsers && isSearchedIconClicked && (
<Card
sx={{
width: "100%",
height: "281px",
boxShadow: "none",
overflowY: "auto",
}}
>
{filteredUsers.map((user, index) => (
<CardActionArea
onClick={() => {
setSearchInputValue(user.username);
setChosenUserId(user.id);

setIsSearchedIconClicked(false);
}}
>
<CardContent key={index} sx={{ display: "flex" }}>

<Box sx={{ display: "flex", gap: "10px" }}>
{user.avatar ? (
<Avatar src={user.avatar} />
) : (
<AccountCircle
sx={{
color: "grey",
width: "24px",
height: "24px",
}}
/>
)}
<Typography sx={{}}>{user.username}</Typography>
</Box>
</CardContent>
<Divider />
</CardActionArea>
))}
</Card>
<DisplayFilteredUsers
filteredUsers={filteredUsers}
setChosenUserId={setChosenUserId}
setIsSearchedIconClicked={setIsSearchedIconClicked}
setSearchInputValue={setSearchInputValue}
/>
)}
</Box>

Expand All @@ -359,20 +306,6 @@ export const Inbox = () => {
/>
</Box>
)}
{/* check if userId is valid (find user with that userId) */}
{/* {userId && (
<>
<InboxChatNavbar
selectedUserConversation={selectedUserConversation}
/>
<Box sx={{ display: "block", width: "100%" }}>
<InboxChatInput
selectedUserConversation={selectedUserConversation}
userId={extractUserIdFromParam(userId)}
/>
</Box>
</>
)} */}
</Box>
</Box>
<Box sx={{ width: below1200 ? "none" : "25%" }}></Box>
Expand Down Expand Up @@ -484,8 +417,9 @@ export const Inbox = () => {
<Route path="/inbox/:userId">
<ExistingChat />
</Route>
<Route path="/inbox/new"></Route>
<SelectUserToNewChat />
<Route path="/inbox/new">
<SelectUserToNewChat />
</Route>
</Switch>
);
};

0 comments on commit 5e159b9

Please sign in to comment.