feat: series/film feature onclick

NPremchand-dev · Apr 18, 2020 · 526bc72 · 526bc72
1 parent 118dda3
commit 526bc72
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 14 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -5,7 +5,8 @@
     <title>Netflix</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <noscript>"Don't ask what the world needs, ask what makes you come alive. Because what the world needs most, is more people who
+    come alive." - Howard Thurman</noscript>
     <div id="root"></div>
   </body>
 </html>
diff --git a/src/components/card/index.js b/src/components/card/index.js
@@ -1,11 +1,17 @@
-import React from 'react';
-import { Container, Group, Title, SubTitle, Text, Meta, Entities, Item, Image } from './styles/card';
+import React, { useState, useContext, createContext, createRef } from 'react';
+
+import { Container, Group, Title, SubTitle, Text, Feature, Meta, Entities, Item, Image } from './styles/card';
+
+export const FeatureContext = createContext();
 
 export default function Card({ children, ...restProps }) {
+  const [showFeature, setShowFeature] = useState(false);
+  const [itemFeature, setItemFeature] = useState(false);
+
   return (
-    <Container {...restProps} onLoad={() => 'loaded'}>
-      {children}
-    </Container>
+    <FeatureContext.Provider value={{ showFeature, setShowFeature, itemFeature, setItemFeature }}>
+      <Container {...restProps}>{children}</Container>;
+    </FeatureContext.Provider>
   );
 }
 
@@ -37,13 +43,31 @@ Card.Meta = function CardMeta({ children, ...restProps }) {
   return <Meta {...restProps}>{children}</Meta>;
 };
 
-Card.Item = function CardItem({ children, ...restProps }) {
-  return <Item {...restProps}>{children}</Item>;
+Card.Item = function CardItem({ item, children, ...restProps }) {
+  const { showFeature, setShowFeature, setItemFeature } = useContext(FeatureContext);
+
+  return (
+    <Item
+      onClick={() => {
+        setItemFeature(item);
+        setShowFeature(true);
+      }}
+      {...restProps}
+    >
+      {children}
+    </Item>
+  );
 };
 
 Card.Image = function CardImage({ ...restProps }) {
   return <Image {...restProps} />;
 };
 
+Card.Feature = function CardFeature({ ...restProps }) {
+  const { showFeature, itemFeature } = useContext(FeatureContext);
+
+  return showFeature ? <Feature>{JSON.stringify(itemFeature)}</Feature> : null;
+};
+
 // loading state on cards (placeholder)
 // trigger dropdown panel
diff --git a/src/components/card/styles/card.js b/src/components/card/styles/card.js
@@ -87,3 +87,8 @@ export const Item = styled.div`
     margin-right: 0;
   }
 `;
+
+export const Feature = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
diff --git a/src/components/header/index.js b/src/components/header/index.js
@@ -14,6 +14,7 @@ import {
   FeatureCallOut,
   SearchInput,
   ButtonLink,
+  PlayButton,
   Text,
   Feature,
   Logo,
@@ -75,6 +76,10 @@ Header.TextLink = function HeaderTextLink({ children, ...restProps }) {
   return <Link {...restProps}>{children}</Link>;
 };
 
+Header.PlayButton = function HeaderPlayButton({ children, ...restProps }) {
+  return <PlayButton {...restProps}>{children}</PlayButton>;
+};
+
 Header.FeatureCallOut = function HeaderFeatureCallOut({ children, ...restProps }) {
   return <FeatureCallOut {...restProps}>{children}</FeatureCallOut>;
 };

diff --git a/src/components/header/styles/header.js b/src/components/header/styles/header.js
@@ -40,6 +40,7 @@ export const Group = styled.div`
 
 export const SearchInput = styled.input`
   background-color: transparent;
+  color: white;
   border: 1px solid white;
   transition: width 0.5s;
   height: 30px;
@@ -167,3 +168,23 @@ export const Logo = styled.img`
     width: 167px;
   }
 `;
+
+export const PlayButton = styled.button`
+  box-shadow: 0 0.6vw 1vw -0.4vw rgba(0, 0, 0, 0.35);
+  background-color: #e6e6e6;
+  color: #000;
+  border-width: 0;
+  padding: 10px 20px;
+  border-radius: 5px;
+  max-width: 130px;
+  font-weight: bold;
+  font-size: 20px;
+  margin-top: 10px;
+  cursor: pointer;
+  transition: background-color 0.5s ease;
+
+  &:hover {
+    background-color: #ff1e1e;
+    color: white;
+  }
+`;
diff --git a/src/containers/browse.js b/src/containers/browse.js
@@ -14,7 +14,6 @@ export default function BrowseContainer({ slides }) {
 
   useEffect(() => {
     setLoading(true);
-    console.log('Changed', profile.displayName);
     setTimeout(() => {
       setLoading(false);
     }, 3000);
@@ -59,16 +58,17 @@ export default function BrowseContainer({ slides }) {
             City. Arthur wears two masks -- the one he paints for his day job as a clown, and the guise he projects in a
             futile attempt to feel like he's part of the world around him.
           </Header.Text>
+          <Header.PlayButton>Play</Header.PlayButton>
         </Header.Feature>
       </Header>
 
       <Card.Group style={{ marginTop: '-150px' }}>
         {slides[selection].map((slideItem) => (
-          <Card key={`${slideItem.title}-${slideItem.genre}`}>
+          <Card key={`${selection}-${slideItem.title.toLowerCase()}`}>
             <Card.Title>{slideItem.title}</Card.Title>
             <Card.Entities>
               {slideItem.data.map((item) => (
-                <Card.Item key={item.docId}>
+                <Card.Item key={item.docId} item={item}>
                   <Card.Image src={`/images/${selection}/${item.genre}/${item.slug}/small.jpg`} />
                   <Card.Meta>
                     <Card.SubTitle>{item.title}</Card.SubTitle>
@@ -77,14 +77,13 @@ export default function BrowseContainer({ slides }) {
                 </Card.Item>
               ))}
             </Card.Entities>
+            <Card.Feature />
           </Card>
         ))}
       </Card.Group>
       <FooterContainer />
     </>
   ) : (
-    <>
-      <SelectProfileContainer user={user} setProfile={setProfile} />
-    </>
+    <SelectProfileContainer user={user} setProfile={setProfile} />
   );
 }