From 17c21753e37e1568c7bb37369b191e753c743a71 Mon Sep 17 00:00:00 2001 From: kobakakzu0429 Date: Tue, 3 Dec 2019 20:31:31 +0900 Subject: [PATCH 1/6] radio's seed_fu data to 50 --- db/fixtures/40_radio.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/db/fixtures/40_radio.rb b/db/fixtures/40_radio.rb index f08e7f676..f90d92555 100644 --- a/db/fixtures/40_radio.rb +++ b/db/fixtures/40_radio.rb @@ -5,7 +5,7 @@ personality_ids = Personality.pluck(:id) community_ids = Community.pluck(:id) -(1..10).each do |i| +(1..50).each do |i| Radio.seed do |r| r.id = i r.title = Faker::Lorem.word From 97a02bc77d605c12e5e2f4ab6c96fd7c52049f0d Mon Sep 17 00:00:00 2001 From: kobakakzu0429 Date: Tue, 3 Dec 2019 20:37:08 +0900 Subject: [PATCH 2/6] add latestRadios --- frontend/src/pages/Index.tsx | 6 +++++- frontend/src/stores/RadioStore.ts | 14 ++++++++++++++ 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/frontend/src/pages/Index.tsx b/frontend/src/pages/Index.tsx index 66b78a7f3..2035b8d2e 100644 --- a/frontend/src/pages/Index.tsx +++ b/frontend/src/pages/Index.tsx @@ -11,6 +11,7 @@ import AboutBottom from "@/components/atoms/AboutBottom"; import AboutSidebar from "@/components/atoms/Features/AboutSidebar"; import WeeklyComic from "@/components/atoms/WeeklyComic"; import TweetStream from "@/components/atoms/Features/TweetStream"; +import MoreButton from "@/components/atoms/Buttons/MoreButton"; import { PersonalitiesSlider } from "@/components/molecules/Personalities/PersonalitiesSlider"; import { PopularRadiosWrapper } from "@/components/molecules/PopularRadio/PopularRadioWrapper"; @@ -54,7 +55,10 @@ export default observer((props: IProps) => { - + + diff --git a/frontend/src/stores/RadioStore.ts b/frontend/src/stores/RadioStore.ts index 4ff78c369..7b90f36ae 100644 --- a/frontend/src/stores/RadioStore.ts +++ b/frontend/src/stores/RadioStore.ts @@ -49,4 +49,18 @@ export default class RadioStore { @action public setRadios(radios: IRadio[]) { this.radios = radios; } + + public latestRadios( + { begin, end }: { begin?: number; end?: number } = { + begin: 0, + end: undefined + } + ): IRadio[] | undefined { + return ( + this.radios && + this.radios + .sort((radioA, radioB) => radioB.id - radioA.id) + .slice(begin, end) + ); + } } From 29f66243f97df347bb826cb1ddf3704d894eccaf Mon Sep 17 00:00:00 2001 From: kobakakzu0429 Date: Tue, 3 Dec 2019 20:38:07 +0900 Subject: [PATCH 3/6] add MoreButtonText --- .../components/atoms/Buttons/MoreButtonText.tsx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 frontend/src/components/atoms/Buttons/MoreButtonText.tsx diff --git a/frontend/src/components/atoms/Buttons/MoreButtonText.tsx b/frontend/src/components/atoms/Buttons/MoreButtonText.tsx new file mode 100644 index 000000000..d2e771f03 --- /dev/null +++ b/frontend/src/components/atoms/Buttons/MoreButtonText.tsx @@ -0,0 +1,17 @@ +import React, { FC } from "react"; +import styled from "styled-components"; + +import ChkButtonBase from "@/components/atoms/Buttons/ChkButtonBase"; + +export const MoreButtonText: FC = () => { + return ( + + + + ); +}; + +const MoreButtonWrapper = styled.div` + margin: 0 auto; + width: 150px; +`; From dd4d6495f822f52f3716b2a0db8ec5926f6f0aab Mon Sep 17 00:00:00 2001 From: kobakakzu0429 Date: Tue, 3 Dec 2019 21:18:17 +0900 Subject: [PATCH 4/6] add onClick --- frontend/src/components/atoms/Buttons/MoreButtonText.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/atoms/Buttons/MoreButtonText.tsx b/frontend/src/components/atoms/Buttons/MoreButtonText.tsx index d2e771f03..6bd8f13e9 100644 --- a/frontend/src/components/atoms/Buttons/MoreButtonText.tsx +++ b/frontend/src/components/atoms/Buttons/MoreButtonText.tsx @@ -3,9 +3,13 @@ import styled from "styled-components"; import ChkButtonBase from "@/components/atoms/Buttons/ChkButtonBase"; -export const MoreButtonText: FC = () => { +interface Props { + onClick?: (e: any) => void; +} + +export const MoreButtonText: FC = ({ onClick }) => { return ( - + ); From 74c108576b8cac93e34f6f6b2d2b69ff0fa74525 Mon Sep 17 00:00:00 2001 From: kobakakzu0429 Date: Tue, 3 Dec 2019 21:19:31 +0900 Subject: [PATCH 5/6] loadable next radios in RadioHistory Page --- .../RadioHistory/RadioHistoryWrapper.tsx | 2 -- frontend/src/pages/RadioHistory.tsx | 24 +++++++++++++++++-- 2 files changed, 22 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/molecules/RadioHistory/RadioHistoryWrapper.tsx b/frontend/src/components/molecules/RadioHistory/RadioHistoryWrapper.tsx index 237d8b788..3eac96b83 100644 --- a/frontend/src/components/molecules/RadioHistory/RadioHistoryWrapper.tsx +++ b/frontend/src/components/molecules/RadioHistory/RadioHistoryWrapper.tsx @@ -3,7 +3,6 @@ import styled from "styled-components"; import { color, heading } from "@/constants/styles"; -import MoreButton from "@/components/atoms/Buttons/MoreButton"; import RadioHistoryFeature from "@/components/atoms/RadioHistory/RadioHistoryFeature"; import { RadioCard } from "@/components/molecules/RadioCard/RadioCard"; import { TileCardsWrapper } from "@/components/molecules/Cards/TileCardsWrapper"; @@ -51,7 +50,6 @@ export const RadioHistoryWrapper = (props: IProps) => { ))} - ); diff --git a/frontend/src/pages/RadioHistory.tsx b/frontend/src/pages/RadioHistory.tsx index 2131232eb..bc232ab9d 100644 --- a/frontend/src/pages/RadioHistory.tsx +++ b/frontend/src/pages/RadioHistory.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from "react"; +import React, { useState, useEffect, useCallback } from "react"; import styled from "styled-components"; import { observer } from "mobx-react-lite"; @@ -15,6 +15,7 @@ import BlogWrapper from "@/components/molecules/Blogs/BlogWrapper"; import RootStore from "@/stores/RootStore"; import { IRadio } from "@/api/RadioApi"; +import { MoreButtonText } from "@/components/atoms/Buttons/MoreButtonText"; interface IProps { rootStore?: RootStore; @@ -37,6 +38,22 @@ export default observer((props: IProps) => { setPopularRadios(radios); }, [radioStore.radios]); + const [end, setEnd] = useState(10); + + const nextLoadingRadios = useCallback(() => { + if (!isStillHaveRadios) return; + setEnd(end + 10); + }, [end]); + + const [isStillHaveRadios, setIsStillHaveRadios] = useState(true); + + useEffect(() => { + if (!radioStore.radios) return; + if (end >= radioStore.radios.length) { + setIsStillHaveRadios(false); + } + }, [end, radioStore.radios]); + return (
Radio History @@ -48,7 +65,10 @@ export default observer((props: IProps) => { - + + {isStillHaveRadios && } From 2a2db4f8472140b68db9c705e154d7e70f0f9e53 Mon Sep 17 00:00:00 2001 From: kobakakzu0429 Date: Sun, 22 Dec 2019 16:40:10 +0900 Subject: [PATCH 6/6] change: begin, end -> limit, offset --- frontend/src/pages/Index.tsx | 2 +- frontend/src/pages/RadioHistory.tsx | 12 ++++++------ frontend/src/stores/RadioStore.ts | 8 ++++---- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/frontend/src/pages/Index.tsx b/frontend/src/pages/Index.tsx index 2035b8d2e..7c3cc77ac 100644 --- a/frontend/src/pages/Index.tsx +++ b/frontend/src/pages/Index.tsx @@ -56,7 +56,7 @@ export default observer((props: IProps) => { diff --git a/frontend/src/pages/RadioHistory.tsx b/frontend/src/pages/RadioHistory.tsx index bc232ab9d..057aa182c 100644 --- a/frontend/src/pages/RadioHistory.tsx +++ b/frontend/src/pages/RadioHistory.tsx @@ -38,21 +38,21 @@ export default observer((props: IProps) => { setPopularRadios(radios); }, [radioStore.radios]); - const [end, setEnd] = useState(10); + const [limit, setLimit] = useState(10); const nextLoadingRadios = useCallback(() => { if (!isStillHaveRadios) return; - setEnd(end + 10); - }, [end]); + setLimit(limit + 10); + }, [limit]); const [isStillHaveRadios, setIsStillHaveRadios] = useState(true); useEffect(() => { if (!radioStore.radios) return; - if (end >= radioStore.radios.length) { + if (limit >= radioStore.radios.length) { setIsStillHaveRadios(false); } - }, [end, radioStore.radios]); + }, [limit, radioStore.radios]); return (
@@ -66,7 +66,7 @@ export default observer((props: IProps) => { {isStillHaveRadios && } diff --git a/frontend/src/stores/RadioStore.ts b/frontend/src/stores/RadioStore.ts index 7b90f36ae..37a097591 100644 --- a/frontend/src/stores/RadioStore.ts +++ b/frontend/src/stores/RadioStore.ts @@ -51,16 +51,16 @@ export default class RadioStore { } public latestRadios( - { begin, end }: { begin?: number; end?: number } = { - begin: 0, - end: undefined + { offset, limit }: { offset?: number; limit?: number } = { + offset: 0, + limit: undefined } ): IRadio[] | undefined { return ( this.radios && this.radios .sort((radioA, radioB) => radioB.id - radioA.id) - .slice(begin, end) + .slice(offset, limit) ); } }