Merge pull request #420 from kure-kosen/react/change-radio-card-shown

React/change radio card shown

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

frontend/src/components/atoms/Buttons/MoreButtonText.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from "react";
+import styled from "styled-components";
+
+import ChkButtonBase from "@/components/atoms/Buttons/ChkButtonBase";
+
+interface Props {
+  onClick?: (e: any) => void;
+}
+
+export const MoreButtonText: FC<Props> = ({ onClick }) => {
+  return (
+    <MoreButtonWrapper onClick={onClick}>
+      <ChkButtonBase text="more" />
+    </MoreButtonWrapper>
+  );
+};
+
+const MoreButtonWrapper = styled.div`
+  margin: 0 auto;
+  width: 150px;
+`;

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) => {
             <RadioCard key={radio.id} {...radio} />
           ))}
         </TileCardsWrapper>
-        <MoreButton to="" />
       </RadioHistoryContentArea>
     </Wrapper>
   );

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) => {
           <TweetStream />
         </Sidebar>
         <MainContentWrapper>
-          <RadioCardWrapper radios={radioStore.radios} />
+          <RadioCardWrapper
+            radios={radioStore.latestRadios({ offset: 0, limit: 9 })}
+          />
+          <MoreButton to="/radios" />
           <BlogWrapper />
         </MainContentWrapper>
       </Contrainer>

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 [limit, setLimit] = useState(10);
+
+  const nextLoadingRadios = useCallback(() => {
+    if (!isStillHaveRadios) return;
+    setLimit(limit + 10);
+  }, [limit]);
+
+  const [isStillHaveRadios, setIsStillHaveRadios] = useState(true);
+
+  useEffect(() => {
+    if (!radioStore.radios) return;
+    if (limit >= radioStore.radios.length) {
+      setIsStillHaveRadios(false);
+    }
+  }, [limit, radioStore.radios]);
+
   return (
     <div>
       <ResponsibleHeroArea>Radio History</ResponsibleHeroArea>
@@ -48,7 +65,10 @@ export default observer((props: IProps) => {
           <TweetStream />
         </Sidebar>
         <MainContentWrapper>
-          <RadioHistoryWrapper radios={radioStore.radios} />
+          <RadioHistoryWrapper
+            radios={radioStore.latestRadios({ offset: 0, limit })}
+          />
+          {isStillHaveRadios && <MoreButtonText onClick={nextLoadingRadios} />}
           <BlogWrapper />
         </MainContentWrapper>
       </Container>

frontend/src/stores/RadioStore.ts

@@ -49,4 +49,18 @@ export default class RadioStore {
   @action public setRadios(radios: IRadio[]) {
     this.radios = radios;
   }
+
+  public latestRadios(
+    { 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(offset, limit)
+    );
+  }
 }