Skip to content

Commit a4bc0a5

Browse files
cateirucateiru
authored
Merge pull request #143 from hello-slide/fix/start-show-api-logic
Fix/start show api logic
2 parents a25ffd1 + 9ba1129 commit a4bc0a5

File tree

14 files changed

+240
-112
lines changed

14 files changed

+240
-112
lines changed

‎@types/slideshow.d.ts

+3-7
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,7 @@
77
* Copyright (C) 2021 hello-slide
88
**********************************************************/
99
import SlidePageData from './pageItem';
10-
import Slide from './slides';
11-
12-
export interface Slideshow extends Slide {
13-
data: {
14-
key: string;
15-
value: SlidePageData;
16-
}[];
10+
export interface PageDetails {
11+
key: string;
12+
value: SlidePageData;
1713
}

‎components/edit/Edit.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
UserDataState,
1717
NowPageDataState,
1818
CurrentPageState,
19+
LoadState,
1920
} from '../../utils/state/atom';
2021
import EditMain from './EditMain';
2122
import PageList from './PageList';
@@ -26,9 +27,11 @@ const Edit: React.FC<{id: string | string[]}> = ({id}) => {
2627
const setNowPageData = useSetRecoilState(NowPageDataState);
2728
const setCurrentPage = useSetRecoilState(CurrentPageState);
2829
const toast = useToast();
30+
const setLoad = useSetRecoilState(LoadState);
2931

3032
React.useEffect(() => {
3133
if (userData && typeof id === 'string') {
34+
setLoad(true);
3235
setPages([]);
3336
setCurrentPage(undefined);
3437

@@ -45,8 +48,10 @@ const Edit: React.FC<{id: string | string[]}> = ({id}) => {
4548
}
4649
setPages(pages);
4750
setNowPageData(value);
51+
setLoad(false);
4852
})
4953
.catch(error => {
54+
setLoad(false);
5055
toast({
5156
title: 'スライドを読み込めませんでした',
5257
description: `${error}`,

‎components/edit/EditHeader.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ const EditHeader: React.FC<{id: string | string[]}> = ({id}) => {
4343
<>
4444
<Flex justifyContent="space-between" margin="0 .5rem 0">
4545
<Flex>
46-
<Link href="/dashboard">
46+
<Link href="/dashboard" borderRadius="5px">
4747
<IoArrowBackOutline size="29px" />
4848
</Link>
4949
<Text

‎components/show/ChangeContetns.tsx

+7-2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
**********************************************************/
99
import React from 'react';
1010
import Page from '../../@types/page';
11+
import Slide from '../../@types/slides';
1112
import useHostSocket from '../../hooks/useHostSocket';
1213

1314
import End from './contents/common/End';
@@ -19,7 +20,11 @@ import QuizSecond from './contents/quiz/QuizSecond';
1920

2021
const domain = process.env.NEXT_PUBLIC_DOMAIN || 'hello-slide.jp';
2122

22-
const ChangeContents: React.FC<{index: number; pageList: Page[]}> = props => {
23+
const ChangeContents: React.FC<{
24+
index: number;
25+
pageList: Page[];
26+
slideData: Slide;
27+
}> = props => {
2328
const [id, visitor, setTopic, resetAnswers] = useHostSocket();
2429
const link = (id && `https://${domain}/v?id=${id}`) || '( ´∀｀)＜ぬるぽ';
2530

@@ -63,7 +68,7 @@ const ChangeContents: React.FC<{index: number; pageList: Page[]}> = props => {
6368

6469
switch (props.index) {
6570
case 0:
66-
return <OpExplanation />;
71+
return <OpExplanation slideData={props.slideData} />;
6772
case 1:
6873
return <QrCode link={link} visitor={visitor} />;
6974
default:

‎components/show/ShowController.tsx

+86-89
Original file line numberDiff line numberDiff line change
@@ -6,136 +6,133 @@
66
*
77
* Copyright (C) 2021 hello-slide
88
**********************************************************/
9-
import {useToast, Box, Flex} from '@chakra-ui/react';
9+
import {Box, Flex} from '@chakra-ui/react';
1010
import React from 'react';
1111
import {useSetRecoilState} from 'recoil';
1212
import Page from '../../@types/page';
13-
import SlidePageData from '../../@types/pageItem';
13+
import {PageDetails} from '../../@types/slideshow';
1414
import useShowClose from '../../hooks/useShowClose';
15-
import GetPage from '../../utils/api/getPage';
16-
import ListPages from '../../utils/api/listPage';
15+
import useShowControl from '../../hooks/useShowControl';
1716
import {SlideshowDataState} from '../../utils/state/atom';
1817
import Load from '../common/Load';
1918
import ChangeContents from './ChangeContetns';
2019

2120
const ShowController: React.FC<{id: string}> = ({id}) => {
22-
const toast = useToast();
2321
const setSlideshowData = useSetRecoilState(SlideshowDataState);
2422
const [index, setIndex] = React.useState(0);
25-
const [pageList, setPageList] = React.useState<Page[]>([]);
26-
const [load, setIsLoad] = React.useState(false);
2723
const closeShow = useShowClose();
28-
let maxPage = 3; // header page * 2 and end page.
24+
const [isLoad, setIsLoad] = React.useState(false);
25+
const [maxIndex, setMaxIndex] = React.useState(0);
26+
const [isEndGetPage, setIsEndGetPage] = React.useState(false);
27+
const [slideData, pageData, load, pageList, setSlideId, getPage] =
28+
useShowControl();
29+
30+
const numberOfPageRef = React.useRef<number>();
31+
const pageRef = React.useRef<AsyncGenerator<PageDetails>>();
32+
const pageDataRef = React.useRef<Page[]>();
33+
const pageLockRef = React.useRef<boolean>();
2934

3035
const keyboardEvent = React.useCallback((event: KeyboardEvent) => {
3136
if (event.code === 'ArrowRight') {
32-
nextPage(false);
37+
nextPage();
3338
} else if (event.code === 'ArrowLeft') {
3439
backPage();
3540
}
3641
}, []);
3742

38-
const nextPage = (useJsx: boolean) => {
39-
setIndex(value => {
40-
if (!useJsx && value >= maxPage) {
41-
return value;
42-
} else if (useJsx && value >= pageList.length + 3) {
43-
return value;
44-
}
45-
return (value += 1);
46-
});
47-
};
43+
const nextPage = () => {
44+
// The move is locked until the next page is loaded.
45+
if (!pageLockRef.current) {
46+
setIndex(value => {
47+
if (numberOfPageRef.current && value >= numberOfPageRef.current) {
48+
return value;
49+
}
4850

49-
const backPage = () => {
50-
setIndex(value => {
51-
if (value > 0) {
52-
return (value -= 1);
53-
}
54-
return value;
55-
});
51+
return (value += 1);
52+
});
53+
}
5654
};
5755

58-
const getPage = async (
59-
getPage: GetPage,
60-
pageId: string
61-
): Promise<SlidePageData> => {
62-
return await getPage.run(id, pageId);
56+
const backPage = () => {
57+
// The move is locked until the next page is loaded.
58+
if (!pageLockRef.current) {
59+
setIndex(value => {
60+
if (value > 0) {
61+
return (value -= 1);
62+
}
63+
return value;
64+
});
65+
}
6366
};
6467

6568
React.useEffect(() => {
66-
if (index >= pageList.length + 3) {
69+
// The slide show ends when you move to the next page on the last page.
70+
if (numberOfPageRef.current && index >= numberOfPageRef.current) {
6771
closeShow();
6872
}
73+
74+
if (index >= 2 && maxIndex < index && !isEndGetPage) {
75+
switch (pageData[index - 2]?.type) {
76+
case 'quiz2':
77+
case 'question':
78+
pageLockRef.current = true;
79+
pageRef.current.next().then(value => {
80+
if (value.done) {
81+
setIsEndGetPage(true);
82+
pageLockRef.current = false;
83+
return;
84+
}
85+
// Get page data async.
86+
const result = value.value as PageDetails;
87+
setSlideshowData(value => {
88+
return [result, ...value];
89+
});
90+
91+
pageLockRef.current = false;
92+
});
93+
break;
94+
default:
95+
break;
96+
}
97+
setMaxIndex(index);
98+
}
6999
}, [index]);
70100

71101
React.useEffect(() => {
72-
// reset state
73102
setSlideshowData(undefined);
74103
setIsLoad(true);
75104

76-
const listPagesAPI = new ListPages();
105+
if (id.length !== 0) {
106+
setSlideId(id);
107+
}
77108

78-
const getPageAPI = new GetPage();
109+
return () => {
110+
document.removeEventListener('keydown', keyboardEvent, false);
111+
};
112+
}, []);
79113

80-
const api = async () => {
81-
try {
82-
const value = await listPagesAPI.run(id);
114+
React.useEffect(() => {
115+
if (typeof pageList !== 'undefined' && typeof pageData !== 'undefined') {
116+
numberOfPageRef.current = pageData.length + 3;
83117

84-
const pageLists = [];
85-
const data: {key: string; value: SlidePageData}[] = [];
86-
for (const element of value.pages) {
87-
if (element.type === 'quiz') {
88-
pageLists.push({id: element.page_id, type: 'quiz1'});
89-
pageLists.push({id: element.page_id, type: 'quiz2'});
90-
} else if (element.type === 'question') {
91-
pageLists.push({id: element.page_id, type: 'question'});
92-
}
118+
const getter = getPage();
119+
// Load only the first page.
120+
getter.next().then(value => {
121+
const result = value.value as PageDetails;
122+
setSlideshowData([result]);
123+
});
93124

94-
try {
95-
data.push({
96-
key: element.page_id,
97-
value: await getPage(getPageAPI, element.page_id),
98-
});
99-
} catch (error) {
100-
toast({
101-
title: 'ページを読み込めませんでした。',
102-
description: `${error}`,
103-
status: 'error',
104-
});
105-
}
106-
}
107-
setPageList(pageLists);
108-
109-
setSlideshowData({
110-
title: value.title,
111-
id: value.id,
112-
createDate: value.createDate,
113-
lastChange: value.lastChange,
114-
data: data,
115-
});
116-
117-
maxPage += pageLists.length;
118-
document.addEventListener('keydown', keyboardEvent, false);
119-
} catch (error) {
120-
toast({
121-
title: 'スライドを読み込めませんでした',
122-
description: `${error}`,
123-
status: 'error',
124-
});
125-
}
125+
pageRef.current = getter;
126+
pageDataRef.current = pageData;
126127

128+
document.addEventListener('keydown', keyboardEvent, false);
127129
setIsLoad(false);
128-
};
129-
api();
130-
131-
return () => {
132-
document.removeEventListener('keydown', keyboardEvent, false);
133-
};
134-
}, []);
130+
}
131+
}, [pageList, pageData]);
135132

136133
return (
137134
<>
138-
<Load isLoad={load} />
135+
<Load isLoad={load || isLoad} />
139136
<Flex
140137
position="absolute"
141138
zIndex="1000"
@@ -145,9 +142,9 @@ const ShowController: React.FC<{id: string}> = ({id}) => {
145142
height="100%"
146143
>
147144
<Box width="50%" height="100%" onClick={backPage} />
148-
<Box width="50%" height="100%" onClick={() => nextPage(true)} />
145+
<Box width="50%" height="100%" onClick={() => nextPage()} />
149146
</Flex>
150-
<ChangeContents index={index} pageList={pageList} />
147+
<ChangeContents index={index} pageList={pageData} slideData={slideData} />
151148
</>
152149
);
153150
};

‎components/show/contents/common/OpExplanation.tsx

+3-6
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,9 @@
88
**********************************************************/
99
import {Flex, Heading, Kbd, Stack, Spacer, Text} from '@chakra-ui/react';
1010
import React from 'react';
11-
import {useRecoilValue} from 'recoil';
12-
import {SlideshowDataState} from '../../../../utils/state/atom';
13-
14-
const OpExplanation = () => {
15-
const slideshowData = useRecoilValue(SlideshowDataState);
11+
import Slide from '../../../../@types/slides';
1612

13+
const OpExplanation: React.FC<{slideData: Slide}> = ({slideData}) => {
1714
const KeyMap: React.FC<{text: string; keys: string[]}> = ({text, keys}) => {
1815
return (
1916
<Flex alignItems="center">
@@ -54,7 +51,7 @@ const OpExplanation = () => {
5451
<KeyMap text="終了する" keys={['Esc']} />
5552
</ExplanationContent>
5653
<ExplanationContent title="基本情報">
57-
<Text fontSize="1.5rem">スライド名: {slideshowData?.title}</Text>
54+
<Text fontSize="1.5rem">スライド名: {slideData?.title}</Text>
5855
</ExplanationContent>
5956
</Stack>
6057
</Flex>

‎components/show/contents/question/Qustion.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const Question: React.FC<{
2222
setTopic: React.Dispatch<React.SetStateAction<string>>;
2323
}> = ({id, link, setTopic, visitor}) => {
2424
const slideshowData = useRecoilValue(SlideshowDataState);
25-
const questionData = slideshowData.data?.find(value => value.key === id)
25+
const questionData = slideshowData?.find(value => value.key === id)
2626
.value as QuestionType;
2727

2828
React.useEffect(() => {

‎components/show/contents/quiz/Graph.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -50,13 +50,15 @@ const Graph: React.FC<{
5050
});
5151
}
5252

53-
console.log(dataBuf);
5453
setData(dataBuf);
5554
}, [answers]);
5655

5756
return (
5857
<Center fontSize="1.7rem" fontWeight="bold">
59-
<ResponsiveContainer width={1000} height={700}>
58+
<ResponsiveContainer
59+
width={window.innerWidth - 100}
60+
height={window.innerHeight - 250}
61+
>
6062
<BarChart width={2000} height={600} data={data} layout="vertical">
6163
<YAxis
6264
dataKey="title"

‎components/show/contents/quiz/QuizFirst.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const QuizFirst: React.FC<{
2222
setTopic: React.Dispatch<React.SetStateAction<string>>;
2323
}> = ({id, link, setTopic, visitor}) => {
2424
const slideshowData = useRecoilValue(SlideshowDataState);
25-
const questionData = slideshowData.data?.find(value => value.key === id)
25+
const questionData = slideshowData?.find(value => value.key === id)
2626
.value as Quiz;
2727

2828
React.useEffect(() => {

‎components/show/contents/quiz/QuizSecond.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const QuizSecond: React.FC<{
2121
setTopic: React.Dispatch<React.SetStateAction<string>>;
2222
}> = ({id, link, visitor, setTopic}) => {
2323
const slideshowData = useRecoilValue(SlideshowDataState);
24-
const questionData = slideshowData.data?.find(value => value.key === id)
24+
const questionData = slideshowData?.find(value => value.key === id)
2525
.value as Quiz;
2626
// const setPageData = useSetRecoilState(PageDataState);
2727
// const answers = useRecoilValue(AnswersState);

‎contents/changelog.json

+4
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,9 @@
66
{
77
"version": "1.0.1",
88
"date": "2021/09/15"
9+
},
10+
{
11+
"version": "1.0.2",
12+
"date": "2021/09/19"
913
}
1014
]

0 commit comments

Comments
 (0)