From f5d15d59986e9747d550f4848b2d582d7d16c8b5 Mon Sep 17 00:00:00 2001
From: mattyl006 <mattyl@st.amu.edu.pl>
Date: Tue, 26 Jul 2022 17:02:40 +0200
Subject: [PATCH] refactor Readme section component

---
 src/components/elements/InfoItem.js |  18 +++++
 src/components/elements/InfoList.js |  57 ++++++++++++++++
 src/components/sections/Readme.js   | 101 ++--------------------------
 3 files changed, 79 insertions(+), 97 deletions(-)
 create mode 100644 src/components/elements/InfoItem.js
 create mode 100644 src/components/elements/InfoList.js

diff --git a/src/components/elements/InfoItem.js b/src/components/elements/InfoItem.js
new file mode 100644
index 0000000..18e14a5
--- /dev/null
+++ b/src/components/elements/InfoItem.js
@@ -0,0 +1,18 @@
+import React from "react";
+import {FlexRow, Svg} from "../../utils/containers";
+import theme from "../../utils/theme";
+import {Medium} from "../../utils/fonts";
+
+const InfoItem = (props) => {
+    return (
+        <FlexRow as='li' gap={props.gap}>
+            <Svg src={props.icon} width={props.size} height={props.size}
+                 backgroundColor={theme.colors.dark} size='contain'/>
+            <Medium as='p'>
+                {props.children ? props.children : 'xxx'}
+            </Medium>
+        </FlexRow>
+    );
+}
+
+export default InfoItem;
diff --git a/src/components/elements/InfoList.js b/src/components/elements/InfoList.js
new file mode 100644
index 0000000..ee8c08e
--- /dev/null
+++ b/src/components/elements/InfoList.js
@@ -0,0 +1,57 @@
+import React from "react";
+import {FlexColumn} from "../../utils/containers";
+import InfoItem from "./InfoItem";
+import textIco from "../../assets/text_ico.svg";
+import metricIco from "../../assets/metric_ico.svg";
+import bestScoreIco from "../../assets/cup_ico.svg";
+import baselineIco from "../../assets/baseline_ico.svg";
+import timeIco from "../../assets/clock_ico.svg";
+import {RENDER_DEADLINE_TIME} from "../../utils/globals";
+import coinsIco from "../../assets/coins_ico.svg";
+import Media from "react-media";
+import theme from "../../utils/theme";
+
+const InfoList = (props) => {
+    const itemsRender = (gap, iconsSize) => {
+        return (
+            <>
+                <InfoItem icon={textIco} gap={gap} size={iconsSize}>
+                    The word-processing challenge
+                </InfoItem>
+                <InfoItem icon={metricIco} gap={gap} size={iconsSize}>
+                    Metrics: {props.metric ? props.metric : 'xxx'}
+                </InfoItem>
+                <InfoItem icon={bestScoreIco} gap={gap} size={iconsSize}>
+                    Best score: {props.bestScore ? props.bestScore : 'xxx'}
+                </InfoItem>
+                <InfoItem icon={baselineIco} gap={gap} size={iconsSize}>
+                    Baseline: {props.baseline ? props.baseline : 'xxx'}
+                </InfoItem>
+                <InfoItem icon={timeIco} gap={gap} size={iconsSize}>
+                    Deadline: {props.deadline ? RENDER_DEADLINE_TIME(props.deadline) : 'xxx'}
+                </InfoItem>
+                <InfoItem icon={coinsIco} gap={gap} size={iconsSize}>
+                    Prize: {props.prize ? props.prize : 'xxx'}
+                </InfoItem>
+            </>
+        );
+    }
+
+    return (
+        <>
+            <Media query={theme.mobile}>
+                <FlexColumn gap='10px' as='ul' alignmentX='flex-start'>
+                    {itemsRender('10px', props.iconsSize)}
+                </FlexColumn>
+            </Media>
+            <Media query={theme.desktop}>
+                <FlexColumn as='ul' gap='10px' padding='24px 30px' shadow={theme.shadow}
+                            alignmentX='flex-start' border={`1px solid ${theme.colors.dark05}`}>
+                    {itemsRender('20px', props.iconsSize)}
+                </FlexColumn>
+            </Media>
+        </>
+    );
+}
+
+export default InfoList;
\ No newline at end of file
diff --git a/src/components/sections/Readme.js b/src/components/sections/Readme.js
index 8fec011..983d170 100644
--- a/src/components/sections/Readme.js
+++ b/src/components/sections/Readme.js
@@ -1,18 +1,12 @@
 import React from "react";
-import {FlexColumn, FlexRow, Svg} from "../../utils/containers";
+import {FlexColumn} from "../../utils/containers";
 import {Body, H2, Medium} from "../../utils/fonts";
 import Media from "react-media";
 import theme from "../../utils/theme";
-import baselineIco from '../../assets/baseline_ico.svg';
-import bestScoreIco from '../../assets/cup_ico.svg';
-import timeIco from '../../assets/clock_ico.svg';
-import metricIco from '../../assets/metric_ico.svg';
-import coinsIco from '../../assets/coins_ico.svg';
-import textIco from '../../assets/text_ico.svg';
-import {RENDER_DEADLINE_TIME} from "../../utils/globals";
 import getChallengeFullDescription from "../../api/getChallengeFullDescription";
 import {markdown} from "markdown";
 import styled from "styled-components";
