From a46b28e15a892509e3209dab543b59869b886fb3 Mon Sep 17 00:00:00 2001 From: kobakakzu0429 Date: Sun, 9 Jun 2019 13:35:23 +0900 Subject: [PATCH 1/6] add VIVID_ORANGE --- frontend/src/constants/styles/color.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/constants/styles/color.ts b/frontend/src/constants/styles/color.ts index cf4e7e941..13ddfa5a2 100644 --- a/frontend/src/constants/styles/color.ts +++ b/frontend/src/constants/styles/color.ts @@ -4,6 +4,7 @@ interface IColor { export default { ORANGE: "#edb600", + VIVID_ORANGE: "#E59134", BLUE: "#00AFEC", SKY_BLUE: "#A8E1E3", BLACK: "#565A62", From c3be4c797ad9a8cf8d98662288d05d90e57fce7e Mon Sep 17 00:00:00 2001 From: kobakakzu0429 Date: Sun, 9 Jun 2019 13:36:06 +0900 Subject: [PATCH 2/6] add observer --- frontend/src/pages/RadioHistory.tsx | 50 +++++++++++++++++++---------- 1 file changed, 33 insertions(+), 17 deletions(-) diff --git a/frontend/src/pages/RadioHistory.tsx b/frontend/src/pages/RadioHistory.tsx index 2e237d607..745cfaf09 100644 --- 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 () => ( -
- Radio History - - - - - - - - - - - - -
-); +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 ( +
+ Radio History + + + + + + + + + + + + +
+ ); +}); const Container = styled.div` display: flex; From a2bd607ef3d5476cac908e422f8cd92fae66d7a6 Mon Sep 17 00:00:00 2001 From: kobakakzu0429 Date: Sun, 9 Jun 2019 13:37:10 +0900 Subject: [PATCH 3/6] add --- .../molecules/RadioCard/RadioCardWrapper.tsx | 26 ++++-- .../RadioHistory/RadioHistoryWrapper.tsx | 82 ++++++++++--------- 2 files changed, 65 insertions(+), 43 deletions(-) diff --git a/frontend/src/components/molecules/RadioCard/RadioCardWrapper.tsx b/frontend/src/components/molecules/RadioCard/RadioCardWrapper.tsx index 5ec1250a1..8de809eb0 100644 --- 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 () => ; +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 ( + + + + + + ); +}; 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 index 05c98bb03..a6e4cfb0f 100644 --- 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 () => ( - - - - category - - - 2018/04 - - - 2018/03 - - - 2018/02 - - - 2018/01 - - - - - - - - - - - - - - - - - - - - -); +import CircleSpinner from "@/components/atoms/Spinners/CircleSpinner"; + +import { IRadio } from "@/api/RadioApi"; + +interface IProps { + radios: IRadio[]; +} + +export default (props: IProps) => { + const { radios } = props; + + return ( + + + + category + + + 2018/04 + + + 2018/03 + + + 2018/02 + + + 2018/01 + + + {radios ? ( + + {radios.map(radio => ( + + ))} + + ) : ( + + )} + + + + ); +}; const Wrapper = styled.div` width: 100%; From 37989bf90dd62594a8c695d685b8779a13f0a149 Mon Sep 17 00:00:00 2001 From: kobakakzu0429 Date: Sun, 9 Jun 2019 13:38:11 +0900 Subject: [PATCH 4/6] create RadioCardImage and RadioCardContent --- .../atoms/RadioCard/RadioCardContent.tsx | 28 ++++++++++++++++ .../atoms/RadioCard/RadioCardImage.tsx | 32 +++++++++++++++++++ 2 files changed, 60 insertions(+) create mode 100644 frontend/src/components/atoms/RadioCard/RadioCardContent.tsx create mode 100644 frontend/src/components/atoms/RadioCard/RadioCardImage.tsx diff --git a/frontend/src/components/atoms/RadioCard/RadioCardContent.tsx b/frontend/src/components/atoms/RadioCard/RadioCardContent.tsx new file mode 100644 index 000000000..8803db428 --- /dev/null +++ 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) => { + const { title, description } = props; + + return ( + + {title} + + + ); +}; + +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 new file mode 100644 index 000000000..7ffb55fa5 --- /dev/null +++ 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) => { + const { image } = props; + + return ( + + + + ); +}; + +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}; +`; From 2a73a9d56199a05b03939a4ec74cfaf0f17dde81 Mon Sep 17 00:00:00 2001 From: kobakakzu0429 Date: Sun, 9 Jun 2019 13:43:07 +0900 Subject: [PATCH 5/6] create RadioCardPlayButton --- .../atoms/RadioCard/RadioCardPlayButton.tsx | 53 +++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 frontend/src/components/atoms/RadioCard/RadioCardPlayButton.tsx diff --git a/frontend/src/components/atoms/RadioCard/RadioCardPlayButton.tsx b/frontend/src/components/atoms/RadioCard/RadioCardPlayButton.tsx new file mode 100644 index 000000000..80cdee148 --- /dev/null +++ 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) => { + const { mp3, play_time } = props; + + const isPlay = !false; + + return ( + + + {isPlay ? ( + + ) : ( + + )} + + + ); +}; + +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)``; From 24a2892ea4d18c3edb92fe575c2a03298726f34a Mon Sep 17 00:00:00 2001 From: kobakakzu0429 Date: Wed, 12 Jun 2019 00:56:13 +0900 Subject: [PATCH 6/6] fix orange color --- frontend/src/constants/styles/color.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/constants/styles/color.ts b/frontend/src/constants/styles/color.ts index 13ddfa5a2..4c58708ca 100644 --- a/frontend/src/constants/styles/color.ts +++ b/frontend/src/constants/styles/color.ts @@ -3,7 +3,7 @@ interface IColor { } export default { - ORANGE: "#edb600", + ORANGE: "#ECB73F", VIVID_ORANGE: "#E59134", BLUE: "#00AFEC", SKY_BLUE: "#A8E1E3",