diff --git a/dapp/src/components/Poll.tsx b/dapp/src/components/Poll.tsx
new file mode 100644
index 0000000..3265282
--- /dev/null
+++ b/dapp/src/components/Poll.tsx
@@ -0,0 +1,75 @@
+import React, { Fragment, useContext } from 'react'
+import useStyles from '../styles/poll'
+import { useParams } from "react-router-dom"
+import { MessagesContext } from '../context/messages/context'
+import Typography from '@material-ui/core/Typography'
+import TextField from '@material-ui/core/TextField'
+import MenuItem from '@material-ui/core/MenuItem'
+import { Formik, FormikProps } from 'formik'
+
+type IBallot = {
+ option: string
+}
+
+function Poll() {
+ const { id } = useParams()
+ const classes: any = useStyles()
+ const messagesContext = useContext(MessagesContext)
+ const { chatMessages } = messagesContext
+ console.log({chatMessages})
+ if (!chatMessages) return
+ const selectedPoll= chatMessages['polls'].find(p => p.messageId === id)
+ if (!selectedPoll || !selectedPoll.pollInfo) return
+ const { pollInfo } = selectedPoll
+ const { description, title, subtitle, pollOptions } = pollInfo
+ const options = pollOptions.split(',')
+ // TODO Display ^above data
+ // TODO Add method to vote
+ //TODO vote options are drop down menu
+ // TODO Add method to tabulate votes
+ console.log({selectedPoll, options})
+
+ return (
+ {
+ console.log({values})
+ }}
+ >
+ {({
+ values,
+ errors,
+ handleChange,
+ handleSubmit
+ }: FormikProps) => {
+ return (
+
+ )}
+ }
+
+ )
+}
+
+export default Poll
diff --git a/dapp/src/styles/listPolls.js b/dapp/src/styles/listPolls.js
index 606dab9..32ec762 100644
--- a/dapp/src/styles/listPolls.js
+++ b/dapp/src/styles/listPolls.js
@@ -32,6 +32,14 @@ const useStyles = makeStyles(theme => ({
},
voteNow: {
color: theme.palette.primary[500]
+ },
+ link: {
+ gridColumn: '1 / 49',
+ padding: 0,
+ textDecoration: 'none',
+ '&:hover': {
+ textDecoration: 'underline'
+ }
}
}))
diff --git a/dapp/src/styles/poll.js b/dapp/src/styles/poll.js
new file mode 100644
index 0000000..03c1e09
--- /dev/null
+++ b/dapp/src/styles/poll.js
@@ -0,0 +1,38 @@
+import { makeStyles } from '@material-ui/core/styles'
+
+const useStyles = makeStyles(theme => ({
+ root: {
+ display: 'grid',
+ gridTemplateColumns: 'repeat(48, [col] 1fr)',
+ gridColumn: '3 / 45',
+ [theme.breakpoints.up('md')]: {
+ gridTemplateRows: '4rem 4rem auto auto 6rem',
+ gridColumn: '8 / 42',
+ }
+ },
+ title: {
+ gridColumn: '3 / 45',
+ fontSize: '3rem'
+ },
+ subtitle: {
+ gridColumn: '2 / 45',
+ fontSize: '2rem'
+ },
+ description: {
+ gridColumn: '3 / 45',
+ fontSize: '1rem'
+ },
+ dropDown: {
+ gridColumn: '3 / 45'
+ },
+ link: {
+ gridColumn: '1 / 49',
+ padding: 0,
+ textDecoration: 'none',
+ '&:hover': {
+ textDecoration: 'underline'
+ }
+ }
+}))
+
+export default useStyles
diff --git a/dapp/src/types.ts b/dapp/src/types.ts
index 73fc083..2a27724 100644
--- a/dapp/src/types.ts
+++ b/dapp/src/types.ts
@@ -33,9 +33,6 @@ export type Message = {
export type Topics = {
[chat: string]: Message[]
}
-export interface IEnrichedMessage extends ISignedMessage {
- pollInfo: IPollInfo
-}
export type IFormattedDate = {
plainText: string,
daysRemaining: number,