Merge pull request #38 from SoyBeansLab/fix/slider-props

Fix/slider props
SoyBeansLab · Aug 19, 2019 · 8f08bd7 · 8f08bd7
2 parents ed07b43 + 5b9ec1e
commit 8f08bd7
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 38 deletions.
diff --git a/src/molecules/Slider.js b/src/molecules/Slider.js
@@ -1,48 +1,36 @@
 import React from "react";
+import PropTypes from "prop-types";
 import Slider from "react-slick";
 import SliderItem from "./SliderItem";
 
-class HomeSlider extends React.Component {
-  render() {
-    var settings = {
-      dots: true,
-      infinite: true,
-      speed: 500,
-      slidesToShow: 1,
-      slidesToScroll: 1,
-      autoplay: true,
-      arrow: true,
-    };
+export default function HomeSlider(props) {
+  const settings = {
+    dots: true,
+    infinite: true,
+    speed: 500,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    autoplay: true,
+    arrow: true,
+  };
+  const slideItemList = props.slideItemList;
 
-    return (
-      <Slider {...settings}>
-        <div>
+  return (
+    <Slider {...settings}>
+      {slideItemList.map(row => (
+        <div key={row.contestTitle}>
           <SliderItem
-            contestTitle="contestTitle-1"
-            contestDate="2019.11.11"
-            contestTime="16:00-17:00"
-            contestContent="これはテストです"
+            contestTitle={row.contestTitle}
+            contestDate={row.contestDate}
+            contestTime={row.contestTime}
+            contestContent={row.contestContent}
           />
         </div>
-        <div>
-          <SliderItem
-            contestTitle="contestTitle-2"
-            contestDate="2019.12.12"
-            contestTime="16:00-17:00"
-            contestContent="これはテストです"
-          />
-        </div>
-        <div>
-          <SliderItem
-            contestTitle="contestTitle-3"
-            contestDate="2019.01.01"
-            contestTime="16:00-19:00"
-            contestContent="text is text"
-          />
-        </div>
-      </Slider>
-    );
-  }
+      ))}
+    </Slider>
+  );
 }
 
-export default HomeSlider;
+HomeSlider.propTypes = {
+  slideItemList: PropTypes.array,
+};
diff --git a/src/pages/temp/works-para.js b/src/pages/temp/works-para.js
@@ -5,6 +5,7 @@ import RankingTable from "../../molecules/RankingTable.js";
 // import ContestsListTabs from "../../molecules/ContestsListTabs.js";
 import SubmitStatusTable from "../../molecules/SubmitStatusTable.js";
 import ContestsTabs from "../../molecules/ContestTabs.js";
+import Slider from "../../molecules/Slider.js";
 
 import Contests from "../../templates/Contests.js";
 import Contest from "../../templates/Contest.js";
@@ -90,6 +91,27 @@ const submitStatusListsTestData = [
   },
 ];
 
+const slideItemListTestData = [
+  {
+    contestTitle: "Hello World",
+    contestDate: "2019-07-01",
+    contestTime: 120,
+    contestContest: "Welcome!!!",
+  },
+  {
+    contestTitle: "老害コンテスト",
+    contestDate: "2019-07-01",
+    contestTime: 120,
+    contestContest: "Welcome!!!",
+  },
+  {
+    contestTitle: "Welcome Contest",
+    contestDate: "2019-07-01",
+    contestTime: 120,
+    contestContest: "Welcome!!!",
+  },
+];
+
 const Works = () => (
   <div>
     <h1>para works</h1>
@@ -128,6 +150,9 @@ const Works = () => (
       scheduledContestLists={contestsTableTestData2}
       finishedContestLists={contestsTableTestData}
     />
+
+    <h2>Slider</h2>
+    <Slider slideItemList={slideItemListTestData} />
   </div>
 );