React Hooks

Author: gndx

src/containers/App.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import Header from '../components/Header';
 import Search from '../components/Search';
 import Categories from '../components/Categories';
@@ -8,35 +8,47 @@ import Footer from '../components/Footer';
 
 import '../assets/styles/App.scss';
 
-const App = () => (
-  <div className="App">
-    <Header />
-    <Search />
-
-    <Categories title="Mi Lista">
-      <Carousel>
-        <CarouselItem />
-        <CarouselItem />
-        <CarouselItem />
-        <CarouselItem />
-      </Carousel>
-    </Categories>
-
-    <Categories title="Tendencias">
-      <Carousel>
-        <CarouselItem />
-        <CarouselItem />
-      </Carousel>
-    </Categories>
-
-    <Categories title="Originales de Platzi Video">
-      <Carousel>
-        <CarouselItem />
-      </Carousel>
-    </Categories>
-
-    <Footer />
-  </div>
-);
+const App = () => {
+  const [ videos, setVideos ] = useState([]);
+
+  useEffect(() => {
+    fetch('http://localhost:3000/initalState')
+      .then(response => response.json())
+      .then(data => setVideos(data));
+  }, []);
+
+  console.log(videos);
+
+  return (
+    <div className="App">
+      <Header />
+      <Search />
+
+      <Categories title="Mi Lista">
+        <Carousel>
+          <CarouselItem />
+          <CarouselItem />
+          <CarouselItem />
+          <CarouselItem />
+        </Carousel>
+      </Categories>
+
+      <Categories title="Tendencias">
+        <Carousel>
+          <CarouselItem />
+          <CarouselItem />
+        </Carousel>
+      </Categories>
+
+      <Categories title="Originales de Platzi Video">
+        <Carousel>
+          <CarouselItem />
+        </Carousel>
+      </Categories>
+
+      <Footer />
+    </div>
+  );
+}
 
 export default App;