Merge pull request #138 from karrotmvp/develop

Minor fixes and refactor state management
karrotmvp · Dec 11, 2021 · b61283d · b61283d
2 parents 01f92c1 + 195e654
commit b61283d
Show file tree

Hide file tree

Showing 42 changed files with 568 additions and 1,102 deletions.
diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1 user-scalable=no"
+    />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Minigame" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import '@karrotframe/navigator/index.css';
 import { Navigator, Screen } from '@karrotframe/navigator';
 import { Home } from 'pages/Home';
@@ -10,68 +10,19 @@ import { KarrotClickerGame } from 'pages/KarrotClicker/Game';
 import { KarrotClickerLeaderboard } from 'pages/KarrotClicker/Leaderboard';
 import { Survey } from 'pages/Survey';
 import { Mission } from 'pages/Mission';
-// import { LoadingScreen } from 'components/LoadingScreen';
-
-import {
-  createFirebaseAnalytics,
-  loadFromEnv as loadFirebaseAnalyticsConfig,
-} from 'services/analytics/firebase';
-import { AnalyticsContext, emptyAnalytics } from 'services/analytics';
-import {
-  KarrotMarketMiniContext,
-  emptyKarrotMarketMini,
-} from 'services/karrotMarketMini';
-import {
-  createKarrotMarketMini,
-  loadFromEnv as loadKarrotMarketMiniConfig,
-} from 'services/karrotMarket/mini';
-
-import {
-  useAccessToken,
-  useSignAccessToken,
-  useUserData,
-  useUser,
-} from 'hooks';
+import { useAccessToken, useSignAccessToken, useUser, useMini } from 'hooks';
 import { useMinigameApi } from 'services/api/minigameApi';
-
+import { useAnalytics } from 'services/analytics/firebase';
 import { v4 as uuidv4 } from 'uuid';
+import { RefererEnum } from 'redux/user';
 
 const App: React.FC = () => {
-  // const dispatch = useDispatch();
+  const karrotMini = useMini();
   const minigameApi = useMinigameApi();
-  const { setRegionInfo, setTownInfo, setIsInstalled } = useUserData();
+  const analytics = useAnalytics();
   const { accessToken } = useAccessToken();
   const { signAccessToken, removeCookie } = useSignAccessToken();
-  const [analytics, setAnalytics] = useState(emptyAnalytics);
-  const [karrotMarketMini, setKarrotMarketMini] = useState(
-    emptyKarrotMarketMini
-  );
-
-  const { saveUserInfo, setMissionPreference } = useUser();
-
-  // Firebase Analytics가 설정되어 있으면 인스턴스를 초기화하고 교체합니다.
-  useEffect(() => {
-    try {
-      // check analytics
-      const config = loadFirebaseAnalyticsConfig();
-      const analytics = createFirebaseAnalytics(config);
-      setAnalytics(analytics);
-    } catch (error) {
-      console.error(error);
-    }
-  }, []);
-  // Mini...
-  useEffect(() => {
-    try {
-      // check karrot-mini
-      const karrotMarketMiniConfig = loadKarrotMarketMiniConfig();
-      const karrotMarketMini = createKarrotMarketMini(karrotMarketMiniConfig);
-      setKarrotMarketMini(karrotMarketMini);
-    } catch (error) {
-      console.error(error);
-      // no-op
-    }
-  }, []);
+  const { setUser, setTown, setMission, setSubscription } = useUser();
 
   const getQueryParams = () => {
     const searchParams = new URLSearchParams(window.location.search);
@@ -90,14 +41,19 @@ const App: React.FC = () => {
           data: { data },
         } = await minigameApi.regionApi.getTownInfoUsingGET(regionId);
         if (data) {
-          setTownInfo(data.townId, data.name1, data.name2, data.name3);
+          setTown({
+            id: data.townId,
+            name1: data.name1,
+            name2: data.name2,
+            name3: data.name3,
+          });
         }
       } catch (error) {
         console.error(error);
       }
     },
 
-    [minigameApi.regionApi, setTownInfo]
+    [minigameApi.regionApi, setTown]
   );
 
   const isSubscribed = (installed: string | null) => {
@@ -122,88 +78,86 @@ const App: React.FC = () => {
     }
   };
 
