Create home page for offline.

1 files changed, 20 insertions, 68 deletions

diff --git a/Timeline/ClientApp/src/app/home/Home.tsx b/Timeline/ClientApp/src/app/home/Home.tsx
index de25d5c1..b759fa50 100644
--- a/Timeline/ClientApp/src/app/home/Home.tsx
+++ b/Timeline/ClientApp/src/app/home/Home.tsx
@@ -4,16 +4,14 @@ import { Row, Container, Button, Col } from 'reactstrap';
 import { useTranslation } from 'react-i18next';

 

 import { useUser } from '../data/user';

-import { TimelineInfo } from '../data/timeline';

-import { getHttpTimelineClient } from '../http/timeline';

 

 import AppBar from '../common/AppBar';

 import SearchInput from '../common/SearchInput';

-import TimelineBoardAreaWithoutUser from './TimelineBoardAreaWithoutUser';

-import TimelineBoardAreaWithUser from './TimelineBoardAreaWithUser';

+import BoardWithoutUser from './BoardWithoutUser';

+import BoardWithUser from './BoardWithUser';

 import TimelineCreateDialog from './TimelineCreateDialog';

 

-const Home: React.FC = (_) => {

+const Home: React.FC = () => {

   const history = useHistory();

 

   const { t } = useTranslation();

@@ -22,50 +20,6 @@ const Home: React.FC = (_) => {
 

   const [navText, setNavText] = React.useState<string>('');

 

-  const [publicTimelines, setPublicTimelines] = React.useState<

-    TimelineInfo[] | undefined

-  >(undefined);

-  const [ownTimelines, setOwnTimelines] = React.useState<

-    TimelineInfo[] | undefined

-  >(undefined);

-  const [joinTimelines, setJoinTimelines] = React.useState<

-    TimelineInfo[] | undefined

-  >(undefined);

-

-  React.useEffect(() => {

-    let subscribe = true;

-    if (user == null) {

-      setOwnTimelines(undefined);

-      setJoinTimelines(undefined);

-      void getHttpTimelineClient()

-        .listTimeline({ visibility: 'Public' })

-        .then((timelines) => {

-          if (subscribe) {

-            setPublicTimelines(timelines);

-          }

-        });

-    } else {

-      setPublicTimelines(undefined);

-      void getHttpTimelineClient()

-        .listTimeline({ relate: user.username, relateType: 'own' })

-        .then((timelines) => {

-          if (subscribe) {

-            setOwnTimelines(timelines);

-          }

-        });

-      void getHttpTimelineClient()

-        .listTimeline({ relate: user.username, relateType: 'join' })

-        .then((timelines) => {

-          if (subscribe) {

-            setJoinTimelines(timelines);

-          }

-        });

-    }

-    return () => {

-      subscribe = false;

-    };

-  }, [user]);

-

   const [dialog, setDialog] = React.useState<'create' | null>(null);

 

   const goto = React.useCallback((): void => {

@@ -78,14 +32,6 @@ const Home: React.FC = (_) => {
     }

   }, [navText, history]);

 

-  const openCreateDialog = React.useCallback(() => {

-    setDialog('create');

-  }, []);

-

-  const closeDialog = React.useCallback(() => {

-    setDialog(null);

-  }, []);

-

   return (

     <>

       <AppBar />

@@ -101,7 +47,13 @@ const Home: React.FC = (_) => {
               placeholder="@crupest"

               additionalButton={

                 user != null && (

-                  <Button color="success" outline onClick={openCreateDialog}>

+                  <Button

+                    color="success"

+                    outline

+                    onClick={() => {

+                      setDialog('create');

+                    }}

+                  >

                     {t('home.createButton')}

                   </Button>

                 )

@@ -111,16 +63,9 @@ const Home: React.FC = (_) => {
         </Row>

         {(() => {

           if (user == null) {

-            return (

-              <TimelineBoardAreaWithoutUser publicTimelines={publicTimelines} />

-            );

+            return <BoardWithoutUser />;

           } else {

-            return (

-              <TimelineBoardAreaWithUser

-                ownTimelines={ownTimelines}

-                joinTimelines={joinTimelines}

-              />

-            );

+            return <BoardWithUser user={user} />;

           }

         })()}

       </Container>

@@ -142,7 +87,14 @@ const Home: React.FC = (_) => {
           <small className="white-space-no-wrap">公安备案 42112102000124</small>

         </a>

       </footer>

-      {dialog === 'create' && <TimelineCreateDialog open close={closeDialog} />}

+      {dialog === 'create' && (

+        <TimelineCreateDialog

+          open

+          close={() => {

+            setDialog(null);

+          }}

+        />

+      )}

     </>

   );

 };