React/fix popular radio card

frontend/src/components/atoms/PopularRadio/RadioMiniCard.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import styled from "styled-components";
+
+import { color } from "@/constants/styles";
+import { IRadio } from "@/api/RadioApi";
+
+type Props = Pick<IRadio, "title" | "image">;
+
+export const RadioMiniCard: React.FC<Props> = ({ title, image }) => (
+  <Wrapper>
+    <ThumbnailWrapper>
+      <RadioImg src={image} />
+    </ThumbnailWrapper>
+    <RadioProperties>
+      <RadioTitle>{title}</RadioTitle>
+    </RadioProperties>
+  </Wrapper>
+);
+
+const Wrapper = styled.div`
+  width: 100%;
+  height: 75px;
+  display: flex;
+`;
+
+const ThumbnailWrapper = styled.div`
+  flex: 0 0 30%;
+`;
+
+const RadioImg = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+`;
+
+const RadioProperties = styled.div`
+  flex: 0 0 70%;
+`;
+
+const RadioTitle = styled.span`
+  color: ${color.ORANGE};
+  height: 100%;
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: center;
+  font-size: 1rem;
+`;
+
+// NOTE: DON'T REMOVE
+// const RadioImg = styled.img`
+//   width: 120px;
+//   height: auto;
+//   align-self: flex-start;
+// `;
+
+// NOTE: DON'T REMOVE
+// const RadioTitle = styled.div`
+//   color: ${color.ORANGE};
+//   font-size: 1rem;
+// `;
+
+// NOTE: DON'T REMOVE
+// const RadioDescription = styled.p`
+//   color: ${color.GRAY};
+//   font-size: 0.9rem;
+//   margin-top: 6px;
+//   text-indent: 0.9rem;
+// `;

frontend/src/components/molecules/PopularRadio/PopularRadioWrapper.tsx

@@ -1,33 +1,29 @@
 import React from "react";
 import styled from "styled-components";
-
 import { color, heading } from "@/constants/styles";
 
-import sidebarRadioImg from "./sidebar-radio-img.png";
-
 import MoreButton from "@/components/atoms/Buttons/MoreButton";
-import Card from "@/components/atoms/PopularRadio/Card";
+import { RadioMiniCard } from "@/components/atoms/PopularRadio/RadioMiniCard";
+import { IRadio } from "@/api/RadioApi";
+import { Link } from "react-router-dom";
+
+interface Props {
+  radios: IRadio[] | undefined;
+}
 
