Skip to content

Commit

Permalink
add lazy loading
Browse files Browse the repository at this point in the history
  • Loading branch information
@radekm2000
radekm2000 committed Apr 14, 2024
1 parent e71d042 commit b710871
Show file tree
Hide file tree
Showing 21 changed files with 327 additions and 244 deletions.
125 changes: 3 additions & 122 deletions client/ecommerce/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,139 +23,20 @@ import { ChatNotificationsProvider } from "./contexts/ChatNotificationsContext";
import { ProductNotificationProvider } from "./contexts/ProductNotificationContext";
import { Layout } from "./components/Layout";
import { AdminDashboard } from "./components/pages/AdminDashboard";
import { FeedbackNotifications } from "./components/AdminDashboard/FeedbackNotifications";
import { RoutePath } from "./config/constants/navigation";
import { Routes } from "./routes/Routes";

const stripePromise = loadStripe(import.meta.env.VITE_STRIPE_KEY);

function App() {
// return (
// <>
// <UserProvider>
// <ProductProvider>
// <ChatNotificationsProvider>
// <ProductNotificationProvider>
// <Elements stripe={stripePromise}>
// <Switch>
// <Route path="/register" component={Register}></Route>
// <Route path="/login" component={Login}></Route>
// <Route path="/">
// <Navbar />
// <MainPage />
// </Route>
// <Route path="/products/:productId-:productTitle">
// <Navbar />
// <Product />
// </Route>
// <Route path="/members/:userId">
// <Navbar />
// <Member />
// </Route>
// <Route path="/products/new">
// <Navbar />
// <AddProduct />
// </Route>
// <Route path="/members/:userId/followers">
// <Navbar />
// <Followers />
// </Route>
// <Route path="/settings/profile">
// <Navbar />
// <EditProfile />
// </Route>
// <Route path="/catalog/men">
// <Navbar />
// <MenCatalog />
// </Route>
// <Route path="/catalog/women">
// <Navbar />
// <WomenCatalog />
// </Route>
// <Route path="/q/:search_text?">
// <Navbar />
// <SearchTextResults />
// </Route>
// <Route path="/inbox/:userId*">
// <Navbar />
// <Inbox />
// </Route>
// <Route path="/success">
// <PaymentSuccess />
// </Route>
// <Route path="/cancel">
// <PaymentCancel />
// </Route>

// <Route path="/members/:userId/followings">
// <Navbar />
// <Followings />
// </Route>
// <Route path="/:rest*">{() => <Redirect to="/" />}</Route>
// </Switch>
// <Toaster />
// </Elements>
// </ProductNotificationProvider>
// </ChatNotificationsProvider>
// </ProductProvider>
// </UserProvider>
// </>
// );
return (
<>
<UserProvider>
<ProductProvider>
<ChatNotificationsProvider>
<ProductNotificationProvider>
<Elements stripe={stripePromise}>
<Switch>
<Route path="/register" component={Register}></Route>
<Route path="/login" component={Login}></Route>
<Route path="/success">
<PaymentSuccess />
</Route>
<Route path="/cancel">
<PaymentCancel />
</Route>
<Layout>
<Route path="/">
<MainPage />
</Route>
<Route path="/products/:productId-:productTitle">
<Product />
</Route>
<Route path="/members/:userId">
<Member />
</Route>
<Route path="/products/new">
<AddProduct />
</Route>
<Route path="/members/:userId/followers">
<Followers />
</Route>
<Route path="/settings/profile">
<EditProfile />
</Route>
<Route path="/catalog/men">
<MenCatalog />
</Route>
<Route path="/catalog/women">
<WomenCatalog />
</Route>
<Route path="/q/:search_text?">
<SearchTextResults />
</Route>
<Route path="/inbox/:userId*">
<Inbox />
</Route>
<Route path="/dashboard/:tab">
<AdminDashboard />
</Route>

<Route path="/members/:userId/followings">
<Followings />
</Route>
</Layout>
<Route path="/:rest*">{() => <Redirect to="/" />}</Route>
</Switch>
<Routes />
<Toaster />
</Elements>
</ProductNotificationProvider>
Expand Down
2 changes: 2 additions & 0 deletions client/ecommerce/src/api/axios.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
import { RequestAccessTokenInterceptor } from "./request-access-token.interceptor";
import { ResponseOAuthInterceptor } from "./response-auth.interceptor";
import { FeedbackFormData } from "../components/FeedbackDialog";
import { ResponseErrorInterceptor } from "./responseError.interceptor";
const LIMIT = 5;
const baseUrl = "http://localhost:3000";
// if (import.meta.env.VITE_NETLIFY == "true") {
Expand All @@ -32,6 +33,7 @@ export const axiosApi = axios.create({
baseURL: baseUrl,
withCredentials: true,
});
ResponseErrorInterceptor(axiosApi);
RequestAccessTokenInterceptor(axiosApi);
ResponseOAuthInterceptor(axiosApi);
export const registerUser = async ({
Expand Down
40 changes: 40 additions & 0 deletions client/ecommerce/src/api/responseError.interceptor.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import { AxiosError, AxiosInstance } from "axios";
import { z } from "zod";
import { isValidationError } from "../utils/isValidationError";

export const ResponseErrorInterceptor = (axios: AxiosInstance) => {
axios.interceptors.response.use(undefined, (error: AxiosError) => {
if (!error.response) {
return Promise.reject(error);
}

const parseResult = z
.object({ message: z.string().optional() })
.safeParse(error.response.data);
const message = parseResult.success ? parseResult.data.message : undefined;

if (400 <= error.response.status && error.response.status < 500) {
const responseData = error.response.data as unknown;
if (isValidationError(responseData)) {
return Promise.reject({
...error,
...responseData,
});
} else {
return Promise.reject({
...error,
message: message || error.message,
});
}
}

if (error.response.status >= 500) {
return Promise.reject({
...error,
message: message || "Unknown error occurred",
});
}

return Promise.reject(error);
});
};
18 changes: 3 additions & 15 deletions client/ecommerce/src/components/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ export const Navbar = () => {
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const [mobileMoreAnchorEl, setMobileMoreAnchorEl] =
useState<null | HTMLElement>(null);
const [, setLocation] = useLocation();
const [location, setLocation] = useLocation();
const [openDialogContent, setOpenDialogContent] = useState<boolean>(false);
const isMenuOpen = Boolean(anchorEl);
const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
Expand Down Expand Up @@ -256,19 +256,7 @@ export const Navbar = () => {
setLocation("inbox");
handleMobileMenuClose();
}}
>
<Link to="/inbox">
<IconButton size="large" aria-label="show new mails" color="inherit">
<Badge
color="error"
badgeContent={shownNotificationsInboxNumber.length}
>
<MailIcon />
</Badge>
</IconButton>
</Link>
<p>Messages</p>
</MenuItem>
></MenuItem>

<MenuItem onClick={handleProfileMenuOpen}>
<IconButton
Expand Down Expand Up @@ -504,7 +492,7 @@ export const Navbar = () => {
{renderMobileMenu}
{renderMenu}
</Box>
{below800 ? (
{below800 && location === "/" ? (
<Box
sx={{
padding: "16px 16px",
Expand Down
63 changes: 1 addition & 62 deletions client/ecommerce/src/components/PaginatedProducts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ export const PaginatedProducts = () => {
</Link>
<CardContent>
<Typography sx={{ fontSize: "14px", color: "#171717" }}>
PLN {item.price}.00
USD {item.price}.00
</Typography>
</CardContent>
</Card>
Expand All @@ -126,65 +126,4 @@ export const PaginatedProducts = () => {
<div ref={ref}>{isFetchingNextPage && "Loading..."}</div>
</div>
);
// return (
// <Grid container>
// {products.map((product, index) => (
// <Grid item key={index} xl={12 / 5}>
// <Card
// elevation={0}
// sx={{
// width: "fit-content",
// height: "fit-content",
// padding: "8px",
// }}
// >
// <Link href={`/members/${product.user.id}`}>
// <CardContent
// sx={{
// display: "flex",
// alignItems: "center",
// justifyContent: "flex-start",
// cursor: "pointer",
// }}
// >
// {product.user.avatar ? (
// <Avatar
// sx={{ width: "24px", height: "24px" }}
// alt="user-avatar"
// src={product.user.avatar}
// />
// ) : (
// <AccountCircle
// sx={{ color: "grey", width: "24px", height: "24px" }}
// />
// )}
// <Typography
// sx={{
// fontSize: "12px",
// color: "#757575",
// paddingLeft: "8px",
// }}
// >
// {product.user.username}
// </Typography>
// </CardContent>
// </Link>
// <Link href={`products/${product.id}-${product.title}`}>
// <CardMedia
// alt={product.title}
// component="img"
// sx={{ width: "100%", height: "330px", cursor: "pointer" }}
// image={product.images[0].imageUrl}
// ></CardMedia>
// </Link>
// <CardContent>
// <Typography sx={{ fontSize: "14px", color: "#171717" }}>
// PLN {product.price}.00
// </Typography>
// </CardContent>
// </Card>
// </Grid>
// ))}
// </Grid>
// );
};
1 change: 0 additions & 1 deletion client/ecommerce/src/components/ProfileInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,6 @@ export const ProfileInfo = ({
const below900 = useMediaQuery(900);
const mutation = useFollowUser(user.id);
const { mutate } = mutation;
console.log(user);
const handleFollowButtonClick = (
e: React.MouseEvent<HTMLButtonElement, MouseEvent>
) => {
Expand Down
1 change: 0 additions & 1 deletion client/ecommerce/src/components/conversation-details/ConversationDetailsContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ export const ConversationDetailsContent = ({
navigate("/inbox");
},
onError: (error) => {
console.log(error);
toast.error("Something went wrong");
},
});
Expand Down
5 changes: 5 additions & 0 deletions client/ecommerce/src/components/inbox/InboxNewChat.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@


export const InboxNewChat = () => {
return <div>InboxNewChat</div>;
};
2 changes: 1 addition & 1 deletion client/ecommerce/src/components/inbox/InboxSidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export const InboxSidebar = ({
setSelectedUserId: React.Dispatch<React.SetStateAction<number>>;
recipientsOfSidebarConversations:
| RecipientOfSidebarConversation[]
| undefined;
| undefined
notifications: FetchedNotifications[];
}) => {
// const { notifications } = useNotificationsContext();
Expand Down
6 changes: 4 additions & 2 deletions client/ecommerce/src/components/pages/AddProduct.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import toast from "react-hot-toast";
import { Redirect } from "wouter";
import { useUserContext } from "../../contexts/UserContext";
import { useAddAdminNotification } from "../../hooks/useAddAdminNotification";
import axios from "axios";

//important note --------------
// change button component prop to label if you want to upload files
Expand Down Expand Up @@ -55,8 +56,9 @@ export const AddProduct = () => {
setSuccess(true);
toast.success("Product added");
},
onError: () => {
toast.error("Try again");
onError: (err) => {
console.log(err);
toast.error(err.message);
},
});
const adminNotificationMutation = useAddAdminNotification();
Expand Down
Loading

0 comments on commit b710871

Please sign in to comment.