+import InfoList from "../elements/InfoList";
 
 const ReadmeStyle = styled(Body)`
   h3 {
@@ -66,50 +60,7 @@ const Readme = (props) => {
                     <H2 as='h2'>
                         Info
                     </H2>
-                    <FlexColumn gap='10px' as='ul' alignmentX='flex-start'>
-                        <FlexRow gap='10px' as='li'>
-                            <Svg src={textIco} width='24px' height='24px'
-                                 backgroundColor={theme.colors.dark} size='contain'/>
-                            <Medium as='p'>
-                                The word-processing challenge
-                            </Medium>
-                        </FlexRow>
-                        <FlexRow gap='10px' as='li'>
-                            <Svg src={metricIco} width='24px' height='24px'
-                                 backgroundColor={theme.colors.dark} size='contain'/>
-                            <Medium as='p'>
-                                Metrics: {props.metric ? props.metric : 'xxx'}
-                            </Medium>
-                        </FlexRow>
-                        <FlexRow gap='10px' as='li'>
-                            <Svg src={bestScoreIco} width='24px' height='24px'
-                                 backgroundColor={theme.colors.dark} size='contain'/>
-                            <Medium as='p'>
-                                Best score: {props.bestScore ? props.bestScore : 'xxx'}
-                            </Medium>
-                        </FlexRow>
-                        <FlexRow gap='10px' as='li'>
-                            <Svg src={baselineIco} width='24px' height='24px'
-                                 backgroundColor={theme.colors.dark} size='contain'/>
-                            <Medium as='p'>
-                                Baseline: {props.baseline ? props.baseline : 'xxx'}
-                            </Medium>
-                        </FlexRow>
-                        <FlexRow gap='10px' as='li'>
-                            <Svg src={timeIco} width='24px' height='24px'
-                                 backgroundColor={theme.colors.dark} size='contain'/>
-                            <Medium as='p'>
-                                Deadline: {props.deadline ? RENDER_DEADLINE_TIME(props.deadline) : 'xxx'}
-                            </Medium>
-                        </FlexRow>
-                        <FlexRow gap='10px' as='li'>
-                            <Svg src={coinsIco} width='24px' height='24px'
-                                 backgroundColor={theme.colors.dark} size='contain'/>
-                            <Medium as='p'>
-                                Prize: {props.prize ? props.prize : 'xxx'}
-                            </Medium>
-                        </FlexRow>
-                    </FlexColumn>
+                    <InfoList iconsSize='24px'/>
                 </FlexColumn>
                 <FlexColumn alignmentX='flex-start' maxWidth='260px'>
                     <H2 as='h2'>
@@ -148,51 +99,7 @@ const Readme = (props) => {
                     <H2 as='h2'>
                         Info
                     </H2>
-                    <FlexColumn as='ul' gap='10px' padding='24px 30px' shadow={theme.shadow}
-                                alignmentX='flex-start' border={`1px solid ${theme.colors.dark05}`}>
-                        <FlexRow gap='20px' as='li'>
-                            <Svg src={textIco} width='32px' height='32px'
-                                 backgroundColor={theme.colors.dark} size='contain'/>
-                            <Medium as='p'>
-                                The word-processing challenge
-                            </Medium>
-                        </FlexRow>
-                        <FlexRow gap='20px' as='li'>
-                            <Svg src={metricIco} width='32px' height='32px'
-                                 backgroundColor={theme.colors.dark} size='contain'/>
-                            <Medium as='p'>
-                                Metrics: {props.metric ? props.metric : 'xxx'}
-                            </Medium>
-                        </FlexRow>
-                        <FlexRow gap='20px' as='li'>
-                            <Svg src={bestScoreIco} width='32px' height='32px'
-                                 backgroundColor={theme.colors.dark} size='contain'/>
-                            <Medium as='p'>
-                                Best score: {props.bestScore ? props.bestScore : 'xxx'}
-                            </Medium>
-                        </FlexRow>
-                        <FlexRow gap='20px' as='li'>
-                            <Svg src={baselineIco} width='32px' height='32px'
-                                 backgroundColor={theme.colors.dark} size='contain'/>
-                            <Medium as='p'>
-                                Baseline: {props.baseline ? props.baseline : 'xxx'}
-                            </Medium>
-                        </FlexRow>
-                        <FlexRow gap='20px' as='li'>
-                            <Svg src={timeIco} width='32px' height='32px'
-                                 backgroundColor={theme.colors.dark} size='contain'/>
-                            <Medium as='p'>
-                                Deadline: {props.deadline ? RENDER_DEADLINE_TIME(props.deadline) : 'xxx'}
-                            </Medium>
-                        </FlexRow>
-                        <FlexRow gap='20px' as='li'>
-                            <Svg src={coinsIco} width='32px' height='32px'
-                                 backgroundColor={theme.colors.dark} size='contain'/>
-                            <Medium as='p'>
-                                Prize: {props.prize ? props.prize : 'xxx'}
-                            </Medium>
-                        </FlexRow>
-                    </FlexColumn>
+                    <InfoList iconsSize='32px'/>
                 </FlexColumn>
                 <FlexColumn alignmentX='flex-start' width='80%' maxWidth='1000px'>
                     <H2 as='h2'>