Add poll endTime (#15)

packages/core/src/index.ts

@@ -95,6 +95,7 @@ class WakuVoting {
     if (newPollInitMessages.length > 0) {
       this.timedPollInitMessages = [...newPollInitMessages, ...this.timedPollInitMessages]
     }
+    this.timedPollInitMessages = this.timedPollInitMessages.filter((e) => e.endTime > Date.now())
     return this.timedPollInitMessages
   }
 

packages/core/src/models/PollInitMsg.ts

@@ -22,9 +22,9 @@ export function createSignMsgParams(message: Message) {
     },
     message: {
       ...message,
-      timestamp: new Date(message.timestamp).toLocaleDateString(),
+      timestamp: new Date(message.timestamp).toLocaleString(),
       pollType: message.pollType === PollType.WEIGHTED ? 'Weighted' : 'Non weighted',
-      endTime: new Date(message.endTime).toLocaleDateString(),
+      endTime: new Date(message.endTime).toLocaleString(),
     },
     primaryType: 'Mail',
     types: {

packages/react-components/src/Poll.tsx

@@ -29,7 +29,10 @@ export function Poll({ poll, wakuVoting, signer }: PollProps) {
     <PollWrapper>
       <PollTitle>
         <PollQuestion>{poll.poll.question}</PollQuestion>
+        <TitleInfo>
           <PollTypeWrapper>{poll.poll.pollType === PollType.WEIGHTED ? 'WEIGHTED' : 'NON WEIGHTED'}</PollTypeWrapper>
+          <DateWrapper>{new Date(poll.poll.endTime).toLocaleString()}</DateWrapper>
+        </TitleInfo>
       </PollTitle>
       <PollAnswersWrapper>
         {!userInVoters && (
@@ -70,7 +73,7 @@ export function Poll({ poll, wakuVoting, signer }: PollProps) {
         )}
       </PollAnswersWrapper>
       {!userInVoters && (
-        <button
+        <VoteButton
           onClick={() => {
             if (wakuVoting) {
               wakuVoting.sendTimedPollVote(
@@ -84,12 +87,33 @@ export function Poll({ poll, wakuVoting, signer }: PollProps) {
         >
           {' '}
           Vote
-        </button>
+        </VoteButton>
       )}
     </PollWrapper>
   )
 }
 
+const DateWrapper = styled.div`
+  font-size: 14px;
+  text-align: right;
+`
+
+const TitleInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-right: 10px;
+  margin-left: auto;
+  margin-top: auto;
+`
+
+const VoteButton = styled.button`
+  width: 100px;
+  border-radius: 5px;
+  font-size: 20px;
+  font-weight: bold;
+  font-family: 'Times New Roman', Times, serif;
+`
+
 const VoteCount = styled.div`
   margin-left: auto;
   margin-right: 5px;
@@ -108,7 +132,6 @@ const PollWrapper = styled.div`
 const PollTitle = styled.div`
   display: flex;
   padding: 10px;
-  height: 20px;
   border: 1px solid black;
   border-radius: 5px;
 `
@@ -117,16 +140,15 @@ const PollQuestion = styled.div`
   display: block;
   width: 200px;
   margin-left: 10px;
-  margin-top: auto;
+  margin-top: 0px;
-  overflow: hidden;
+  overflow: auto;
 `
 
 const PollTypeWrapper = styled.div`
   width: 150px;
-  margin-right: 10px;
+  text-align: right;
-  margin-left: auto;
-  margin-top: auto;
   color: green;
+  font-size: 14px;
   font-weight: bold;
 `
 

packages/react-components/src/index.tsx

@@ -5,6 +5,13 @@ import { PollList } from './PollList'
 import styled from 'styled-components'
 import { PollType } from '@status-waku-voting/core/dist/esm/src/types/PollType'
 
+function getLocaleIsoTime(dateTime: Date) {
+  const MS_PER_MINUTE = 60000
+  const milliseconds = dateTime.getTime() - dateTime.getTimezoneOffset() * MS_PER_MINUTE
+  const newDate = new Date(milliseconds)
+  return newDate.toISOString().slice(0, -8)
+}
+
 const provider = new providers.Web3Provider((window as any).ethereum)
 
 type ExampleProps = {
@@ -20,6 +27,7 @@ function Example({ appName }: ExampleProps) {
   const [question, setQuestion] = useState('')
   const [showNewPollBox, setShowNewPollBox] = useState(false)
   const [selectedType, setSelectedType] = useState(PollType.WEIGHTED)
+  const [endTimePicker, setEndTimePicker] = useState(new Date(new Date().getTime() + 10000000))
 
   useEffect(() => {
     ;(window as any).ethereum.on('accountsChanged', async () => {
@@ -29,6 +37,7 @@ function Example({ appName }: ExampleProps) {
     WakuVoting.create(appName, '0x01').then((e) => setWakuVoting(e))
     provider.send('eth_requestAccounts', [])
   }, [])
+
   return (
     <Wrapper onClick={() => showNewPollBox && setShowNewPollBox(false)}>
       {showNewPollBox && (
@@ -39,6 +48,12 @@ function Example({ appName }: ExampleProps) {
               <CloseNewPollBoxButton onClick={() => setShowNewPollBox(false)}>X</CloseNewPollBoxButton>
             </NewPollBoxTitle>
             <input value={question} onChange={(e) => setQuestion(e.target.value)} />
+            Poll end time
+            <input
+              type="datetime-local"
+              value={getLocaleIsoTime(endTimePicker)}
+              onChange={(e) => setEndTimePicker(new Date(e.target.value))}
+            />
             Answers
             <button onClick={() => setAnswers((answers) => [...answers, ''])}>Add answer</button>
             {answers.map((answer, idx) => (
@@ -74,7 +89,14 @@ function Example({ appName }: ExampleProps) {
             </div>
             <SendButton
               onClick={async () => {
-                await wakuVoting?.createTimedPoll(signer, question, answers, selectedType)
+                await wakuVoting?.createTimedPoll(
+                  signer,
+                  question,
+                  answers,
+                  selectedType,
+                  undefined,
+                  endTimePicker.getTime()
+                )
                 setAnswers([])
               }}
             >