Style react components (#9)

2021-08-12 09:50:51 +02:00 · 2021-08-12 09:50:51 +02:00 · dd9079554e
parent 7531ad8f3a
commit dd9079554e
4 changed files with 219 additions and 69 deletions
--- a/packages/example/src/index.tsx
+++ b/packages/example/src/index.tsx
@ -4,7 +4,7 @@ import { Example } from '@status-waku-voting/react-components'

 ReactDOM.render(
  <div>
-    <Example appName={'testApp'} />
+    <Example appName={'testApp_'} />
  </div>,
  document.getElementById('root')
 )
--- a/packages/react-components/src/Poll.tsx
+++ b/packages/react-components/src/Poll.tsx
@ -20,36 +20,49 @@ export function Poll({ poll, wakuVoting, signer }: PollProps) {
    signer.getAddress().then((e) => setAddress(e))
  }, [signer])
  return (
-    <div>
-      {poll.poll.question}
-      <ul>
+    <PollWrapper>
+      <PollTitle>
+        <PollQuestion>{poll.poll.question}</PollQuestion>
+        <PollTypeWrapper>{poll.poll.pollType === PollType.WEIGHTED ? 'WEIGHTED' : 'NON WEIGHTED'}</PollTypeWrapper>
+      </PollTitle>
+      <PollAnswersWrapper>
        {!poll.votesMessages.find((vote) => vote.voter === address) && (
-          <div onChange={(e) => setSelectedAnswer(Number.parseInt((e.target as any).value ?? 0))}>
-            {poll.poll.answers.map((answer, idx) => {
+          <div>
+            <div onChange={(e) => setSelectedAnswer(Number.parseInt((e.target as any).value ?? 0))}>
+              {poll.poll.answers.map((answer, idx) => {
+                return (
+                  <PollAnswer key={idx}>
+                    <input type="radio" value={idx} name={poll.poll.id} /> {answer}
+                  </PollAnswer>
+                )
+              })}
+            </div>
+            {poll.poll.pollType === PollType.WEIGHTED && (
+              <div>
+                Token amount
+                <input
+                  onChange={(e) => setTokenAmount(Number.parseInt(e.target.value))}
+                  value={tokenAmount}
+                  type="number"
+                />
+              </div>
+            )}
+          </div>
+        )}
+        {poll.votesMessages.find((vote) => vote.voter === address) && (
+          <div>
+            Results
+            {poll.answers.map((answer, idx) => {
              return (
-                <div key={idx}>
-                  <input type="radio" value={idx} name={poll.poll.id} /> {answer}
-                </div>
+                <PollAnswer key={idx}>
+                  <PollAnswerText>{answer.text}</PollAnswerText>
+                  <VoteCount>Votes : {answer.votes.toString()}</VoteCount>
+                </PollAnswer>
              )
            })}
          </div>
        )}
-        {poll.votesMessages.find((vote) => vote.voter === address) &&
-          poll.answers.map((answer, idx) => {
-            return (
-              <div key={idx}>
-                {answer.text}
-                <VoteCount>Votes : {answer.votes.toString()}</VoteCount>
-              </div>
-            )
-          })}
-      </ul>
-      {poll.poll.pollType === PollType.WEIGHTED && (
-        <div>
-          Token amount
-          <input onChange={(e) => setTokenAmount(Number.parseInt(e.target.value))} value={tokenAmount} type="number" />
-        </div>
-      )}
+      </PollAnswersWrapper>
      <button
        onClick={() => {
          if (wakuVoting) {
@ -65,10 +78,64 @@ export function Poll({ poll, wakuVoting, signer }: PollProps) {
        {' '}
        Vote
      </button>
-    </div>
+    </PollWrapper>
  )
 }

 const VoteCount = styled.div`
-  margin-left: 20px;
+  margin-left: auto;
+  margin-right: 5px;
+`
+
+const PollWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  box-shadow: 10px 10px 31px -2px #a3a1a1;
+  border-radius: 5px;
+  background-color: lightgray;
+  margin: 10px;
+  padding: 10px;
+`
+
+const PollTitle = styled.div`
+  display: flex;
+  padding: 10px;
+  height: 20px;
+  border: 1px solid black;
+  border-radius: 5px;
+`
+
+const PollQuestion = styled.div`
+  display: block;
+  width: 200px;
+  margin-left: 10px;
+  margin-top: auto;
+  overflow: hidden;
+`
+
+const PollTypeWrapper = styled.div`
+  width: 150px;
+  margin-right: 10px;
+  margin-left: auto;
+  margin-top: auto;
+  color: green;
+  font-weight: bold;
+`
+
+const PollAnswersWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: 10px;
+`
+
+const PollAnswer = styled.div`
+  display: flex;
+  margin: 20px;
+  width: 300px;
+  border-bottom: 1px solid black;
+  border-radius: 10px;
+`
+
+const PollAnswerText = styled.div`
+  width: 200px;
 `
--- a/packages/react-components/src/PollList.tsx
+++ b/packages/react-components/src/PollList.tsx
@ -4,6 +4,7 @@ import { Wallet } from 'ethers'
 import React, { useEffect, useState } from 'react'
 import { Poll } from './Poll'
 import { JsonRpcSigner } from '@ethersproject/providers'
+import styled from 'styled-components'

 type PollListProps = {
  wakuVoting: WakuVoting | undefined
@ -23,14 +24,14 @@ export function PollList({ wakuVoting, signer }: PollListProps) {
  }, [wakuVoting])

  return (
-    <ul>
+    <PollListWrapper>
      {polls.map((poll) => {
-        return (
-          <li key={poll.poll.id}>
-            <Poll poll={poll} wakuVoting={wakuVoting} signer={signer} />
-          </li>
-        )
+        return <Poll key={poll.poll.id} poll={poll} wakuVoting={wakuVoting} signer={signer} />
      })}
-    </ul>
+    </PollListWrapper>
  )
 }
+const PollListWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`
--- a/packages/react-components/src/index.tsx
+++ b/packages/react-components/src/index.tsx
@ -5,7 +5,9 @@ import { PollList } from './PollList'
 import styled from 'styled-components'
 import { PollType } from '@status-waku-voting/core/dist/esm/src/types/PollType'

-const provider = new providers.Web3Provider((window as any).ethereum)
+const ethereum = (window as any).ethereum
+
+const provider = new providers.Web3Provider(ethereum)

 type ExampleProps = {
  appName: string
@ -13,66 +15,146 @@ type ExampleProps = {

 function Example({ appName }: ExampleProps) {
  const [signer, setSigner] = useState(provider.getSigner())
+
  const [wakuVoting, setWakuVoting] = useState<WakuVoting | undefined>(undefined)

-  const [answers, setAnswers] = useState<string[]>([])
+  const [answers, setAnswers] = useState<string[]>([''])
  const [question, setQuestion] = useState('')
-
+  const [showNewPollBox, setShowNewPollBox] = useState(false)
  const [selectedType, setSelectedType] = useState(PollType.WEIGHTED)

  useEffect(() => {
-    ;(window as any).ethereum.on('accountsChanged', async () => setSigner(provider.getSigner()))
+    ethereum.ethereum.on('accountsChanged', async () => {
+      provider.send('eth_requestAccounts', [])
+      setSigner(provider.getSigner())
+    })
    WakuVoting.create(appName, '0x01').then((e) => setWakuVoting(e))
+    provider.send('eth_requestAccounts', [])
  }, [])

  return (
    <Wrapper>
+      {showNewPollBox && (
+        <NewPollBoxWrapper>
+          <NewPollBox>
+            <NewPollBoxTitle>
+              Question
+              <CloseNewPollBoxButton onClick={() => setShowNewPollBox(false)}>X</CloseNewPollBoxButton>
+            </NewPollBoxTitle>
+            <input value={question} onChange={(e) => setQuestion(e.target.value)} />
+            Answers
+            <button onClick={() => setAnswers((answers) => [...answers, ''])}>Add answer</button>
+            {answers.map((answer, idx) => (
+              <AnswerWraper key={idx}>
+                <AnswerInput
+                  value={answer}
+                  onChange={(e) =>
+                    setAnswers((answers) => {
+                      const newAnswers = [...answers]
+                      newAnswers[idx] = e.target.value
+                      return newAnswers
+                    })
+                  }
+                />
+                <RemoveAnswerButton
+                  onClick={() =>
+                    setAnswers((answers) => {
+                      const newAnswers = [...answers]
+                      if (newAnswers.length > 1) {
+                        newAnswers.splice(idx, 1)
+                      }
+                      return newAnswers
+                    })
+                  }
+                >
+                  -
+                </RemoveAnswerButton>
+              </AnswerWraper>
+            ))}
+            <div onChange={(e) => setSelectedType(Number.parseInt((e.target as any).value))}>
+              <input type="radio" value={PollType.WEIGHTED} name="newPollType" /> Weighted
+              <input type="radio" value={PollType.NON_WEIGHTED} name="newPollType" /> Non weighted
+            </div>
+            <SendButton
+              onClick={async () => {
+                await wakuVoting?.createTimedPoll(signer, question, answers, selectedType)
+                setAnswers([])
+              }}
+            >
+              Send
+            </SendButton>
+          </NewPollBox>
+        </NewPollBoxWrapper>
+      )}
+      <button onClick={() => setShowNewPollBox(true)}>New Poll </button>
      <PollList wakuVoting={wakuVoting} signer={signer} />
-      <NewPollBox>
-        Question
-        <input value={question} onChange={(e) => setQuestion(e.target.value)} />
-        Answers
-        <button onClick={() => setAnswers((answers) => [...answers, ''])}>Add answer</button>
-        {answers.map((answer, idx) => (
-          <input
-            key={idx}
-            value={answer}
-            onChange={(e) =>
-              setAnswers((answers) => {
-                const newAnswers = [...answers]
-                newAnswers[idx] = e.target.value
-                return newAnswers
-              })
-            }
-          />
-        ))}
-        <div onChange={(e) => setSelectedType(Number.parseInt((e.target as any).value))}>
-          <input type="radio" value={PollType.WEIGHTED} name="newPollType" /> Weighted
-          <input type="radio" value={PollType.NON_WEIGHTED} name="newPollType" /> Non weighted
-        </div>
-        <button
-          onClick={async () => {
-            await wakuVoting?.createTimedPoll(signer, question, answers, selectedType)
-            setAnswers([])
-          }}
-        >
-          Send
-        </button>
-      </NewPollBox>
    </Wrapper>
  )
 }

+const CloseNewPollBoxButton = styled.div`
+  width: 5px;
+  margin-right: 5px;
+  margin-left: auto;
+  font-weight: bold;
+`
+
+const NewPollBoxTitle = styled.div`
+  display: flex;
+`
+
+const AnswerInput = styled.input`
+  margin-right: 5px;
+  width: 200px;
+`
+
+const RemoveAnswerButton = styled.button`
+  margin-right: 5px;
+  margin-left: auto;
+`
+
+const SendButton = styled.button`
+  margin: 10px;
+`
+
+const AnswerWraper = styled.div`
+  display: flex;
+  margin: 5px;
+  width: 250px;
+`
+
 const Wrapper = styled.div`
  display: flex;
+  flex-direction: column;
+  height: 600px;
+  width: 435px;
+  overflow: auto;
+  border: 2px solid black;
+  padding 10px;
+  border-radius: 10px;
 `

 const NewPollBox = styled.div`
  display: flex;
  flex-direction: column;
+  background-color: white;
  margin: 20px;
  padding: 20px;
  box-shadow: 10px 10px 31px -2px #a3a1a1;
+  border-radius: 5px;
+  overflow: auto;
+  z-index: 1;
+  width: 300px;
+  height: 300px;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+`
+
+const NewPollBoxWrapper = styled.div`
+  position: relative;
+  top: 10px;
+  left: 10px;
 `

 export { Example }