Use user token

kokororin · Aug 1, 2020 · 09377d2 · 09377d2
1 parent b5d9938
commit 09377d2
Show file tree

Hide file tree

Showing 8 changed files with 77 additions and 25 deletions.
diff --git a/src/containers/GalleryContainer.tsx b/src/containers/GalleryContainer.tsx
@@ -29,6 +29,7 @@ import LanguageSelector from '@/components/LanguageSelector';
 import SearchInput from '@/components/SearchInput';
 import Content, { IContentHandles } from '@/components/Content';
 import Storage from '@/utils/Storage';
+import * as api from '@/utils/api';
 
 import LoginContainer, {
   ILoginContainerHandles,
@@ -66,6 +67,7 @@ const GalleryContainer: React.FunctionComponent<{}> = () => {
   const intl = useIntl();
   const location = useLocation();
   const gallery = React.useContext(GalleryContext);
+  const [shouldLogin, setShouldLogin] = React.useState(true);
   const [isDrawerOpen, setIsDrawerOpen] = React.useState(false);
   const [isSearchByPopularity] = React.useState(false);
   const loginRef = React.useRef<ILoginContainerHandles>(null);
@@ -118,6 +120,15 @@ const GalleryContainer: React.FunctionComponent<{}> = () => {
   };
 
   React.useEffect(() => {
+    if (!api.getAuth()) {
+      setShouldLogin(true);
+      loginRef.current?.open(() => {
+        window.location.reload();
+      });
+      return;
+    }
+    setShouldLogin(false);
+
     if (gallery.fromIllust) {
       onSearch(gallery.word);
       gallery.setFromIllust(false);
@@ -253,20 +264,29 @@ const GalleryContainer: React.FunctionComponent<{}> = () => {
         </div>
       </Drawer>
       <Content ref={contentRef}>
-        <InfiniteScroll
-          distance={200}
-          onLoadMore={onLoadMore}
-          isLoading={gallery.isFetching}
-          hasMore>
-          <div className={classes.root}>
-            <GalleryList items={gallery.items} />
-            {gallery.isFetching && <Loading />}
-            {gallery.isError && (
-              <Message text={intl.formatMessage({ id: 'Failed to Load' })} />
-            )}
-            <Refresh onClick={reRenderContent} />
-          </div>
-        </InfiniteScroll>
+        {shouldLogin ? (
+          <Message
+            code={403}
+            text={intl.formatMessage({
+              id: 'Please sign in to continue'
+            })}
+          />
+        ) : (
+          <InfiniteScroll
+            distance={200}
+            onLoadMore={onLoadMore}
+            isLoading={gallery.isFetching}
+            hasMore>
+            <div className={classes.root}>
+              <GalleryList items={gallery.items} />
+              {gallery.isFetching && <Loading />}
+              {gallery.isError && (
+                <Message text={intl.formatMessage({ id: 'Failed to Load' })} />
+              )}
+              <Refresh onClick={reRenderContent} />
+            </div>
+          </InfiniteScroll>
+        )}
       </Content>
       <LoginContainer ref={loginRef} />
     </>

diff --git a/src/containers/IllustContainer.tsx b/src/containers/IllustContainer.tsx
@@ -151,6 +151,7 @@ interface IIllustContainerRouteInfo {
 }
 
 const IllustContainer: React.FunctionComponent<{}> = () => {
+  const [shouldLogin, setShouldLogin] = React.useState(true);
   const [isSubmitting, setIsSubmitting] = React.useState(false);
   const [boxIndex, setBoxIndex] = React.useState(0);
   const [showBox, setShowBox] = React.useState(false);
@@ -257,6 +258,16 @@ const IllustContainer: React.FunctionComponent<{}> = () => {
   };
 
   React.useEffect(() => {
+    if (!api.getAuth()) {
+      setShouldLogin(true);
+      console.log(loginRef);
+      loginRef.current?.open(() => {
+        window.location.reload();
+      });
+      return;
+    }
+    setShouldLogin(false);
+
     if (!item.id) {
       illust.fetchItem(illustId);
     }
@@ -426,7 +437,6 @@ const IllustContainer: React.FunctionComponent<{}> = () => {
               {illust.isFetchingComments && <Loading />}
             </div>
           </InfiniteScroll>
-          <LoginContainer ref={loginRef} />
         </div>
       );
     } catch (e) {
@@ -455,10 +465,22 @@ const IllustContainer: React.FunctionComponent<{}> = () => {
           <UserButton onClick={() => loginRef.current?.open()} />
         </Toolbar>
       </AppBar>
-      <Content ref={contentRef}>{renderContent()}</Content>
+      <Content ref={contentRef}>
+        {shouldLogin ? (
+          <Message
+            code={403}
+            text={intl.formatMessage({
+              id: 'Please sign in to continue'
+            })}
+          />
+        ) : (
+          renderContent()
+        )}
+      </Content>
       {showBox && (
         <ImageBox items={urls()} index={boxIndex} onClose={onImageClose} />
       )}
+      <LoginContainer ref={loginRef} />
     </>
   ));
 };

diff --git a/src/containers/LoginContainer.tsx b/src/containers/LoginContainer.tsx
@@ -11,7 +11,7 @@ import Login, { ILoginHandles } from '@/components/Login';
 import { AuthContext } from '@/stores/AuthStore';
 
 export interface ILoginContainerHandles {
-  open: () => void;
+  open: (onLogin?: () => any) => void;
   close: () => void;
 }
 
@@ -45,6 +45,7 @@ const LoginContainer = React.forwardRef<ILoginContainerHandles, {}>(
   (props, ref) => {
     const [isSubmitting, setIsSubmitting] = React.useState(false);
     const [authData, setAuthData] = React.useState<any>(null);
+    const [[onLogin], setOnLogin] = React.useState<[() => any]>([() => {}]);
     const intl = useIntl();
     const auth = React.useContext(AuthContext);
     const loginRef = React.useRef<ILoginHandles>(null);
@@ -59,8 +60,11 @@ const LoginContainer = React.forwardRef<ILoginContainerHandles, {}>(
       setAuthData(authData);
     }, []);
 
-    const open = () => {
+    const open = (onLogin?: () => any) => {
       loginRef.current?.open();
+      if (onLogin) {
+        setOnLogin([onLogin]);
+      }
     };
 
     const close = () => {
@@ -105,6 +109,7 @@ const LoginContainer = React.forwardRef<ILoginContainerHandles, {}>(
           setTimeout(() => {
             close();
             loginRef.current?.reset();
+            onLogin();
           }, 1500);
         })
         .then(() => {
@@ -134,8 +139,8 @@ const LoginContainer = React.forwardRef<ILoginContainerHandles, {}>(
     };
 
     React.useImperativeHandle(ref, () => ({
-      open: () => open(),
-      close: () => close()
+      open,
+      close
     }));
 
     return useObserver(() => (

diff --git a/src/locale/en.ts b/src/locale/en.ts
@@ -26,5 +26,6 @@ export default {
   Ranking: 'Ranking',
   HelpToTranslate: 'Help to Translate',
   'This page is not available in your area':
-    'This page is not available in your area.'
+    'This page is not available in your area.',
+  'Please sign in to continue': 'Please sign in to continue'
 };
diff --git a/src/locale/id.ts b/src/locale/id.ts
@@ -26,5 +26,6 @@ export default {
   Ranking: 'Rangking',
   HelpToTranslate: 'Membantu menerjemahkan',
   'This page is not available in your area':
-    'Halaman ini tidak tersedia di daerah Anda.'
+    'Halaman ini tidak tersedia di daerah Anda.',
+  'Please sign in to continue': 'Tolong masuk untuk melanjutkan'
 };
diff --git a/src/locale/ja.ts b/src/locale/ja.ts
@@ -27,5 +27,6 @@ export default {
   Ranking: 'ランキング',
   HelpToTranslate: '翻訳を手伝う',
   'This page is not available in your area':
-    'このページはお住まいの地域からご利用になれません。'
+    'このページはお住まいの地域からご利用になれません。',
+  'Please sign in to continue': '続行するにはログインしてください'
 };
diff --git a/src/locale/ko.ts b/src/locale/ko.ts
@@ -27,5 +27,6 @@ export default {
   Ranking: '순위',
   HelpToTranslate: '번역하는 데 도움이',
   'This page is not available in your area':
-    '귀하의 지역에서는이 페이지를 이용할 수 없습니다.'
+    '귀하의 지역에서는이 페이지를 이용할 수 없습니다.',
+  'Please sign in to continue': '계속하려면 로그인하십시오'
 };
diff --git a/src/locale/zh.ts b/src/locale/zh.ts
@@ -25,5 +25,6 @@ export default {
   Language: '语言',
   Ranking: '排名',
   HelpToTranslate: '帮助我们翻译',
-  'This page is not available in your area': '这个页面不适用于您的国家或地区'
+  'This page is not available in your area': '这个页面不适用于您的国家或地区',
+  'Please sign in to continue': '请登录以继续'
 };