+  const saveQueryString = ({
+    uuid,
+    regionId,
+    isSubscribed,
+    referer,
+  }: {
+    uuid: string;
+    regionId: string;
+    isSubscribed: boolean;
+    referer: RefererEnum;
+  }) => {
+    setUser({ uuid, regionId, referer });
+    setSubscription({ isSubscribed });
+  };
   const checkLocalStorage = () => {
     const missionPreference = localStorage.getItem('missionPreference');
     if (missionPreference !== null) {
       const parsedMissionPreference = JSON.parse(missionPreference);
-      setMissionPreference({
-        isMissionCheckedOut: parsedMissionPreference.isMissionCheckedOut,
-        hasMissionPopupSeen: parsedMissionPreference.hasMissionPopupSeen,
+      setMission({
+        page: { isCheckedOut: parsedMissionPreference.isMissionCheckedOut },
+        popup: { hasSeen: parsedMissionPreference.hasMissionPopupSeen },
       });
     }
   };
 
   useEffect(() => {
-    retrieveUUID();
-    if (accessToken) {
-      removeCookie('accessToken');
-    }
     const [preload, code, regionId, installed, referer] = getQueryParams();
     // if (code)... returning user handler
     // else... new user handler
 
-    analytics.logEvent('launch_app');
+    if (preload === null) {
+      retrieveUUID();
+      if (accessToken) {
+        removeCookie('accessToken');
+      }
+      analytics.logEvent('launch_app');
+
+      setUser({ regionId: regionId as string });
+      getDistrictInfo(regionId as string);
+      console.log(preload, code, regionId, installed, referer);
 
-    setRegionInfo(regionId as string);
-    getDistrictInfo(regionId as string);
-    setIsInstalled(isSubscribed(installed));
-    console.log(preload, code, regionId, installed, referer);
+      saveQueryString({
+        uuid: localStorage.getItem('uuid') as string,
+        regionId: regionId as string,
+        isSubscribed: isSubscribed(installed),
+        referer: referer?.toUpperCase() as RefererEnum,
+      });
+      checkLocalStorage();
+      fetchData(
+        localStorage.getItem('uuid') as string,
+        code as string,
+        regionId as string
+      );
+    }
 
-    saveUserInfo({
-      uuid: localStorage.getItem('uuid'),
-      regionId: regionId as string,
-      isSubscribed: isSubscribed(installed),
-      referer: referer?.toUpperCase() as
-        | 'FEED'
-        | 'SUBSCRIBE_FEED_1'
-        | 'SUBSCRIBE_FEED_2'
-        | 'SUBSCRIBE_FEED_3'
-        | 'NEAR_BY'
-        | 'SHARE_GAME_2048'
-        | 'SHARE_GAME_KARROT'
-        | 'SHARE_PLATFORM'
-        | 'SHARE_COMMUNITY'
-        | 'LOGIN'
-        | 'UNKNOWN',
-    });
-    checkLocalStorage();
-    fetchData(
-      localStorage.getItem('uuid') as string,
-      code as string,
-      regionId as string
-    );
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
-    <AnalyticsContext.Provider value={analytics}>
-      <KarrotMarketMiniContext.Provider value={karrotMarketMini}>
-        <Navigator
-          theme="Cupertino"
-          onClose={() => {
-            karrotMarketMini.close();
-          }}
-        >
-          <Screen path="/" component={Home} />
-          {/* Game 2048 */}
-          <Screen path="/game-2048" component={Game2048Home} />
-          <Screen path="/game-2048/game" component={Game2048Game} />
-          <Screen
-            path="/game-2048/leaderboard"
-            component={Game2048Leaderboard}
-          />
-          {/* Karrot Clicker */}
-          <Screen path="/karrot-clicker" component={KarrotClickerHome} />
-          <Screen path="/karrot-clicker/game" component={KarrotClickerGame} />
-          <Screen
-            path="/karrot-clicker/leaderboard"
-            component={KarrotClickerLeaderboard}
-          />
-          <Screen path="/survey" component={Survey} />
-          <Screen path="/mission" component={Mission} />
-        </Navigator>
-      </KarrotMarketMiniContext.Provider>
-    </AnalyticsContext.Provider>
+    <Navigator
+      theme="Cupertino"
+      onClose={() => {
+        karrotMini.ejectApp();
+      }}
+    >
+      <Screen path="/" component={Home} />
+      {/* Game 2048 */}
+      <Screen path="/game-2048" component={Game2048Home} />
+      <Screen path="/game-2048/game" component={Game2048Game} />
+      <Screen path="/game-2048/leaderboard" component={Game2048Leaderboard} />
+      {/* Karrot Clicker */}
+      <Screen path="/karrot-clicker" component={KarrotClickerHome} />
+      <Screen path="/karrot-clicker/game" component={KarrotClickerGame} />
+      <Screen
+        path="/karrot-clicker/leaderboard"
+        component={KarrotClickerLeaderboard}
+      />
+      <Screen path="/survey" component={Survey} />
+      <Screen path="/mission" component={Mission} />
+    </Navigator>
   );
 };
 

diff --git a/src/assets/Icon/BackIcon.tsx b/src/assets/Icon/BackIcon.tsx
@@ -43,9 +43,9 @@ export const CircleBackIcon: React.FC = () => {
           width="48"
           height="48"
           filterUnits="userSpaceOnUse"
-          color-interpolation-filters="sRGB"
+          colorInterpolationFilters="sRGB"
         >
-          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
           <feColorMatrix
             in="SourceAlpha"
             type="matrix"

diff --git a/src/components/Button/NavigationButton.tsx b/src/components/Button/NavigationButton.tsx
diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts
@@ -1,3 +1,2 @@
 export * from './Button';
-export * from './NavigationButton';
 export * from './RefreshButton';
diff --git a/src/components/Navigation/TopNav.tsx b/src/components/Navigation/TopNav.tsx
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
@@ -1,4 +1,3 @@
-export * from './useUserData';
 export * from './useMini';
 export * from './useAccessToken';
 export * from './useUser';