Merge pull request #137 from hello-slide/fix/show-aniamtion

cateiru · web-flow · commit c10fc998aa6f · 2021-09-15T19:44:14.000+09:00
Fix/show aniamtion
diff --git a/@types/changelog.d.ts b/@types/changelog.d.ts
diff --git a/components/about/AboutPage.tsx b/components/about/AboutPage.tsx
@@ -15,7 +15,7 @@ const AboutPage: React.FC<{contents: string}> = ({contents}) => {
   return (
     <InfoText title="HelloSlideについて">
       <Center>
-        <Box width={{base: '700px', sm: '80%', md: '700px'}}>
+        <Box width={{base: '80%', sm: '80%', md: '700px'}}>
           <Markdown text={contents} />
         </Box>
       </Center>
diff --git a/components/changelog/ChangelogPage.tsx b/components/changelog/ChangelogPage.tsx
@@ -7,17 +7,18 @@
  * Copyright (C) 2021 hello-slide
  **********************************************************/
 import {Box, Center, Text, Flex, Spacer, Divider} from '@chakra-ui/react';
-import ChangeLogType from '../../@types/changelog';
+import {ChangelogData} from '../../utils/changelog/parse';
 import InfoText from '../common/InfoText';
+import Markdown from '../markdown/Markdown';
 
-const ChangelogPage: React.FC<{logData: ChangeLogType[]}> = ({logData}) => {
+const ChangelogPage: React.FC<{logData: ChangelogData[]}> = ({logData}) => {
   return (
     <InfoText title="変更履歴">
       {logData.map(value => {
         return (
           <Center key={value.version}>
             <Box
-              width={{base: '700px', sm: '80%', md: '700px'}}
+              width={{base: '80%', sm: '80%', md: '700px'}}
               margin="1rem 0 1rem 0"
             >
               <Flex>
@@ -41,7 +42,9 @@ const ChangelogPage: React.FC<{logData: ChangeLogType[]}> = ({logData}) => {
                 </Flex>
               </Flex>
               <Divider borderWidth="1px" />
-              <Box margin=".5rem 1rem 0 1rem">{value.text}</Box>
+              <Box margin="0 1rem 0 1rem">
+                <Markdown text={value.details} />
+              </Box>
             </Box>
           </Center>
         );
diff --git a/components/common/Load.tsx b/components/common/Load.tsx
@@ -0,0 +1,46 @@
+/**********************************************************
+ * Load Spinner
+ *
+ * @author Yuto Watanabe <yuto.w51942@gmail.com>
+ * @version 1.0.0
+ *
+ * Copyright (C) 2021 hello-slide
+ **********************************************************/
+import {Box, Spinner, Flex} from '@chakra-ui/react';
+import React from 'react';
+
+const Load: React.FC<{isLoad: boolean}> = ({isLoad}) => {
+  return (
+    <>
+      {!isLoad || (
+        <>
+          <Box
+            backgroundColor="gray.400"
+            opacity=".5"
+            position="fixed"
+            width="100vw"
+            height="100vh"
+            zIndex="9999"
+            top="0"
+            left="0"
+          ></Box>
+          <Flex
+            width="100vw"
+            height="100vh"
+            position="fixed"
+            top="0"
+            left="0"
+            zIndex="9999"
+            flexDirection="column"
+            justifyContent="center"
+            alignItems="center"
+          >
+            <Spinner thickness="4px" speed="0.65s" color="blue.500" size="xl" />
+          </Flex>
+        </>
+      )}
+    </>
+  );
+};
+
+export default Load;
diff --git a/components/common/Loading.tsx b/components/common/Loading.tsx
@@ -6,42 +6,14 @@
  *
  * Copyright (C) 2021 hello-slide
  **********************************************************/
-import {Box, Spinner, Flex} from '@chakra-ui/react';
 import {useRecoilValue} from 'recoil';
 import {LoadState} from '../../utils/state/atom';
+import Load from './Load';
 
 const Loading = () => {
   const isLoad = useRecoilValue(LoadState);
 
-  return (
-    <>
-      <Box
-        backgroundColor="gray.400"
-        opacity=".5"
-        position="fixed"
-        width="100vw"
-        height="100vh"
-        zIndex="9999"
-        top="0"
-        left="0"
-        hidden={!isLoad}
-      ></Box>
-      <Flex
-        width="100vw"
-        height="100vh"
-        position="fixed"
-        top="0"
-        left="0"
-        zIndex="9999"
-        flexDirection="column"
-        justifyContent="center"
-        alignItems="center"
-        hidden={!isLoad}
-      >
-        <Spinner thickness="4px" speed="0.65s" color="blue.500" size="xl" />
-      </Flex>
-    </>
-  );
+  return <Load isLoad={isLoad} />;
 };
 
 export default Loading;
diff --git a/components/markdown/MdComponents/Headers.tsx b/components/markdown/MdComponents/Headers.tsx
@@ -43,7 +43,7 @@ export const H3: React.FC = ({children}) => {
 
 export const H4: React.FC = ({children}) => {
   return (
-    <Box marginBottom="1.5rem" marginTop="4rem">
+    <Box marginBottom="1rem" marginTop="1.5rem">
       <Heading fontSize="1.4rem" paddingLeft=".5rem">
         {children}
       </Heading>
@@ -53,7 +53,7 @@ export const H4: React.FC = ({children}) => {
 
 export const H5: React.FC = ({children}) => {
   return (
-    <Box marginBottom="1.5rem" marginTop="4rem">
+    <Box marginBottom="1rem" marginTop="1.5rem">
       <Heading fontSize="1.3rem" paddingLeft=".5rem">
         {children}
       </Heading>
@@ -63,7 +63,7 @@ export const H5: React.FC = ({children}) => {
 
 export const H6: React.FC = ({children}) => {
   return (
-    <Box marginBottom="1.5rem" marginTop="4rem">
+    <Box marginBottom="1rem" marginTop="1.5rem">
       <Heading fontSize="1.2rem" paddingLeft=".5rem">
         {children}
       </Heading>
diff --git a/components/privacyPolicy/PrivacyPage.tsx b/components/privacyPolicy/PrivacyPage.tsx
@@ -14,7 +14,7 @@ const PrivacyPage: React.FC<{contents: string}> = ({contents}) => {
   return (
     <InfoText title="プライバシーポリシー">
       <Center>
-        <Box width={{base: '700px', sm: '80%', md: '700px'}}>
+        <Box width={{base: '80%', sm: '80%', md: '700px'}}>
           <Markdown text={contents} />
         </Box>
       </Center>
diff --git a/components/question/QuestionPage.tsx b/components/question/QuestionPage.tsx
@@ -15,7 +15,7 @@ const QuestionPage: React.FC<{contents: string}> = ({contents}) => {
   return (
     <InfoText title="よくある質問">
       <Center>
-        <Box width={{base: '700px', sm: '80%', md: '700px'}}>
+        <Box width={{base: '80%', sm: '80%', md: '700px'}}>
           <Markdown text={contents} />
         </Box>
       </Center>
diff --git a/components/show/ShowController.tsx b/components/show/ShowController.tsx
@@ -14,15 +14,16 @@ import SlidePageData from '../../@types/pageItem';
 import useShowClose from '../../hooks/useShowClose';
 import GetPage from '../../utils/api/getPage';
 import ListPages from '../../utils/api/listPage';
-import {SlideshowDataState, LoadState} from '../../utils/state/atom';
+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 setIsLoad = useSetRecoilState(LoadState);
+  const [load, setIsLoad] = React.useState(false);
   const closeShow = useShowClose();
   let maxPage = 3; // header page * 2 and end page.
 
@@ -134,6 +135,7 @@ const ShowController: React.FC<{id: string}> = ({id}) => {
 
   return (
     <>
+      <Load isLoad={load} />
       <Flex
         position="absolute"
         zIndex="1000"
diff --git a/components/terms/TermsPage.tsx b/components/terms/TermsPage.tsx
@@ -15,7 +15,7 @@ const TermsPage: React.FC<{contents: string}> = ({contents}) => {
   return (
     <InfoText title="利用規約">
       <Center>
-        <Box width={{base: '700px', sm: '80%', md: '700px'}}>
+        <Box width={{base: '80%', sm: '80%', md: '700px'}}>
           <Markdown text={contents} />
         </Box>
       </Center>
diff --git a/components/usage/UsagePage.tsx b/components/usage/UsagePage.tsx
@@ -15,7 +15,7 @@ const UsagePage: React.FC<{contents: string}> = ({contents}) => {
   return (
     <InfoText title="使い方">
       <Center>
-        <Box width={{base: '700px', sm: '80%', md: '700px'}}>
+        <Box width={{base: '80%', sm: '80%', md: '700px'}}>
           <Markdown text={contents} />
         </Box>
       </Center>
diff --git a/components/visitor/VisitorController.tsx b/components/visitor/VisitorController.tsx
@@ -7,21 +7,42 @@
  * Copyright (C) 2021 hello-slide
  **********************************************************/
 import React from 'react';
+import {useSetRecoilState} from 'recoil';
 import useVisitorSocket from '../../hooks/useVisitorSocket';
+import {LoadState} from '../../utils/state/atom';
 import Home from './contents/Home';
 import Load from './contents/Load';
 import Question from './contents/Question';
 import Quiz from './contents/Quiz';
 
 const VisitorController: React.FC<{id: string | string[]}> = ({id}) => {
   const [topic, isEnd, setId, setAnswer] = useVisitorSocket();
+  const setLoad = useSetRecoilState(LoadState);
 
   React.useEffect(() => {
     if (id && typeof id === 'string') {
       setId(id);
     }
   }, [id]);
 
+  React.useEffect(() => {
+    let isMount = true;
+    if (!topic?.a) {
+      setLoad(true);
+
+      setTimeout(() => {
+        if (isMount) {
+          setLoad(false);
+        }
+      }, 1000);
+    }
+
+    return () => {
+      setLoad(false);
+      isMount = false;
+    };
+  }, [topic]);
+
   if (isEnd) {
     return <Home />;
   } else {
diff --git a/components/visitor/VisitorPage.tsx b/components/visitor/VisitorPage.tsx
@@ -8,6 +8,7 @@
  **********************************************************/
 import {Box} from '@chakra-ui/react';
 import React from 'react';
+import NoSSR from 'react-no-ssr';
 import VisitorController from './VisitorController';
 
 const VisitorPage: React.FC<{id: string | string[]}> = ({id}) => {
@@ -22,7 +23,9 @@ const VisitorPage: React.FC<{id: string | string[]}> = ({id}) => {
 
   return (
     <Box ref={ref} width="100%" height="100vh">
-      <VisitorController id={id} />
+      <NoSSR>
+        <VisitorController id={id} />
+      </NoSSR>
     </Box>
   );
 };
diff --git a/components/visitor/contents/Load.tsx b/components/visitor/contents/Load.tsx
@@ -14,9 +14,6 @@ const Load = () => {
     <Center height="100%">
       <Box>
         <Heading>しばらくお待ち下さい...</Heading>
-        <Center marginY="2rem">
-          <Spinner size="xl" />
-        </Center>
       </Box>
     </Center>
   );
diff --git a/components/visitor/contents/Quiz.tsx b/components/visitor/contents/Quiz.tsx
@@ -9,7 +9,6 @@
 import {Box, Center, Heading, SimpleGrid} from '@chakra-ui/react';
 import React from 'react';
 import Confetti from 'react-confetti';
-import useWindowSize from 'react-use/lib/useWindowSize';
 import {Topic} from '../../../@types/socket';
 import {VisitorAns} from '../../../@types/socket';
 
@@ -28,8 +27,6 @@ const Quiz: React.FC<{
   const [result, setResult] = React.useState<Result>(Result.NoResult);
   const [lock, setLock] = React.useState(false);
 
-  const {width, height} = useWindowSize();
-
   React.useEffect(() => {
     setAnswerIndex(10);
     setLock(false);
@@ -67,8 +64,13 @@ const Quiz: React.FC<{
   const Celebration = () => {
     switch (result) {
       case Result.Pass:
-        console.log('pass');
-        return <Confetti width={width} height={height} recycle={false} />;
+        return (
+          <Confetti
+            width={screen.width}
+            height={screen.height}
+            recycle={false}
+          />
+        );
       case Result.Fail:
         // TODO: add fail animation.
         return <></>;
diff --git a/contents/changelog.json b/contents/changelog.json
@@ -1,7 +1,10 @@
 [
     {
         "version": "1.0.0",
-        "date": "2021/09/13",
-        "text": "初回リリース"
+        "date": "2021/09/13"
+    },
+    {
+        "version": "1.0.1",
+        "date": "2021/09/15"
     }
 ]
diff --git a/contents/changelogs/1.0.0.md b/contents/changelogs/1.0.0.md
@@ -0,0 +1,5 @@
+#### 祝! 初回リリース
+
+やっと、初回リリースしました。
+
+6月あたりに、「夏休みに大きなプロジェクトを回したいっ!!」と考えてから数ヶ月がたち実際にサービスをリリースできたことは誇っていいのではないのでしょうか。いや、私は誇ります自分すげーーーーー
diff --git a/contents/changelogs/1.0.1.md b/contents/changelogs/1.0.1.md
@@ -0,0 +1,9 @@
+#### バグ修正などしました
+
+私、学生なので夏休み中は時間取れたんですけど授業が始まってしまったのでこれから更新遅くなりそう…
+（インターンもしたいお金欲しいサーバー代結構きつい…）
+
+- リアルタイム時にホストがページを移行してすぐに回答DBを削除する処理が走るため数秒ロード中にした
+- 参加者がクイズで正解したときの紙吹雪が途中で終わってしまう問題を修正。issue: [#135](https://github.com/hello-slide/front/issues/135)
+- 全画面でスライドショーを開始した場合にロードの画面（スピナー）が表示されない問題を修正。issue: [#129](https://github.com/hello-slide/front/issues/129)
+- Cookie処理エラーを修正。issue: [#136](https://github.com/hello-slide/front/issues/136)
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "hello-slide",
-    "version": "0.1.0",
+    "version": "1.0.0",
     "private": true,
     "scripts": {
         "dev": "next dev",
@@ -35,7 +35,6 @@
         "react-icons": "^4.2.0",
         "react-markdown": "^7.0.1",
         "react-no-ssr": "^1.1.0",
-        "react-use": "^17.3.1",
         "recharts": "^2.1.2",
         "recoil": "^0.4.1",
         "screenfull": "^5.1.0"
diff --git a/pages/changelog.tsx b/pages/changelog.tsx
diff --git a/utils/changelog/parse.ts b/utils/changelog/parse.ts
diff --git a/utils/cookie/cookie.ts b/utils/cookie/cookie.ts
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,10 @@`
`1`	`1`	`[`
`2`	`2`	`{`
`3`	`3`	`"version": "1.0.0",`
`4`		`- "date": "2021/09/13",`
`5`		`- "text": "初回リリース"`
	`4`	`+ "date": "2021/09/13"`
	`5`	`+ },`
	`6`	`+ {`
	`7`	`+ "version": "1.0.1",`
	`8`	`+ "date": "2021/09/15"`
`6`	`9`	`}`
`7`	`10`	`]`