Added realtime DB deletion on post delete

nidhish-nayak · Mar 13, 2024 · 67990bc · 67990bc
1 parent 17c226d
commit 67990bc
Show file tree

Hide file tree

Showing 18 changed files with 241 additions and 201 deletions.
diff --git a/client/index.html b/client/index.html
@@ -2,24 +2,7 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
-        <link
-            rel="icon"
-            type="image/png"
-            href="/title-logo-8x8.png"
-            sizes="8x8"
-        />
-        <link
-            rel="icon"
-            type="image/png"
-            href="/title-logo-16x16.png"
-            sizes="16x16"
-        />
-        <link
-            rel="icon"
-            type="image/png"
-            href="/title-logo-32x32.png"
-            sizes="32x32"
-        />
+        <link rel="icon" type="image/png" href="/logo.png" sizes="16x16" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Trendz.</title>
     </head>

diff --git a/client/public/logo.png b/client/public/logo.png
diff --git a/client/public/title-logo-16x16.png b/client/public/title-logo-16x16.png
diff --git a/client/public/title-logo-32x32.png b/client/public/title-logo-32x32.png
diff --git a/client/public/title-logo-8x8.png b/client/public/title-logo-8x8.png
diff --git a/client/src/components/logout/logout.tsx b/client/src/components/logout/logout.tsx
@@ -25,7 +25,7 @@ const Logout: React.FC<LogoutProps> = (props) => {
         try {
             const res = await axios.post(API_URL);
             if (res.status === 200) {
-                sessionStorage.removeItem("user");
+                localStorage.removeItem("user");
                 navigate("/login");
             } else {
                 console.log(res.data);

diff --git a/client/src/components/posts/posts.tsx b/client/src/components/posts/posts.tsx
@@ -52,7 +52,7 @@ const Posts = () => {
 
     if (error) {
         console.error(error.message);
-        sessionStorage.removeItem("user");
+        localStorage.removeItem("user");
         navigate("/login");
         alert("Please login again!");
         return <PostsError />;

diff --git a/client/src/components/rightbar/activity/activity.tsx b/client/src/components/rightbar/activity/activity.tsx
@@ -38,12 +38,24 @@ const Activity = () => {
         },
     });
 
+    const activityDeleteMutation = useMutation({
+        mutationFn: (table_id: number) =>
+            axiosRequest.delete(`/activities/${table_id}`),
+        onSuccess: () => {
+            setActivity(null);
+            return queryClient.invalidateQueries({ queryKey: ["activities"] });
+        },
+        onError(error) {
+            console.error("Activity deletion failed: ", error);
+        },
+    });
+
     // Subscribe to INSERT events for posts table
     useEffect(() => {
-        let postChannel: RealtimeChannel;
+        let postAddChannel: RealtimeChannel;
 
         if (isRealtime === true) {
-            postChannel = supabase
+            postAddChannel = supabase
                 .channel("inserted-post")
                 .on(
                     "postgres_changes",
@@ -59,12 +71,30 @@ const Activity = () => {
                         });
                     }
                 )
+                .on(
+                    "postgres_changes",
+                    {
+                        event: "DELETE",
+                        schema: "public",
+                        table: "posts",
+                    },
+                    (payload) => {
+                        setPrevActivity(activity);
+                        setActivity(payload);
+                        queryClient.invalidateQueries({
+                            queryKey: ["activities"],
+                        });
+                        queryClient.invalidateQueries({
+                            queryKey: ["posts"],
+                        });
+                    }
+                )
                 .subscribe();
         }
 
         return () => {
-            if (postChannel) {
-                postChannel.unsubscribe();
+            if (postAddChannel) {
+                postAddChannel.unsubscribe();
             }
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -74,12 +104,13 @@ const Activity = () => {
         if (
             activity &&
             activityMutation.isPending === false &&
-            prevActivity !== activity
+            prevActivity !== activity &&
+            activity.eventType === "INSERT"
         ) {
             const table_name: string = activity.table;
-            const table_id: number = activity.new.id;
             const message = "Added a new post";
             const activity_created_at: string = activity.commit_timestamp;
+            const table_id: number = activity.new.id;
             const user_id: number = activity.new.userId;
 
             if (user_id !== currentUser?.id) {
@@ -96,16 +127,26 @@ const Activity = () => {
                 });
             }
         }
+
+        if (
+            activity &&
+            activityMutation.isPending === false &&
+            prevActivity !== activity &&
+            activity.eventType === "DELETE"
+        ) {
+            const table_id: number = activity.old.id;
+
+            return activityDeleteMutation.mutate(table_id);
+        }
     }, [
         activity,
+        activityDeleteMutation,
         activityMutation,
         currentUser?.id,
         prevActivity,
         queryClient,
     ]);
 
-    console.log(activity);
-
     const getActivities = async (): Promise<ACTIVITY_GET_TYPES[]> => {
         const res = await axiosRequest.get("/activities");
         return res.data;

diff --git a/client/src/components/rightbar/activity/activity.types.ts b/client/src/components/rightbar/activity/activity.types.ts
@@ -1,9 +1,17 @@
-import { RealtimePostgresInsertPayload } from "@supabase/supabase-js";
+import {
+    RealtimePostgresDeletePayload,
+    RealtimePostgresInsertPayload,
+} from "@supabase/supabase-js";
 
-export type REALTIME_TYPE = RealtimePostgresInsertPayload<{
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    [key: string]: any;
-}>;
+export type REALTIME_TYPE =
+    | RealtimePostgresInsertPayload<{
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          [key: string]: any;
+      }>
+    | RealtimePostgresDeletePayload<{
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          [key: string]: any;
+      }>;
 
 export type ACTIVITY_POST_TYPES = {
     table_name: string;

diff --git a/client/src/components/rightbar/online/online.tsx b/client/src/components/rightbar/online/online.tsx
@@ -0,0 +1,50 @@
+import "../rightbar.scss";
+
+const Online = () => {
+    return (
+        <div className="item">
+            <div className="item-container">
+                <div className="item-title-realtime">Online Friends</div>
+                <div
+                    className="item-realtime"
+                    title="Show your online status to others - Heavy server load!"
+                >
+                    <p className="realtime-title">Realtime</p>
+                    <div className="realtime-circle" />
+                </div>
+            </div>
+            <div className="user">
+                <div className="userInfo">
+                    <img
+                        src="https://images.pexels.com/photos/4881619/pexels-photo-4881619.jpeg?auto=compress&cs=tinysrgb&w=1600"
+                        alt="user-image"
+                    />
+                    <div className="online" />
+                    <span>Jane Doe</span>
+                </div>
+            </div>
+            <div className="user">
+                <div className="userInfo">
+                    <img
+                        src="https://images.pexels.com/photos/4881619/pexels-photo-4881619.jpeg?auto=compress&cs=tinysrgb&w=1600"
+                        alt="user-image"
+                    />
+                    <div className="online" />
+                    <span>Jane Doe</span>
+                </div>
+            </div>
+            <div className="user">
+                <div className="userInfo">
+                    <img
+                        src="https://images.pexels.com/photos/4881619/pexels-photo-4881619.jpeg?auto=compress&cs=tinysrgb&w=1600"
+                        alt="user-image"
+                    />
+                    <div className="online" />
+                    <span>Jane Doe</span>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Online;
diff --git a/client/src/components/rightbar/rightbar.tsx b/client/src/components/rightbar/rightbar.tsx
@@ -1,4 +1,5 @@
 import Activity from "./activity/activity";
+import Online from "./online/online";
 import "./rightbar.scss";
 import Suggested from "./suggested/suggested";
 
@@ -8,50 +9,7 @@ const Rightbar = () => {
             <div className="container">
                 <Suggested />
                 <Activity />
-                <div className="item">
-                    <div className="item-container">
-                        <div className="item-title-realtime">
-                            Online Friends
-                        </div>
-                        <div
-                            className="item-realtime"
-                            title="Realtime updates cause heavy load on servers. Default state is set to disabled."
-                        >
-                            <p className="realtime-title">Realtime</p>
-                            <div className="realtime-circle" />
-                        </div>
-                    </div>
-                    <div className="user">
-                        <div className="userInfo">
-                            <img
-                                src="https://images.pexels.com/photos/4881619/pexels-photo-4881619.jpeg?auto=compress&cs=tinysrgb&w=1600"
-                                alt="user-image"
-                            />
-                            <div className="online" />
-                            <span>Jane Doe</span>
-                        </div>
-                    </div>
-                    <div className="user">
-                        <div className="userInfo">
-                            <img
-                                src="https://images.pexels.com/photos/4881619/pexels-photo-4881619.jpeg?auto=compress&cs=tinysrgb&w=1600"
-                                alt="user-image"
-                            />
-                            <div className="online" />
-                            <span>Jane Doe</span>
-                        </div>
-                    </div>
-                    <div className="user">
-                        <div className="userInfo">
-                            <img
-                                src="https://images.pexels.com/photos/4881619/pexels-photo-4881619.jpeg?auto=compress&cs=tinysrgb&w=1600"
-                                alt="user-image"
-                            />
-                            <div className="online" />
-                            <span>Jane Doe</span>
-                        </div>
-                    </div>
-                </div>
+                <Online />
             </div>
         </div>
     );

diff --git a/client/src/components/stories/stories.tsx b/client/src/components/stories/stories.tsx
@@ -20,6 +20,7 @@ import { GROUPED_STORIES_TYPE, formatStories } from "./stories.util";
 const Stories = () => {
     const { currentUser } = useContext(AuthContext);
     const queryClient = useQueryClient();
+    if (!currentUser) throw Error("User not found!");
 
     const [isPostOpen, setIsPostOpen] = useState(false);
     const [localStory, setLocalStory] = useState<string | null>(null);
@@ -116,8 +117,6 @@ const Stories = () => {
     if (getStoryError || !getStoryData)
         throw Error("get_stories fetch failed from server!");
 
-    if (!currentUser) return <div>User not found!</div>;
-
     const { profilePic } = currentUser;
     const unformattedStories: GET_STORIES_TYPE = getStoryData;
     const formattedStories: GROUPED_STORIES_TYPE = formatStories(getStoryData);

diff --git a/client/src/context/authContext.tsx b/client/src/context/authContext.tsx
@@ -25,12 +25,12 @@ export const AuthContext = createContext<AuthContextTypes>({
 
 export const AuthProvider = ({ children }: { children: ReactNode }) => {
     const [currentUser, setCurrentUser] = useState(() => {
-        const storedUser = sessionStorage.getItem("user");
+        const storedUser = localStorage.getItem("user");
         return JSON.parse(storedUser!);
     });
 
     useEffect(() => {
-        sessionStorage.setItem("user", JSON.stringify(currentUser));
+        localStorage.setItem("user", JSON.stringify(currentUser));
     }, [currentUser]);
 
     const login = async (inputs: LoginTypes): Promise<LoginResponseTypes> => {

diff --git a/client/src/context/darkModeContext.tsx b/client/src/context/darkModeContext.tsx
@@ -12,13 +12,13 @@ export const DarkModeContext = createContext<DarkModeContextTypes>({
 
 export const DarkModeProvider = ({ children }: { children: ReactNode }) => {
     const [darkMode, setDarkMode] = useState(() => {
-        const storedDarkMode = sessionStorage.getItem("darkMode");
+        const storedDarkMode = localStorage.getItem("darkMode");
         // Set default mode = dark
         return storedDarkMode ? JSON.parse(storedDarkMode) : true;
     });
 
     useEffect(() => {
-        sessionStorage.setItem("darkMode", darkMode);
+        localStorage.setItem("darkMode", darkMode);
     }, [darkMode]);
 
     const toggleTheme = () => {

diff --git a/client/src/pages/profile/components/editProfile.tsx b/client/src/pages/profile/components/editProfile.tsx
@@ -33,7 +33,7 @@ const EditProfile = ({ closeModal }: { closeModal: () => void }) => {
             axiosRequest.put("/users", formData),
         onSuccess: () => {
             if (formData === null) return alert("Null formData sent to server");
-            sessionStorage.setItem("user", JSON.stringify(formData));
+            localStorage.setItem("user", JSON.stringify(formData));
             queryClient.invalidateQueries({ queryKey: ["users", id] });
 
             closeModal();