fix: redirect to app if user has been login

AppFlowy-IO · Feb 6, 2025 · 7a14024 · 7a14024
1 parent 41fbcf7
commit 7a14024
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 16 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -16,7 +16,6 @@ import UseCases from '@/components/product/use-cases';
 import ScrollIcons from '@/components/shared/scroll-icons';
 import Image from 'next/image';
 import iconsBg from '@/assets/images/product/icons-bg.png';
-
 import React from 'react';
 
 export default function Page() {
@@ -41,7 +40,7 @@ export default function Page() {
       </div>
       <div className={'af-container'}>
         <div className={'af-box section-3'}>
-          <div className='glow'></div>
+          <div className="glow"></div>
           <h2 className={'section-3-title'}>
             AppFlowy AI{' '}
             <span
@@ -60,7 +59,7 @@ export default function Page() {
             </div>
             <div className={'cards'}>
               <div className={'card'}>
-                <div className='glow'></div>
+                <div className="glow"></div>
                 <AiLocalIcon />
                 <div className={'card-title'}>
                   AI model selection
@@ -71,7 +70,7 @@ export default function Page() {
                 </div>
               </div>
               <div className={'card'}>
-                <div className='glow'></div>
+                <div className="glow"></div>
                 <CollaborativeIcon />
                 <div className={'card-title'}>
                   Collaborative
@@ -82,7 +81,7 @@ export default function Page() {
               </div>
 
               <div className={'card'}>
-                <div className='glow'></div>
+                <div className="glow"></div>
                 <AiModelIcon />
                 <div className={'card-title'}>
                   Contextual

diff --git a/components/product/main-products.tsx b/components/product/main-products.tsx
@@ -9,6 +9,7 @@ import Website from '@/components/icons/website';
 import { TemplateIcon, KanbanIcon, ProjectsIcon, AiIcon } from '@/components/product/icons';
 import { TabPanel } from '@/components/shared/tab-panel';
 import { useAutoPlay } from '@/lib/hooks/use-auto-play';
+import { useClient } from '@/lib/hooks/use-client';
 import MuiTab from '@mui/material/Tab';
 import MuiTabs from '@mui/material/Tabs';
 import { useInView } from 'framer-motion';
@@ -17,10 +18,23 @@ import React, { useEffect, useMemo } from 'react';
 
 function MainProducts() {
   const [value, setValue] = React.useState('tasks');
+  const { isClient } = useClient();
   const handleChange = (_: React.SyntheticEvent, newValue: string) => {
     setValue(newValue);
   };
 
+  useEffect(() => {
+    if(!isClient) {
+      return;
+    }
+
+    const token = window.localStorage.getItem('token');
+
+    if(token) {
+      window.location.href = '/app';
+    }
+  }, [isClient]);
+
   const tabOptions = useMemo(() => {
     return [
       { value: 'ai', label: 'AI', icon: <AiIcon /> },
@@ -40,16 +54,22 @@ function MainProducts() {
   });
 
   useEffect(() => {
-    if (!inView) {
+    if(!inView) {
       stop();
     } else {
       start();
     }
   }, [inView, start, stop]);
 
   return (
-    <div ref={ref} className={'main-product'}>
-      <MuiTabs value={value} onChange={handleChange}>
+    <div
+      ref={ref}
+      className={'main-product'}
+    >
+      <MuiTabs
+        value={value}
+        onChange={handleChange}
+      >
         {tabOptions.map((tab) => (
           <MuiTab
             onClick={() => start()}
@@ -61,13 +81,26 @@ function MainProducts() {
           />
         ))}
       </MuiTabs>
-      <TabPanel value={value} index={'ai'}>
+      <TabPanel
+        value={value}
+        index={'ai'}
+      >
         <div className={'ai-image'}>
-          <Image src={AIImage.src} loading={'eager'} className={'object-cover'} alt={'AI'} width={1024} height={648} />
+          <Image
+            src={AIImage.src}
+            loading={'eager'}
+            className={'object-cover'}
+            alt={'AI'}
+            width={1024}
+            height={648}
+          />
         </div>
       </TabPanel>
 
-      <TabPanel value={value} index={'projects'}>
+      <TabPanel
+        value={value}
+        index={'projects'}
+      >
         <div className={'ai-image'}>
           <Image
             src={Grid.src}
@@ -79,12 +112,25 @@ function MainProducts() {
           />
         </div>
       </TabPanel>
-      <TabPanel value={value} index={'tasks'}>
+      <TabPanel
+        value={value}
+        index={'tasks'}
+      >
         <div className={'ai-image'}>
-          <Image src={Tasks.src} priority={true} className={'object-cover'} width={1024} height={648} alt={'Tasks'} />
+          <Image
+            src={Tasks.src}
+            priority={true}
+            className={'object-cover'}
+            width={1024}
+            height={648}
+            alt={'Tasks'}
+          />
         </div>
       </TabPanel>
-      <TabPanel value={value} index={'templates'}>
+      <TabPanel
+        value={value}
+        index={'templates'}
+      >
         <div className={'ai-image'}>
           <Image
             src={Templates.src}
@@ -96,9 +142,19 @@ function MainProducts() {
           />
         </div>
       </TabPanel>
-      <TabPanel value={value} index={'sites'}>
+      <TabPanel
+        value={value}
+        index={'sites'}
+      >
         <div className={'ai-image'}>
-          <Image src={Sites.src} loading={'eager'} className={'object-cover'} alt={'sites'} width={1024} height={648} />
+          <Image
+            src={Sites.src}
+            loading={'eager'}
+            className={'object-cover'}
+            alt={'sites'}
+            width={1024}
+            height={648}
+          />
         </div>
       </TabPanel>
     </div>