-export default () => (
+export const PopularRadiosWrapper = ({ radios }: Props) => (
   <PopularRadioWrapperStyle>
     <Title>popular radio</Title>
+
     <PopularRadioCardWrapper>
-      <Card
-        title="#50 ヤマトーーク!"
-        img={sidebarRadioImg}
-        description="エナジードリンク、お年玉の使い道、登山、Advent Calendar、エディタ、LTalksなどの話をしました。"
-      />
-      <Card
-        title="#50 ヤマトーーク!"
-        img={sidebarRadioImg}
-        description="エナジードリンク、お年玉の使い道、登山、Advent Calendar、エディタ、LTalksなどの話をしました。"
-      />
-      <Card
-        title="#50 ヤマトーーク!"
-        img={sidebarRadioImg}
-        description="エナジードリンク、お年玉の使い道、登山、Advent Calendar、エディタ、LTalksなどの話をしました。"
-      />
+      {radios &&
+        radios.map(({ id, title, image }) => (
+          <Link to={`/radios/${id}`}>
+            <RadioMiniCard title={title} image={image} />
+          </Link>
+        ))}
     </PopularRadioCardWrapper>
+
     <MoreButton to="/radios" />
   </PopularRadioWrapperStyle>
 );
@@ -48,4 +44,7 @@ const Title = styled.div`
 const PopularRadioCardWrapper = styled.div`
   width: auto;
   height: auto;
+  div {
+    margin: 5px 0;
+  }
 `;

frontend/src/pages/Index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import { observer } from "mobx-react-lite";
 
@@ -13,22 +13,32 @@ import WeeklyComic from "@/components/atoms/WeeklyComic";
 import TweetStream from "@/components/atoms/Features/TweetStream";
 
 import { PersonalitiesSlider } from "@/components/molecules/Personalities/PersonalitiesSlider";
-import PopularRadioWrapper from "@/components/molecules/PopularRadio/PopularRadioWrapper";
+import { PopularRadiosWrapper } from "@/components/molecules/PopularRadio/PopularRadioWrapper";
 import RadioCardWrapper from "@/components/molecules/RadioCard/RadioCardWrapper";
 import BlogWrapper from "@/components/molecules/Blogs/BlogWrapper";
+import { IRadio } from "@/api/RadioApi";
 
 interface IProps {
   rootStore?: RootStore;
 }
 
 export default observer((props: IProps) => {
+  const { rootStore } = props;
+  const { radioStore, personalityStore } = rootStore!;
+
   useEffect(() => {
     radioStore.fetchRadios();
     personalityStore.fetchRegularPersonality();
   }, []);
 
-  const { rootStore } = props;
-  const { radioStore, personalityStore } = rootStore!;
+  const [popularRadios, setPopularRadios] = useState<IRadio[] | undefined>(
+    undefined
+  );
+
+  useEffect(() => {
+    const radios = radioStore.shuffledRadios({ limit: 3 });
+    setPopularRadios(radios);
+  }, [radioStore.radios]);
 
   return (
     <div>
@@ -40,7 +50,7 @@ export default observer((props: IProps) => {
         <Sidebar>
           <AboutSidebar />
           <WeeklyComic />
-          <PopularRadioWrapper />
+          <PopularRadiosWrapper radios={popularRadios} />
           <TweetStream />
         </Sidebar>
         <MainContentWrapper>

frontend/src/pages/Personality.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 import { observer } from "mobx-react-lite";
 
@@ -13,25 +13,35 @@ import Personalities from "@/components/molecules/Personalities";
 import CircleSpinner from "@/components/atoms/Spinners/CircleSpinner";
 
 import { PersonalityHeroArea } from "@/components/molecules/HeroArea/PersonalityHeroArea";
-import PopularRadioWrapper from "@/components/molecules/PopularRadio/PopularRadioWrapper";
+import { PopularRadiosWrapper } from "@/components/molecules/PopularRadio/PopularRadioWrapper";
+import { IRadio } from "@/api/RadioApi";
 
 export default observer((props: { rootStore: RootStore }) => {
   const { rootStore } = props;
-  const { personalityStore } = rootStore;
+  const { personalityStore, radioStore } = rootStore;
   const { personalities } = personalityStore;
 
-  React.useEffect(() => {
+  useEffect(() => {
     personalityStore.fetchPersonalities();
   }, []);
 
+  const [popularRadios, setPopularRadios] = useState<IRadio[] | undefined>(
+    undefined
+  );
+
+  useEffect(() => {
+    const radios = radioStore.shuffledRadios({ limit: 3 });
+    setPopularRadios(radios);
+  }, [radioStore.radios]);
+
   return (
     <div>
       <PersonalityHeroArea />
       <Contrainer>
         <Sidebar>
           <AboutSidebar />
           <WeeklyComic />
-          <PopularRadioWrapper />
+          <PopularRadiosWrapper radios={popularRadios} />
           <TweetStream />
         </Sidebar>
         <MainContentWrapper>

frontend/src/pages/RadioHistory.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 import { observer } from "mobx-react-lite";
 
@@ -8,12 +8,13 @@ import { ResponsibleHeroArea } from "@/components/atoms/HeroArea";
 import AboutSidebar from "@/components/atoms/Features/AboutSidebar";
 import TweetStream from "@/components/atoms/Features/TweetStream";
 
-import PopularRadioWrapper from "@/components/molecules/PopularRadio/PopularRadioWrapper";
+import { PopularRadiosWrapper } from "@/components/molecules/PopularRadio/PopularRadioWrapper";
 import { RadioHistoryWrapper } from "@/components/molecules/RadioHistory/RadioHistoryWrapper";
 import RadioSearcher from "@/components/molecules/RadioSearcher";
 import BlogWrapper from "@/components/molecules/Blogs/BlogWrapper";
 
 import RootStore from "@/stores/RootStore";
+import { IRadio } from "@/api/RadioApi";
 
 interface IProps {
   rootStore?: RootStore;
@@ -23,18 +24,27 @@ export default observer((props: IProps) => {
   const { rootStore } = props;
   const { radioStore } = rootStore!;
 
-  React.useEffect(() => {
+  useEffect(() => {
     radioStore.fetchRadios();
   }, []);
 
+  const [popularRadios, setPopularRadios] = useState<IRadio[] | undefined>(
+    undefined
+  );
+
+  useEffect(() => {
+    const radios = radioStore.shuffledRadios({ limit: 3 });
+    setPopularRadios(radios);
+  }, [radioStore.radios]);
+
   return (
     <div>
       <ResponsibleHeroArea>Radio History</ResponsibleHeroArea>
       <Container>
         <Sidebar>
           <RadioSearcher />
           <AboutSidebar />
-          <PopularRadioWrapper />
+          <PopularRadiosWrapper radios={popularRadios} />
           <TweetStream />
         </Sidebar>
         <MainContentWrapper>

frontend/src/stores/RadioStore.ts

@@ -2,6 +2,10 @@ import { action, observable } from "mobx";
 
 import RadioApi, { IRadio } from "@/api/RadioApi";
 
+interface ShuffledRadios {
+  limit?: number;
+}
+
 export default class RadioStore {
   @observable public radios?: IRadio[];
   @observable public radio?: IRadio;
@@ -18,6 +22,21 @@ export default class RadioStore {
     this.setRadios(res.data);
   }
 
+  public shuffledRadios({ limit }: ShuffledRadios): IRadio[] | undefined {
+    if (!this.radios) return;
+    const shuffledRadio = [...this.radios];
+    for (let i = 0, len = shuffledRadio.length; i < len; i++) {
+      const rand = Math.floor(Math.random() * i);
+
+      [shuffledRadio[i], shuffledRadio[rand]] = [
+        shuffledRadio[rand],
+        shuffledRadio[i]
+      ];
+    }
+
+    return shuffledRadio.slice(0, limit);
+  }
+
   public async fetchRadio(radioId: number) {
     if (this.radios && this.radios.length > 0) {
       const findResult = this.radios.find(radio => radio.id === radioId);

frontend/stories/RadioCard.stories.tsx

@@ -1,9 +1,12 @@
 import React from "react";
-import { RadioCard } from "@/components/molecules/RadioCard/RadioCard";
 import { ck013 } from "./mocks/api/radio";
+import { RadioCard } from "@/components/molecules/RadioCard/RadioCard";
+import { RadioMiniCard } from "@/components/atoms/PopularRadio/RadioMiniCard";
 
 export default {
   title: "RadioCard"
 };
 
 export const normal = () => <RadioCard {...ck013} />;
+
+export const normalMini = () => <RadioMiniCard {...ck013} />;