Merge pull request #373 from kure-kosen/react/create-radio-card

React/create radio card
kure-kosen · Jul 9, 2019 · a2230d2 · a2230d2
2 parents 320ed48 + 24a2892
commit a2230d2
Show file tree

Hide file tree

Showing 7 changed files with 213 additions and 61 deletions.
diff --git a/frontend/src/components/atoms/RadioCard/RadioCardContent.tsx b/frontend/src/components/atoms/RadioCard/RadioCardContent.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import styled from "styled-components";
+
+import { IRadio } from "@/api/RadioApi";
+import { color } from "@/constants/styles";
+
+export default (props: Pick<IRadio, "title" | "description">) => {
+  const { title, description } = props;
+
+  return (
+    <Wrapper>
+      <Title>{title}</Title>
+      <Description dangerouslySetInnerHTML={{ __html: description }} />
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  width: 100%;
+  height: 100%;
+`;
+
+const Title = styled.h3`
+  font-size: 1.2rem;
+  color: ${color.BLUE};
+  text-align: center;
+`;
+const Description = styled.p``;
diff --git a/frontend/src/components/atoms/RadioCard/RadioCardImage.tsx b/frontend/src/components/atoms/RadioCard/RadioCardImage.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import styled from "styled-components";
+
+import { IRadio } from "@/api/RadioApi";
+import { color } from "@/constants/styles";
+
+export default (props: Pick<IRadio, "image">) => {
+  const { image } = props;
+
+  return (
+    <Wrapper>
+      <Image src={image} />
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  width: 100%;
+`;
+
+const Image = styled.img`
+  object-fit: cover;
+  width: calc(100% + 6px);
+  margin-top: -3px;
+  margin-left: -3px;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  border-top: 3px solid ${color.SKY_BLUE};
+  border-left: 3px solid ${color.SKY_BLUE};
+  border-right: 3px solid ${color.SKY_BLUE};
+  border-bottom: 3px solid ${color.SKY_BLUE};
+`;
diff --git a/frontend/src/components/atoms/RadioCard/RadioCardPlayButton.tsx b/frontend/src/components/atoms/RadioCard/RadioCardPlayButton.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+import styled from "styled-components";
+
+import { IRadio } from "@/api/RadioApi";
+import { color } from "@/constants/styles";
+
+export default (props: Pick<IRadio, "mp3" | "play_time">) => {
+  const { mp3, play_time } = props;
+
+  const isPlay = !false;
+
+  return (
+    <Wrapper>
+      <ButtonWrapper>
+        {isPlay ? (
+          <PlayButton className="fas fa-play" />
+        ) : (
+          <PauseButton className="fas fa-pause" />
+        )}
+      </ButtonWrapper>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  position: absolute;
+  top: ${220 - 32 / 2}px;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  width: 32px;
+  height: 32px;
+  background-color: ${color.ORANGE};
+  border: 3px solid ${color.VIVID_ORANGE};
+  border-radius: 50%;
+`;
+
+const ButtonWrapper = styled.div`
+  text-align: center;
+  margin-top: -2px;
+`;
+
+const ButtonBase = styled.i`
+  line-height: 32px;
+  font-size: 0.7rem;
+  color: ${color.WHITE};
+`;
+
+const PlayButton = styled(ButtonBase)`
+  padding-left: 2.5px;
+`;
+
+const PauseButton = styled(ButtonBase)``;
diff --git a/frontend/src/components/molecules/RadioCard/RadioCardWrapper.tsx b/frontend/src/components/molecules/RadioCard/RadioCardWrapper.tsx
@@ -1,13 +1,29 @@
 import React from "react";
 import styled from "styled-components";
 
-import card from "./radio-card.png";
+import { IRadio } from "@/api/RadioApi";
+import { color } from "@/constants/styles";
 
-export default () => <RadioCardWrapperStyle />;
+import CardImage from "@/components/atoms/RadioCard/RadioCardImage";
+import CardContent from "@/components/atoms/RadioCard/RadioCardContent";
+import PlayButton from "@/components/atoms/RadioCard/RadioCardPlayButton";
+
+export default (props: IRadio) => {
+  const { title, description, mp3, image, play_time } = props;
+
+  return (
+    <RadioCardWrapperStyle>
+      <CardImage image={image} />
+      <PlayButton mp3={mp3} play_time={play_time} />
+      <CardContent title={title} description={description} />
+    </RadioCardWrapperStyle>
+  );
+};
 
 const RadioCardWrapperStyle = styled.div`
-  width: 282px;
+  width: 280px;
   height: 445px;
-  background-image: url(${card});
-  background-size: cover;
+  border-radius: 8px;
+  border: 3px solid ${color.SKY_BLUE};
+  position: relative;
 `;
diff --git a/frontend/src/components/molecules/RadioHistory/RadioHistoryWrapper.tsx b/frontend/src/components/molecules/RadioHistory/RadioHistoryWrapper.tsx
@@ -8,44 +8,50 @@ import RadioHistoryFeature from "@/components/atoms/RadioHistory/RadioHistoryFea
 
 import RadioCardWrapper from "@/components/molecules/RadioCard/RadioCardWrapper";
 
-export default () => (
-  <Wrapper>
-    <RadioHistoryFeature />
-    <RadioHistoryContentArea>
-      <Title>category</Title>
-      <RadioDateButtonWrapper>
-        <RadioDateButton name="201804" type="button">
-          2018/04
-        </RadioDateButton>
-        <RadioDateButton name="201803" type="button">
-          2018/03
-        </RadioDateButton>
-        <RadioDateButton name="201802" type="button">
-          2018/02
-        </RadioDateButton>
-        <RadioDateButton name="201801" type="button">
-          2018/01
-        </RadioDateButton>
-      </RadioDateButtonWrapper>
-      <RadioCardsWrapper>
-        <RadioCardWrapper />
-        <RadioCardWrapper />
-        <RadioCardWrapper />
-      </RadioCardsWrapper>
-      <RadioCardsWrapper>
-        <RadioCardWrapper />
-        <RadioCardWrapper />
-        <RadioCardWrapper />
-      </RadioCardsWrapper>
-      <RadioCardsWrapper>
-        <RadioCardWrapper />
-        <RadioCardWrapper />
-        <RadioCardWrapper />
-      </RadioCardsWrapper>
-      <MoreButton to="" />
-    </RadioHistoryContentArea>
-  </Wrapper>
-);
+import CircleSpinner from "@/components/atoms/Spinners/CircleSpinner";
+
+import { IRadio } from "@/api/RadioApi";
+
+interface IProps {
+  radios: IRadio[];
+}
+
+export default (props: IProps) => {
+  const { radios } = props;
+
+  return (
+    <Wrapper>
+      <RadioHistoryFeature />
+      <RadioHistoryContentArea>
+        <Title>category</Title>
+        <RadioDateButtonWrapper>
+          <RadioDateButton name="201804" type="button">
+            2018/04
+          </RadioDateButton>
+          <RadioDateButton name="201803" type="button">
+            2018/03
+          </RadioDateButton>
+          <RadioDateButton name="201802" type="button">
+            2018/02
+          </RadioDateButton>
+          <RadioDateButton name="201801" type="button">
+            2018/01
+          </RadioDateButton>
+        </RadioDateButtonWrapper>
+        {radios ? (
+          <RadioCardsWrapper>
+            {radios.map(radio => (
+              <RadioCardWrapper key={radio.id} {...radio} />
+            ))}
+          </RadioCardsWrapper>
+        ) : (
+          <CircleSpinner />
+        )}
+        <MoreButton to="" />
+      </RadioHistoryContentArea>
+    </Wrapper>
+  );
+};
 
 const Wrapper = styled.div`
   width: 100%;

diff --git a/frontend/src/constants/styles/color.ts b/frontend/src/constants/styles/color.ts
@@ -3,7 +3,8 @@ interface IColor {
 }
 
 export default {
-  ORANGE: "#edb600",
+  ORANGE: "#ECB73F",
+  VIVID_ORANGE: "#E59134",
   BLUE: "#00AFEC",
   SKY_BLUE: "#A8E1E3",
   BLACK: "#565A62",

diff --git a/frontend/src/pages/RadioHistory.tsx b/frontend/src/pages/RadioHistory.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import styled from "styled-components";
+import { observer } from "mobx-react-lite";
 
 import { device } from "@/constants/styles";
 
@@ -12,23 +13,38 @@ import RadioHistoryWrapper from "@/components/molecules/RadioHistory/RadioHistor
 import RadioSearcher from "@/components/molecules/RadioSearcher";
 import BlogWrapper from "@/components/molecules/Blogs/BlogWrapper";
 
-export default () => (
-  <div>
-    <HeroArea>Radio History</HeroArea>
-    <Container>
-      <Sidebar>
-        <RadioSearcher />
-        <AboutSidebar />
-        <PopularRadioWrapper />
-        <TweetStream />
-      </Sidebar>
-      <MainContentWrapper>
-        <RadioHistoryWrapper />
-        <BlogWrapper />
-      </MainContentWrapper>
-    </Container>
-  </div>
-);
+import RootStore from "@/stores/RootStore";
+
+interface IProps {
+  rootStore?: RootStore;
+}
+
+export default observer((props: IProps) => {
+  const { rootStore } = props;
+  const { radioStore } = rootStore!;
+
+  React.useEffect(() => {
+    radioStore.fetchRadios();
+  }, []);
+
+  return (
+    <div>
+      <HeroArea>Radio History</HeroArea>
+      <Container>
+        <Sidebar>
+          <RadioSearcher />
+          <AboutSidebar />
+          <PopularRadioWrapper />
+          <TweetStream />
+        </Sidebar>
+        <MainContentWrapper>
+          <RadioHistoryWrapper radios={radioStore.radios!} />
+          <BlogWrapper />
+        </MainContentWrapper>
+      </Container>
+    </div>
+  );
+});
 
 const Container = styled.div`
   display: flex;