Merge pull request #143 from hello-slide/fix/start-show-api-logic

Fix/start show api logic
hello-slide · Sep 19, 2021 · a4bc0a5 · a4bc0a5
2 parents a25ffd1 + 9ba1129
commit a4bc0a5
Show file tree

Hide file tree

Showing 14 changed files with 240 additions and 112 deletions.
diff --git a/@types/slideshow.d.ts b/@types/slideshow.d.ts
@@ -7,11 +7,7 @@
  * Copyright (C) 2021 hello-slide
  **********************************************************/
 import SlidePageData from './pageItem';
-import Slide from './slides';
-
-export interface Slideshow extends Slide {
-  data: {
-    key: string;
-    value: SlidePageData;
-  }[];
+export interface PageDetails {
+  key: string;
+  value: SlidePageData;
 }
diff --git a/components/edit/Edit.tsx b/components/edit/Edit.tsx
@@ -16,6 +16,7 @@ import {
   UserDataState,
   NowPageDataState,
   CurrentPageState,
+  LoadState,
 } from '../../utils/state/atom';
 import EditMain from './EditMain';
 import PageList from './PageList';
@@ -26,9 +27,11 @@ const Edit: React.FC<{id: string | string[]}> = ({id}) => {
   const setNowPageData = useSetRecoilState(NowPageDataState);
   const setCurrentPage = useSetRecoilState(CurrentPageState);
   const toast = useToast();
+  const setLoad = useSetRecoilState(LoadState);
 
   React.useEffect(() => {
     if (userData && typeof id === 'string') {
+      setLoad(true);
       setPages([]);
       setCurrentPage(undefined);
 
@@ -45,8 +48,10 @@ const Edit: React.FC<{id: string | string[]}> = ({id}) => {
           }
           setPages(pages);
           setNowPageData(value);
+          setLoad(false);
         })
         .catch(error => {
+          setLoad(false);
           toast({
             title: 'スライドを読み込めませんでした',
             description: `${error}`,

diff --git a/components/edit/EditHeader.tsx b/components/edit/EditHeader.tsx
@@ -43,7 +43,7 @@ const EditHeader: React.FC<{id: string | string[]}> = ({id}) => {
     <>
       <Flex justifyContent="space-between" margin="0 .5rem 0">
         <Flex>
-          <Link href="/dashboard">
+          <Link href="/dashboard" borderRadius="5px">
             <IoArrowBackOutline size="29px" />
           </Link>
           <Text

diff --git a/components/show/ChangeContetns.tsx b/components/show/ChangeContetns.tsx
@@ -8,6 +8,7 @@
  **********************************************************/
 import React from 'react';
 import Page from '../../@types/page';
+import Slide from '../../@types/slides';
 import useHostSocket from '../../hooks/useHostSocket';
 
 import End from './contents/common/End';
@@ -19,7 +20,11 @@ import QuizSecond from './contents/quiz/QuizSecond';
 
 const domain = process.env.NEXT_PUBLIC_DOMAIN || 'hello-slide.jp';
 
-const ChangeContents: React.FC<{index: number; pageList: Page[]}> = props => {
+const ChangeContents: React.FC<{
+  index: number;
+  pageList: Page[];
+  slideData: Slide;
+}> = props => {
   const [id, visitor, setTopic, resetAnswers] = useHostSocket();
   const link = (id && `https://${domain}/v?id=${id}`) || '(  ´∀｀)＜ぬるぽ';
 
@@ -63,7 +68,7 @@ const ChangeContents: React.FC<{index: number; pageList: Page[]}> = props => {
 
   switch (props.index) {
     case 0:
-      return <OpExplanation />;
+      return <OpExplanation slideData={props.slideData} />;
     case 1:
       return <QrCode link={link} visitor={visitor} />;
     default:

diff --git a/components/show/ShowController.tsx b/components/show/ShowController.tsx
@@ -6,136 +6,133 @@
  *
  * Copyright (C) 2021 hello-slide
  **********************************************************/
-import {useToast, Box, Flex} from '@chakra-ui/react';
+import {Box, Flex} from '@chakra-ui/react';
 import React from 'react';
 import {useSetRecoilState} from 'recoil';
 import Page from '../../@types/page';
-import SlidePageData from '../../@types/pageItem';
+import {PageDetails} from '../../@types/slideshow';
 import useShowClose from '../../hooks/useShowClose';
-import GetPage from '../../utils/api/getPage';
-import ListPages from '../../utils/api/listPage';
+import useShowControl from '../../hooks/useShowControl';
 import {SlideshowDataState} from '../../utils/state/atom';
 import Load from '../common/Load';
 import ChangeContents from './ChangeContetns';
 
 const ShowController: React.FC<{id: string}> = ({id}) => {
-  const toast = useToast();
   const setSlideshowData = useSetRecoilState(SlideshowDataState);
   const [index, setIndex] = React.useState(0);
-  const [pageList, setPageList] = React.useState<Page[]>([]);
-  const [load, setIsLoad] = React.useState(false);
   const closeShow = useShowClose();
-  let maxPage = 3; // header page * 2 and end page.
+  const [isLoad, setIsLoad] = React.useState(false);
+  const [maxIndex, setMaxIndex] = React.useState(0);
+  const [isEndGetPage, setIsEndGetPage] = React.useState(false);
+  const [slideData, pageData, load, pageList, setSlideId, getPage] =
+    useShowControl();
+
+  const numberOfPageRef = React.useRef<number>();
+  const pageRef = React.useRef<AsyncGenerator<PageDetails>>();
+  const pageDataRef = React.useRef<Page[]>();
+  const pageLockRef = React.useRef<boolean>();
 
   const keyboardEvent = React.useCallback((event: KeyboardEvent) => {
     if (event.code === 'ArrowRight') {
-      nextPage(false);
+      nextPage();
     } else if (event.code === 'ArrowLeft') {
       backPage();
     }
   }, []);
 
-  const nextPage = (useJsx: boolean) => {
-    setIndex(value => {
-      if (!useJsx && value >= maxPage) {
-        return value;
-      } else if (useJsx && value >= pageList.length + 3) {
-        return value;
-      }
-      return (value += 1);
-    });
-  };
+  const nextPage = () => {
+    // The move is locked until the next page is loaded.
+    if (!pageLockRef.current) {
+      setIndex(value => {
+        if (numberOfPageRef.current && value >= numberOfPageRef.current) {
+          return value;
+        }
 
-  const backPage = () => {
-    setIndex(value => {
-      if (value > 0) {
-        return (value -= 1);
-      }
-      return value;
-    });
+        return (value += 1);
+      });
+    }
   };
 
-  const getPage = async (
-    getPage: GetPage,
-    pageId: string
-  ): Promise<SlidePageData> => {
-    return await getPage.run(id, pageId);
+  const backPage = () => {
+    // The move is locked until the next page is loaded.
+    if (!pageLockRef.current) {
+      setIndex(value => {
+        if (value > 0) {
+          return (value -= 1);
+        }
+        return value;
+      });
+    }
   };
 
   React.useEffect(() => {
-    if (index >= pageList.length + 3) {
+    // The slide show ends when you move to the next page on the last page.
+    if (numberOfPageRef.current && index >= numberOfPageRef.current) {
       closeShow();
     }
+
+    if (index >= 2 && maxIndex < index && !isEndGetPage) {
+      switch (pageData[index - 2]?.type) {
+        case 'quiz2':
+        case 'question':
+          pageLockRef.current = true;
+          pageRef.current.next().then(value => {
+            if (value.done) {
+              setIsEndGetPage(true);
+              pageLockRef.current = false;
+              return;
+            }
+            // Get page data async.
+            const result = value.value as PageDetails;
+            setSlideshowData(value => {
+              return [result, ...value];
+            });
+
+            pageLockRef.current = false;
+          });
+          break;
+        default:
+          break;
+      }
+      setMaxIndex(index);
+    }
   }, [index]);
 
   React.useEffect(() => {
-    // reset state
     setSlideshowData(undefined);
     setIsLoad(true);
 
-    const listPagesAPI = new ListPages();
+    if (id.length !== 0) {
+      setSlideId(id);
+    }
 
-    const getPageAPI = new GetPage();
+    return () => {
+      document.removeEventListener('keydown', keyboardEvent, false);
+    };
+  }, []);
 
-    const api = async () => {
-      try {
-        const value = await listPagesAPI.run(id);
+  React.useEffect(() => {
+    if (typeof pageList !== 'undefined' && typeof pageData !== 'undefined') {
+      numberOfPageRef.current = pageData.length + 3;
 
-        const pageLists = [];
-        const data: {key: string; value: SlidePageData}[] = [];
-        for (const element of value.pages) {
-          if (element.type === 'quiz') {
-            pageLists.push({id: element.page_id, type: 'quiz1'});
-            pageLists.push({id: element.page_id, type: 'quiz2'});
-          } else if (element.type === 'question') {
-            pageLists.push({id: element.page_id, type: 'question'});
-          }
+      const getter = getPage();
+      // Load only the first page.
+      getter.next().then(value => {
+        const result = value.value as PageDetails;
+        setSlideshowData([result]);
+      });
 
-          try {
-            data.push({
-              key: element.page_id,
-              value: await getPage(getPageAPI, element.page_id),
-            });
-          } catch (error) {
-            toast({
-              title: 'ページを読み込めませんでした。',
-              description: `${error}`,
-              status: 'error',
-            });
-          }
-        }
-        setPageList(pageLists);
-
-        setSlideshowData({
-          title: value.title,
-          id: value.id,
-          createDate: value.createDate,
-          lastChange: value.lastChange,
-          data: data,
-        });
-
-        maxPage += pageLists.length;
-        document.addEventListener('keydown', keyboardEvent, false);
-      } catch (error) {
-        toast({
-          title: 'スライドを読み込めませんでした',
-          description: `${error}`,
-          status: 'error',
-        });
-      }
+      pageRef.current = getter;
+      pageDataRef.current = pageData;
 
+      document.addEventListener('keydown', keyboardEvent, false);
       setIsLoad(false);
-    };
-    api();
-
-    return () => {
-      document.removeEventListener('keydown', keyboardEvent, false);
-    };
-  }, []);
+    }
+  }, [pageList, pageData]);
 
   return (
     <>
-      <Load isLoad={load} />
+      <Load isLoad={load || isLoad} />
       <Flex
         position="absolute"
         zIndex="1000"
@@ -145,9 +142,9 @@ const ShowController: React.FC<{id: string}> = ({id}) => {
         height="100%"
       >
         <Box width="50%" height="100%" onClick={backPage} />
-        <Box width="50%" height="100%" onClick={() => nextPage(true)} />
+        <Box width="50%" height="100%" onClick={() => nextPage()} />
       </Flex>
-      <ChangeContents index={index} pageList={pageList} />
+      <ChangeContents index={index} pageList={pageData} slideData={slideData} />
     </>
   );
 };

diff --git a/components/show/contents/common/OpExplanation.tsx b/components/show/contents/common/OpExplanation.tsx
@@ -8,12 +8,9 @@
  **********************************************************/
 import {Flex, Heading, Kbd, Stack, Spacer, Text} from '@chakra-ui/react';
 import React from 'react';
-import {useRecoilValue} from 'recoil';
-import {SlideshowDataState} from '../../../../utils/state/atom';
-
-const OpExplanation = () => {
-  const slideshowData = useRecoilValue(SlideshowDataState);
+import Slide from '../../../../@types/slides';
 
+const OpExplanation: React.FC<{slideData: Slide}> = ({slideData}) => {
   const KeyMap: React.FC<{text: string; keys: string[]}> = ({text, keys}) => {
     return (
       <Flex alignItems="center">
@@ -54,7 +51,7 @@ const OpExplanation = () => {
           <KeyMap text="終了する" keys={['Esc']} />
         </ExplanationContent>
         <ExplanationContent title="基本情報">
-          <Text fontSize="1.5rem">スライド名: {slideshowData?.title}</Text>
+          <Text fontSize="1.5rem">スライド名: {slideData?.title}</Text>
         </ExplanationContent>
       </Stack>
     </Flex>

diff --git a/components/show/contents/question/Qustion.tsx b/components/show/contents/question/Qustion.tsx
@@ -22,7 +22,7 @@ const Question: React.FC<{
   setTopic: React.Dispatch<React.SetStateAction<string>>;
 }> = ({id, link, setTopic, visitor}) => {
   const slideshowData = useRecoilValue(SlideshowDataState);
-  const questionData = slideshowData.data?.find(value => value.key === id)
+  const questionData = slideshowData?.find(value => value.key === id)
     .value as QuestionType;
 
   React.useEffect(() => {

diff --git a/components/show/contents/quiz/Graph.tsx b/components/show/contents/quiz/Graph.tsx
@@ -50,13 +50,15 @@ const Graph: React.FC<{
       });
     }
 
-    console.log(dataBuf);
     setData(dataBuf);
   }, [answers]);
 
   return (
     <Center fontSize="1.7rem" fontWeight="bold">
-      <ResponsiveContainer width={1000} height={700}>
+      <ResponsiveContainer
+        width={window.innerWidth - 100}
+        height={window.innerHeight - 250}
+      >
         <BarChart width={2000} height={600} data={data} layout="vertical">
           <YAxis
             dataKey="title"

diff --git a/components/show/contents/quiz/QuizFirst.tsx b/components/show/contents/quiz/QuizFirst.tsx
@@ -22,7 +22,7 @@ const QuizFirst: React.FC<{
   setTopic: React.Dispatch<React.SetStateAction<string>>;
 }> = ({id, link, setTopic, visitor}) => {
   const slideshowData = useRecoilValue(SlideshowDataState);
-  const questionData = slideshowData.data?.find(value => value.key === id)
+  const questionData = slideshowData?.find(value => value.key === id)
     .value as Quiz;
 
   React.useEffect(() => {

diff --git a/components/show/contents/quiz/QuizSecond.tsx b/components/show/contents/quiz/QuizSecond.tsx
@@ -21,7 +21,7 @@ const QuizSecond: React.FC<{
   setTopic: React.Dispatch<React.SetStateAction<string>>;
 }> = ({id, link, visitor, setTopic}) => {
   const slideshowData = useRecoilValue(SlideshowDataState);
-  const questionData = slideshowData.data?.find(value => value.key === id)
+  const questionData = slideshowData?.find(value => value.key === id)
     .value as Quiz;
   //   const setPageData = useSetRecoilState(PageDataState);
   //   const answers = useRecoilValue(AnswersState);

diff --git a/contents/changelog.json b/contents/changelog.json
@@ -6,5 +6,9 @@
     {
         "version": "1.0.1",
         "date": "2021/09/15"
+    },
+    {
+        "version": "1.0.2",
+        "date": "2021/09/19"
     }
 ]