add modal

vote-lunch/src/components/haeder.js

@@ -13,10 +13,11 @@ const Container = styled.div`
 `
 
 const Header = props => {
+  const { handleLogin } = props
   return <Container>
   <span>{props.title}</span>
   <div>
-    {props.user ? <div>{props.user}<div>Logout</div></div> : <div>Login</div>}
+    {props.user ? <div>{props.user}<div>Logout</div></div> : <div onClick={handleLogin}>Login</div>}
   </div>
   </Container>
 }

vote-lunch/src/components/login.js

@@ -1,9 +1,12 @@
 import React from 'react'
+import styled from 'styled-components'
 
-const Login = () => {
-  return <div>
+const Container = styled.div``
+
+const Login = props => {
+  return <Container>
     login
-  </div>
+  </Container>
 }
 
 export default Login

vote-lunch/src/components/mainLayout.js

@@ -1,35 +1,47 @@
 import React, { useState } from 'react'
 import styled from 'styled-components'
-import Modal from 'react-modal'
 
 import Header from './haeder'
+import Modal from './modal'
 import Login from './login'
 import VoteList from './voteList'
 import Result from './voteResult'
 
 const Container = styled.div`
   display: flex;
   flex: 1;
+  flex-direction: column;
 `
 
+const mocklist = [
+  {checked: true, text: 'ข้าวมันไก่'},
+  {checked: false, text: 'ข้าวมันไก่'}
+]
+
 const MainLayout = () => {
-  const [isOpenModal, setOpenModal] = useState(false)
+  const [isOpenLoginModal, setOpenLoginModal] = useState(false)
+  const [isOpenOptionModal, setOpenOptionModal] = useState(false)
   const [showResult, setShowResult] = useState(false)
   return <div>
-    <Header title="deeple lunch" />
+    <Header title="deeple lunch" handleLogin={() => setOpenLoginModal(true)} />
     <Container>
-      list
-      <div onClick={() => setOpenModal(true)}>onpen modal</div>
-      <div onClick={() => setShowResult(!showResult)}>triggre show result</div>
       {
-        showResult ? <Result /> : <VoteList />
+        showResult ? <Result /> : <VoteList list={mocklist} handleAddOption={() => setOpenOptionModal(true)} handleVoteChange={() => {}} />
       }      
+      <div onClick={() => setShowResult(!showResult)}>triggre show result</div>
     </Container>
     <Modal
-      isOpen={isOpenModal}
+      isOpen={isOpenLoginModal}
+      handleCloseModal={() => setOpenLoginModal(false)}
     >
       <Login />
     </Modal>
+    <Modal
+      isOpen={isOpenOptionModal}
+      handleCloseModal={() => setOpenOptionModal(false)}
+    >
+      add option
+    </Modal>
   </div>
 }
 

vote-lunch/src/components/modal.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import styled from 'styled-components'
+import Modal from 'react-modal'
+
+const Container = styled.div`
+  position: relative;
+`
+
+const CloseIcon = styled.div`
+  position: absolute;
+  top: 0.5rem;
+  right: 0;
+  :before {
+    content: 'x';
+    color: #000;
+    font-weight: 800;
+    font-size: 2.5rem;
+    line-height: 1px;
+  }
+`
+
+const MyModal = props => {
+  const { isOpen, handleCloseModal, children } = props
+
+  return <Modal isOpen={isOpen}>
+    <Container>
+      <CloseIcon onClick={handleCloseModal} />
+      {children}
+    </Container>
+  </Modal>
+}
+
+export default MyModal