resolved issue with avatar not updating after changing it

client/ecommerce/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },

client/ecommerce/src/api/axios.tsx

@@ -22,10 +22,15 @@ import {
 import { RequestAccessTokenInterceptor } from "./request-access-token.interceptor";
 import { ResponseOAuthInterceptor } from "./response-auth.interceptor";
 const LIMIT = 5;
-const BASE_URL = "http://localhost:3000";
+let baseUrl;
+if (import.meta.env.VITE_PRODU == "false") {
+  baseUrl = "http://localhost:3000";
+} else {
+  baseUrl = "https://ecommerce-mtkw.onrender.com";
+}
 
 export const axiosApi = axios.create({
-  baseURL: BASE_URL,
+  baseURL: baseUrl,
   withCredentials: true,
 });
 RequestAccessTokenInterceptor(axiosApi);

client/ecommerce/src/components/Navbar.tsx

@@ -31,7 +31,6 @@ import { useNotifications } from "../hooks/useNotifications";
 import { useProductNotifications } from "../hooks/useProductNotifications";
 import { useMarkProductNotificationAsRead } from "../hooks/useMarkProductNotificationAsRead";
 import PopoverPopupState from "./PopoverPopupState";
-import { useUserInfo } from "../hooks/useUserInfo";
 import { useFetchUserInfo } from "../hooks/useFetchUserInfo";
 import { isAdmin } from "../utils/isAdmin";
 
@@ -159,7 +158,7 @@ export const Navbar = () => {
     useNotifications(user.id);
 
   if (!user.username && !user.id) {
-    return;
+    return <NotAuthed />;
   }
   if (isNotificationsLoading) {
     return "isNotificationsLoading...";

client/ecommerce/src/components/PaginatedProducts.tsx

@@ -48,7 +48,13 @@ export const PaginatedProducts = () => {
                   lg={below1200 ? 3 : 12 / 5}
                   md={below1200 ? 3 : 3}
                   xs={below700 ? 6 : 4}
-                  xl={12 / 5}
+                  xl={
+                    page.data.length == 2 || page.data.length == 1
+                      ? 6
+                      : page.data.length >= 4
+                      ? 3
+                      : 4
+                  }
                 >
                   <Card
                     elevation={0}

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

@@ -11,11 +11,12 @@ import { useUserContext } from "../../contexts/UserContext";
 import { useMediaQuery } from "../../hooks/useMediaQuery";
 import { AccountCircle } from "@mui/icons-material";
 import { ChangeEvent, useState } from "react";
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { updateProfile } from "../../api/axios";
 import toast from "react-hot-toast";
 import { useLocation } from "wouter";
 import { User } from "../../types/types";
+import { useFetchUserInfo } from "../../hooks/useFetchUserInfo";
 
 type FormData = {
   country: string;
@@ -28,6 +29,7 @@ export const EditProfile = () => {
   const { user, setUser } = useUserContext();
   const formDataToBackend = new FormData();
   const [, setLocation] = useLocation();
+  const queryClient = useQueryClient();
   const [selectedFile, setSelectedFile] = useState<File | "">("");
   const below960 = useMediaQuery(960);
   const [formData, setFormData] = useState<FormData>({
@@ -44,12 +46,17 @@ export const EditProfile = () => {
     const file = uploadedFiles[0];
     setSelectedFile(file);
   };
+  const { refetch } = useFetchUserInfo(user.id);
   const mutation = useMutation({
     mutationKey: ["profile", "update"],
     mutationFn: updateProfile,
-    onSuccess: (user: User) => {
-      setUser(user);
+
+    onSuccess: (userAvatar: string) => {
+      if (typeof userAvatar === "string") {
+        setUser((prevUser) => ({ ...prevUser, avatar: userAvatar }));
+      }
       toast.success("Profile updated");
+      refetch();
       setLocation("/");
     },
     onError: (err) => {
@@ -120,19 +127,19 @@ export const EditProfile = () => {
                 alignItems: "center",
               }}
             >
-              {user.avatar ? (
+              {selectedFile ? (
+                <Avatar
+                  src={URL.createObjectURL(selectedFile)}
+                  sx={{ height: "64px", width: "64px", marginRight: "16px" }}
+                />
+              ) : user.avatar ? (
                 <Avatar
                   src={user.avatar}
                   sx={{
                     width: "64px",
                     height: "64px",
                   }}
                 />
-              ) : selectedFile ? (
-                <Avatar
-                  sx={{ height: "64px", width: "64px", marginRight: "16px" }}
-                  src={URL.createObjectURL(selectedFile)}
-                />
               ) : (
                 <AccountCircle
                   sx={{
@@ -144,6 +151,7 @@ export const EditProfile = () => {
                   }}
                 />
               )}
+
               <Button
                 component="label"
                 size="small"

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

@@ -114,7 +114,7 @@ export const Product = () => {
             alignItems: "flex-start",
             gap: "20px",
             height:
-              userProducts?.length == 1 ? (below800 ? "auto" : "78vh") : "",
+              userProducts?.length == 1 ? (below800 ? "auto" : "auto") : "",
           }}
         >
           <Box

server/ecommerce/ormconfig.ts

@@ -1,21 +1,8 @@
-import { User } from 'src/utils/entities/user.entity';
 import { PostgresConnectionOptions } from 'typeorm/driver/postgres/PostgresConnectionOptions';
 import 'dotenv/config';
-import { Product } from 'src/utils/entities/product.entity';
-import { Image } from 'src/utils/entities/image.entity';
-import { Profile } from 'src/utils/entities/profile.entity';
-import { Follow } from 'src/utils/entities/followers.entity';
-import { Conversation } from 'src/utils/entities/conversation.entity';
-import { Message } from 'src/utils/entities/message.entity';
-import { Avatar } from 'src/utils/entities/avatar.entity';
-import { Notification } from 'src/utils/entities/notification.entity';
-import { ProductNotification } from 'src/utils/entities/product-notification.entity';
-import { Review } from 'src/utils/entities/review.entity';
-import { AdminNotifications } from 'src/utils/entities/adminNotifications.entity';
 import { DataSource } from 'typeorm';
-
 export let config: PostgresConnectionOptions;
-if (process.env.IS_PRODUCTION == 'true') {
+if (process.env.NODE_ENV == 'production') {
   config = {
     type: 'postgres',
     url: process.env.EXTERNAL_POSTGRES_DB_URL,
@@ -28,15 +15,12 @@ if (process.env.IS_PRODUCTION == 'true') {
 } else {
   config = {
     type: 'postgres',
-    // database: process.env.POSTGRES_DB,
-    // host: 'localhost',
-    url: 'postgres://ecommerce_postgresql_db_user:CDU8Anc5t3lUy8gXtrXD71l1oHuMFr0C@dpg-cnu7cr21hbls73fcag40-a.oregon-postgres.render.com/ecommerce_postgresql_db',
-    ssl: {
-      rejectUnauthorized: false,
-    },
-    // port: 5432,
-    // username: process.env.POSTGRES_USER,
-    // password: process.env.POSTGRES_PASSWORD,
+    database: process.env.POSTGRES_DB,
+    host: 'localhost',
+
+    port: 5432,
+    username: process.env.POSTGRES_USER,
+    password: process.env.POSTGRES_PASSWORD,
     entities: ['dist/**/*.entity.js'],
     migrations: ['dist/db/migrations/*.js'],
 

server/ecommerce/src/admin-notifications/admin-notifications.service.ts

@@ -12,13 +12,11 @@ export class AdminNotificationsService {
   ) {}
 
   async create(dto: adminNotificationDto, userId: number) {
-    console.log(dto);
     const newAdminNotification = this.adminNotificationsRepository.create({
       action: dto.action,
       username: dto.username,
       userId,
     });
-    console.log(newAdminNotification);
 
     return await this.adminNotificationsRepository.save(newAdminNotification);
   }

server/ecommerce/src/main.ts

@@ -18,6 +18,7 @@ async function bootstrap() {
   });
   const { httpAdapter } = app.get(HttpAdapterHost);
   app.useGlobalFilters(new ZodExceptionFilter(httpAdapter));
+
   await app.listen(process.env.PORT || 3000);
 }
 bootstrap();

server/ecommerce/src/users/users.controller.ts

@@ -50,6 +50,10 @@ export class UsersController {
       aboutYou?: string;
       country?: 'Poland' | 'England';
     };
-    await this.usersService.updateUserProfile(userInfo, file, authUser.sub);
+    return await this.usersService.updateUserProfile(
+      userInfo,
+      file,
+      authUser.sub,
+    );
   }
 }

server/ecommerce/src/users/users.service.ts

@@ -323,7 +323,8 @@ export class UsersService {
 
         user.avatar = url;
         await this.usersRepository.save(user);
-        return user;
+
+        return user.avatar;
       } catch (error) {
         return 'Failed uploading avatar to s3 bucket';
       }