fix: profile page twitter

Scan-Go · Jan 31, 2024 · 5fa9354 · 5fa9354
1 parent 57451ca
commit 5fa9354
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 114 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -17,6 +17,7 @@ import "@ionic/react/css/text-alignment.css";
 import "@ionic/react/css/text-transformation.css";
 
 /* Theme variables */
+import TagPage from "@/pages/Tag/Tag";
 import { IonReactRouter } from "@ionic/react-router";
 import { Suspense, lazy } from "react";
 import { Route } from "react-router";
@@ -29,7 +30,6 @@ import { Routes } from "./routes/routes";
 import TabRoutes from "./routes/tab.route";
 import "./theme/variables.scss";
 
-const TagPage = lazy(() => import("@/pages/Tag/Tag"));
 const SettingsPage = lazy(() => import("@/pages/Settings/Settings"));
 const LoginPage = lazy(() => import("@/pages/auth/login"));
 const RegisterPage = lazy(() => import("@/pages/auth/Register/Register"));
@@ -49,7 +49,7 @@ export default function App() {
 
   return (
     <IonApp>
-      <Suspense fallback={<AppLoading />}>
+      <Suspense fallback={<AppLoading message="Loading route..." />}>
         <IonReactRouter>
           <IonRouterOutlet>
             <Route path={Routes.AppRoot} render={() => <TabRoutes />} />

diff --git a/src/Providers.tsx b/src/Providers.tsx
@@ -2,7 +2,14 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { PropsWithChildren } from "react";
 import { AuthContextProvider } from "./context/AuthContext";
 
-const queryClient = new QueryClient();
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      gcTime: 1000 * 60 * 60 * 24, // 24 hours
+      networkMode: "offlineFirst",
+    },
+  },
+});
 
 export default function Providers(props: PropsWithChildren) {
   return (

diff --git a/src/context/AuthContext.tsx b/src/context/AuthContext.tsx
@@ -1,10 +1,9 @@
 import { auth } from "@/services/firebase.service";
-import { useUserStore } from "@/stores/user.store";
+import { useQueryClient } from "@tanstack/react-query";
 import { User, onAuthStateChanged, signOut } from "firebase/auth";
 import {
   PropsWithChildren,
   createContext,
-  useCallback,
   useContext,
   useEffect,
   useMemo,
@@ -32,11 +31,7 @@ export const AuthContextProvider = ({ children }: PropsWithChildren) => {
   const [isLoadingUser, setIsLoadingUser] = useState(true);
   const [isSignedIn, setIsSignedIn] = useState<boolean>(false);
   const [isInitialized, setIsInitialized] = useState<boolean>(false);
-  const resetState = useUserStore((s) => s.resetState);
-
-  const resetStoreState = useCallback(() => {
-    resetState();
-  }, []);
+  const client = useQueryClient();
 
   useEffect(() => {
     const unsubscribe = onAuthStateChanged(auth, (user) => {
@@ -45,7 +40,6 @@ export const AuthContextProvider = ({ children }: PropsWithChildren) => {
         setUser(user);
       } else {
         setIsSignedIn(false);
-        resetStoreState();
       }
 
       setIsLoadingUser(false);
@@ -56,7 +50,7 @@ export const AuthContextProvider = ({ children }: PropsWithChildren) => {
 
   const logout = useMemo(
     () => async () => {
-      resetStoreState();
+      client.clear();
       await signOut(auth);
     },
     []

diff --git a/src/modules/tag/Tag.module.tsx b/src/modules/tag/Tag.module.tsx
@@ -34,6 +34,7 @@ export default function TagModule(props: TagDetailPageProps) {
   const tagQuery = useQuery({
     queryKey: [QueryKeys.Tag, props.match.params.tagUid],
     queryFn: fetchTag,
+    networkMode: "online",
   });
 
   const fetchProfile = useCallback(() => {
@@ -44,6 +45,7 @@ export default function TagModule(props: TagDetailPageProps) {
     queryKey: [QueryKeys.Profile, tagQuery?.data?.data()?.userUid],
     queryFn: fetchProfile,
     enabled: !!tagQuery?.data?.data()?.userUid && tagQuery.data.exists(),
+    networkMode: "online",
   });
 
   const fetchPhoneNumber = useCallback(() => {
@@ -65,6 +67,7 @@ export default function TagModule(props: TagDetailPageProps) {
       {
         queryKey: [QueryKeys.UserPhone, tagQuery?.data?.data()?.userUid],
         queryFn: fetchPhoneNumber,
+        networkMode: "online",
         enabled:
           !!tagQuery?.data?.data()?.userUid &&
           tagQuery.data.exists() &&
@@ -75,10 +78,12 @@ export default function TagModule(props: TagDetailPageProps) {
           QueryKeys.UserSocialMediaAccounts,
           tagQuery?.data?.data()?.userUid,
         ],
+        networkMode: "online",
         queryFn: fetchSocialMediaAccounts,
         enabled: !!tagQuery?.data?.data()?.userUid && tagQuery.data.exists(),
       },
       {
+        networkMode: "online",
         queryKey: [QueryKeys.Notes, tagQuery?.data?.data()?.userUid],
         queryFn: fetchLatestNotes,
         enabled: !!tagQuery?.data?.data()?.userUid && tagQuery.data.exists(),

diff --git a/src/pages/Profile/ProfilePage.tsx b/src/pages/Profile/ProfilePage.tsx
@@ -1,12 +1,9 @@
 import AppInfoCard, { InfoCardStatus } from "@/components/App/AppInfoCard";
 import AppLoading from "@/components/App/AppLoading";
-import { AuthContext } from "@/context/AuthContext";
-import { QueryStatus } from "@/hooks/base";
-import { useColletionDataOnce } from "@/hooks/useCollectionDataOnce";
-import { IUser } from "@/models/user.model";
+import { useAuthContext } from "@/context/AuthContext";
+import { QueryKeys } from "@/models/query_keys.model";
 import { Routes } from "@/routes/routes";
-import { converter, db } from "@/services/firebase.service";
-import { IUserReducerType, useUserStore } from "@/stores/user.store";
+import { profileService } from "@/services/profile.service";
 import {
   IonAvatar,
   IonButton,
@@ -19,59 +16,53 @@ import {
   IonTitle,
   IonToolbar,
   useIonRouter,
-  useIonViewDidEnter,
 } from "@ionic/react";
-import { doc } from "firebase/firestore";
+import { useQueries } from "@tanstack/react-query";
 import { logoTwitter, settingsOutline } from "ionicons/icons";
-import { useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { useCallback, useMemo } from "react";
 import styles from "./Profile.module.scss";
 
 export default function ProfilePage() {
-  const [profile, setProfile] = useState<IUser | undefined>();
-  const authContext = useContext(AuthContext);
+  const authContext = useAuthContext();
   const router = useIonRouter();
-  const updateUserDispatch = useUserStore((state) => state.dispatch);
-  const storeHasFetched = useUserStore((state) => state.hasBeenFetched);
-  const userFromStore = useUserStore();
-  const docRef = useMemo(
-    () =>
-      doc(db, "profiles", authContext!.user!.uid).withConverter<IUser>(
-        converter()
-      ),
-    []
-  );
+  const [profileQuery, socialMediaAccountsQuery] = useQueries({
+    queries: [
+      {
+        queryKey: [QueryKeys.Profile, authContext.user?.uid],
+        queryFn: async () => {
+          const profile = await profileService.fetchProfile(
+            authContext.user!.uid
+          );
 
-  const _profile = useColletionDataOnce<IUser>(docRef, { isAsync: true });
+          return profile.data();
+        },
+      },
+      {
+        queryKey: [QueryKeys.UserSocialMediaAccounts, authContext.user?.uid],
+        queryFn: async () => {
+          const socialMedia = await profileService.fetchSocialMediaAccounts(
+            authContext.user!.uid
+          );
 
-  useIonViewDidEnter(() => {
-    if (storeHasFetched) {
-      setProfile(userFromStore);
-    } else {
-      _profile.mutate?.call(undefined);
-    }
-  }, [userFromStore, storeHasFetched]);
+          return socialMedia.data();
+        },
+      },
+    ],
+  });
 
-  useEffect(() => {
-    if (_profile.status === QueryStatus.Success) {
-      setProfile(_profile.data);
-      console.log("");
+  const profile = useMemo(() => profileQuery?.data, [profileQuery]);
 
-      updateUserDispatch({
-        type: IUserReducerType.UpdateUser,
-        args: {
-          hasBeenFetched: true,
-          ..._profile.data!,
-        },
-      });
-    }
-  }, [_profile.status]);
+  const socialMediaAccounts = useMemo(
+    () => socialMediaAccountsQuery?.data,
+    [socialMediaAccountsQuery]
+  );
 
   const onLogout = useCallback(async () => {
     await authContext?.logout();
     router.push("/", "root", "replace");
   }, []);
 
-  if (!storeHasFetched && _profile.status === QueryStatus.Error) {
+  if (profileQuery.isError) {
     return (
       <IonPage>
         <IonContent>
@@ -81,7 +72,7 @@ export default function ProfilePage() {
     );
   }
 
-  if (!storeHasFetched && _profile.status === QueryStatus.Loading) {
+  if (profileQuery.isLoading) {
     return <AppLoading />;
   }
 
@@ -118,10 +109,10 @@ export default function ProfilePage() {
             <IonText>{profile?.bio}</IonText>
 
             <IonButtons className="mt-5">
-              {profile?.socialMediaAccounts?.twitter && (
+              {socialMediaAccounts?.twitter && (
                 <IonButton
                   fill="clear"
-                  href={`https://twitter.com/${profile?.socialMediaAccounts.twitter}`}
+                  href={`https://twitter.com/${socialMediaAccounts.twitter}`}
                   target="_blank"
                 >
                   <IonIcon icon={logoTwitter} />

diff --git a/src/services/firebase.service.ts b/src/services/firebase.service.ts
@@ -36,10 +36,10 @@ export const auth = initializeAuth(app, {
 });
 
 if (!import.meta.env.PROD) {
-  connectAuthEmulator(auth, "http://192.168.1.227:9099", {
+  connectAuthEmulator(auth, "http://localhost:9099", {
     disableWarnings: true,
   });
-  connectFirestoreEmulator(db, "192.168.1.227", 8080);
+  connectFirestoreEmulator(db, "localhost", 8080);
 }
 
 export const converter = <T>() => ({

diff --git a/src/stores/user.store.ts b/src/stores/user.store.ts