{store.getState()}
\r\n * }\r\n */\n\nexport function useReduxContext() {\n var contextValue = useContext(ReactReduxContext);\n\n if (process.env.NODE_ENV !== 'production' && !contextValue) {\n throw new Error('could not find react-redux context value; please ensure the component is wrapped in a {store.getState()}
\r\n * }\r\n */\n\nexport var useStore = /*#__PURE__*/createStoreHook();","import { ReactReduxContext } from '../components/Context';\nimport { useStore as useDefaultStore, createStoreHook } from './useStore';\n/**\r\n * Hook factory, which creates a `useDispatch` hook bound to a given context.\r\n *\r\n * @param {React.Context} [context=ReactReduxContext] Context passed to your `\r\n * {value}\r\n * \r\n *
\r\n * )\r\n * }\r\n */\n\nexport var useDispatch = /*#__PURE__*/createDispatchHook();","import { useReducer, useRef, useMemo, useContext, useDebugValue } from 'react';\nimport { useReduxContext as useDefaultReduxContext } from './useReduxContext';\nimport { createSubscription } from '../utils/Subscription';\nimport { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect';\nimport { ReactReduxContext } from '../components/Context';\n\nvar refEquality = function refEquality(a, b) {\n return a === b;\n};\n\nfunction useSelectorWithStoreAndSubscription(selector, equalityFn, store, contextSub) {\n var _useReducer = useReducer(function (s) {\n return s + 1;\n }, 0),\n forceRender = _useReducer[1];\n\n var subscription = useMemo(function () {\n return createSubscription(store, contextSub);\n }, [store, contextSub]);\n var latestSubscriptionCallbackError = useRef();\n var latestSelector = useRef();\n var latestStoreState = useRef();\n var latestSelectedState = useRef();\n var storeState = store.getState();\n var selectedState;\n\n try {\n if (selector !== latestSelector.current || storeState !== latestStoreState.current || latestSubscriptionCallbackError.current) {\n var newSelectedState = selector(storeState); // ensure latest selected state is reused so that a custom equality function can result in identical references\n\n if (latestSelectedState.current === undefined || !equalityFn(newSelectedState, latestSelectedState.current)) {\n selectedState = newSelectedState;\n } else {\n selectedState = latestSelectedState.current;\n }\n } else {\n selectedState = latestSelectedState.current;\n }\n } catch (err) {\n if (latestSubscriptionCallbackError.current) {\n err.message += \"\\nThe error may be correlated with this previous error:\\n\" + latestSubscriptionCallbackError.current.stack + \"\\n\\n\";\n }\n\n throw err;\n }\n\n useIsomorphicLayoutEffect(function () {\n latestSelector.current = selector;\n latestStoreState.current = storeState;\n latestSelectedState.current = selectedState;\n latestSubscriptionCallbackError.current = undefined;\n });\n useIsomorphicLayoutEffect(function () {\n function checkForUpdates() {\n try {\n var newStoreState = store.getState(); // Avoid calling selector multiple times if the store's state has not changed\n\n if (newStoreState === latestStoreState.current) {\n return;\n }\n\n var _newSelectedState = latestSelector.current(newStoreState);\n\n if (equalityFn(_newSelectedState, latestSelectedState.current)) {\n return;\n }\n\n latestSelectedState.current = _newSelectedState;\n latestStoreState.current = newStoreState;\n } catch (err) {\n // we ignore all errors here, since when the component\n // is re-rendered, the selectors are called again, and\n // will throw again, if neither props nor store state\n // changed\n latestSubscriptionCallbackError.current = err;\n }\n\n forceRender();\n }\n\n subscription.onStateChange = checkForUpdates;\n subscription.trySubscribe();\n checkForUpdates();\n return function () {\n return subscription.tryUnsubscribe();\n };\n }, [store, subscription]);\n return selectedState;\n}\n/**\r\n * Hook factory, which creates a `useSelector` hook bound to a given context.\r\n *\r\n * @param {React.Context} [context=ReactReduxContext] Context passed to your `{counter}
\r\n * }\r\n */\n\nexport var useSelector = /*#__PURE__*/createSelectorHook();","export * from './exports';\nimport { unstable_batchedUpdates as batch } from './utils/reactBatchedUpdates';\nimport { setBatch } from './utils/batch'; // Enable batched updates in our subscriptions for use\n// with standard React renderers (ReactDOM, React Native)\n\nsetBatch(batch);\nexport { batch };","export default function _extends() {\n _extends = Object.assign || function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n\n return target;\n };\n\n return _extends.apply(this, arguments);\n}","export default function _taggedTemplateLiteral(strings, raw) {\n if (!raw) {\n raw = strings.slice(0);\n }\n\n return Object.freeze(Object.defineProperties(strings, {\n raw: {\n value: Object.freeze(raw)\n }\n }));\n}","// @flow\n\ndeclare var SC_DISABLE_SPEEDY: ?boolean;\ndeclare var __VERSION__: string;\n\nexport const SC_ATTR: string =\n (typeof process !== 'undefined' && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR)) ||\n 'data-styled';\n\nexport const SC_ATTR_ACTIVE = 'active';\nexport const SC_ATTR_VERSION = 'data-styled-version';\nexport const SC_VERSION = __VERSION__;\nexport const SPLITTER = '/*!sc*/\\n';\n\nexport const IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;\n\nexport const DISABLE_SPEEDY =\n Boolean(typeof SC_DISABLE_SPEEDY === 'boolean'\n ? SC_DISABLE_SPEEDY\n : (typeof process !== 'undefined' && typeof process.env.REACT_APP_SC_DISABLE_SPEEDY !== 'undefined' && process.env.REACT_APP_SC_DISABLE_SPEEDY !== ''\n ? process.env.REACT_APP_SC_DISABLE_SPEEDY === 'false' ? false : process.env.REACT_APP_SC_DISABLE_SPEEDY\n : (typeof process !== 'undefined' && typeof process.env.SC_DISABLE_SPEEDY !== 'undefined' && process.env.SC_DISABLE_SPEEDY !== ''\n ? process.env.SC_DISABLE_SPEEDY === 'false' ? false : process.env.SC_DISABLE_SPEEDY\n : process.env.NODE_ENV !== 'production'\n )\n ));\n\n// Shared empty execution context when generating static styles\nexport const STATIC_EXECUTION_CONTEXT = {};\n","// @flow\n\nimport { SPLITTER, SC_ATTR, SC_ATTR_ACTIVE, SC_ATTR_VERSION, SC_VERSION } from '../constants';\nimport { getIdForGroup, setGroupForId } from './GroupIDAllocator';\nimport type { Sheet } from './types';\n\nconst SELECTOR = `style[${SC_ATTR}][${SC_ATTR_VERSION}=\"${SC_VERSION}\"]`;\nconst MARKER_RE = new RegExp(`^${SC_ATTR}\\\\.g(\\\\d+)\\\\[id=\"([\\\\w\\\\d-]+)\"\\\\].*?\"([^\"]*)`);\n\nexport const outputSheet = (sheet: Sheet) => {\n const tag = sheet.getTag();\n const { length } = tag;\n\n let css = '';\n for (let group = 0; group < length; group++) {\n const id = getIdForGroup(group);\n if (id === undefined) continue;\n\n const names = sheet.names.get(id);\n const rules = tag.getGroup(group);\n if (!names || !rules || !names.size) continue;\n\n const selector = `${SC_ATTR}.g${group}[id=\"${id}\"]`;\n\n let content = '';\n if (names !== undefined) {\n names.forEach(name => {\n if (name.length > 0) {\n content += `${name},`;\n }\n });\n }\n\n // NOTE: It's easier to collect rules and have the marker\n // after the actual rules to simplify the rehydration\n css += `${rules}${selector}{content:\"${content}\"}${SPLITTER}`;\n }\n\n return css;\n};\n\nconst rehydrateNamesFromContent = (sheet: Sheet, id: string, content: string) => {\n const names = content.split(',');\n let name;\n\n for (let i = 0, l = names.length; i < l; i++) {\n // eslint-disable-next-line\n if ((name = names[i])) {\n sheet.registerName(id, name);\n }\n }\n};\n\nconst rehydrateSheetFromTag = (sheet: Sheet, style: HTMLStyleElement) => {\n const parts = (style.innerHTML || '').split(SPLITTER);\n const rules: string[] = [];\n\n for (let i = 0, l = parts.length; i < l; i++) {\n const part = parts[i].trim();\n if (!part) continue;\n\n const marker = part.match(MARKER_RE);\n\n if (marker) {\n const group = parseInt(marker[1], 10) | 0;\n const id = marker[2];\n\n if (group !== 0) {\n // Rehydrate componentId to group index mapping\n setGroupForId(id, group);\n // Rehydrate names and rules\n // looks like: data-styled.g11[id=\"idA\"]{content:\"nameA,\"}\n rehydrateNamesFromContent(sheet, id, marker[3]);\n sheet.getTag().insertRules(group, rules);\n }\n\n rules.length = 0;\n } else {\n rules.push(part);\n }\n }\n};\n\nexport const rehydrateSheet = (sheet: Sheet) => {\n const nodes = document.querySelectorAll(SELECTOR);\n\n for (let i = 0, l = nodes.length; i < l; i++) {\n const node = ((nodes[i]: any): HTMLStyleElement);\n if (node && node.getAttribute(SC_ATTR) !== SC_ATTR_ACTIVE) {\n rehydrateSheetFromTag(sheet, node);\n\n if (node.parentNode) {\n node.parentNode.removeChild(node);\n }\n }\n }\n};\n","// @flow\n/* eslint-disable no-use-before-define */\n\nimport { makeStyleTag, getSheet } from './dom';\nimport type { SheetOptions, Tag } from './types';\n\n/** Create a CSSStyleSheet-like tag depending on the environment */\nexport const makeTag = ({ isServer, useCSSOMInjection, target }: SheetOptions): Tag => {\n if (isServer) {\n return new VirtualTag(target);\n } else if (useCSSOMInjection) {\n return new CSSOMTag(target);\n } else {\n return new TextTag(target);\n }\n};\n\nexport class CSSOMTag implements Tag {\n element: HTMLStyleElement;\n\n sheet: CSSStyleSheet;\n\n length: number;\n\n constructor(target?: HTMLElement) {\n const element = (this.element = makeStyleTag(target));\n\n // Avoid Edge bug where empty style elements don't create sheets\n element.appendChild(document.createTextNode(''));\n\n this.sheet = getSheet(element);\n this.length = 0;\n }\n\n insertRule(index: number, rule: string): boolean {\n try {\n this.sheet.insertRule(rule, index);\n this.length++;\n return true;\n } catch (_error) {\n return false;\n }\n }\n\n deleteRule(index: number): void {\n this.sheet.deleteRule(index);\n this.length--;\n }\n\n getRule(index: number): string {\n const rule = this.sheet.cssRules[index];\n // Avoid IE11 quirk where cssText is inaccessible on some invalid rules\n if (rule !== undefined && typeof rule.cssText === 'string') {\n return rule.cssText;\n } else {\n return '';\n }\n }\n}\n\n/** A Tag that emulates the CSSStyleSheet API but uses text nodes */\nexport class TextTag implements Tag {\n element: HTMLStyleElement;\n\n nodes: NodeList\n \n Home\n \n \n Leaderboard\n \n \n Create Poll\n \n
\n\n \n {authedUser && (\n <>\n
\n \n {authedUser.id}
\n \n )}\nPage no dey jare
;\n\n return this.props.children;\n }\n}\nexport default ErrorBoundary;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport ErrorBoundary from \"./ErrorBoundary\";\n\nconst QuestionWrapper = styled.div`\n width: 100%;\n height: 180px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n background-color: #fff;\n overflow: hidden;\n border: none;\n border-radius: 3px;\n box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.3);\n margin-bottom: 10px;\n\n .options {\n width: 100%;\n height: 120px;\n display: flex;\n }\n\n .option {\n width: 50%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n margin: 0;\n }\n .option--one {\n background-color: #249cff;\n }\n .option--two {\n background-color: #ff0000;\n color: #fff;\n }\n`;\n\nconst Question = ({ queId, questions }) => {\n return (\nWould you rather...?
\n OR\n\n
\n \n {questions[queId].optionOne.text}\n
\n\n {questions[queId].optionTwo.text}\n
\nUnanswered
\nAnswered
\n\n {queIds\n .filter(\n (queId) =>\n !questions[queId].optionOne.votes.includes(authedUser.id) &&\n !questions[queId].optionTwo.votes.includes(authedUser.id)\n )\n .sort((a, b) => questions[b].timestamp - questions[a].timestamp)\n .map((queId) => (\n \n
\n \n {queIds\n .filter(\n (queId) =>\n questions[queId].optionOne.votes.includes(authedUser.id) ||\n questions[queId].optionTwo.votes.includes(authedUser.id)\n )\n .sort((a, b) => questions[b].timestamp - questions[a].timestamp)\n .map((queId) => (\n \n
\n \n \n \n
\n );\n};\nexport default Home;\n","import React from \"react\";\nimport styled from \"styled-components\";\nconst UserWrapper = styled.div`\n width: 550px;\n height: 150px;\n display: flex;\n align-items: center;\n justify-content: space-around;\n background-color: #fff;\n box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.25);\n border-radius: 3px;\n margin-bottom: 2rem;\n\n img {\n width: 70px;\n height: 70px;\n display: block;\n border-radius: 50%;\n }\n`;\nconst User = ({ users, userId }) => {\n const name = users[userId].name;\n\n return (\n {name}
\n\n
\n \n Number of questions answered:\n {Object.keys(users[userId].answers).length}\n
\n\n Number of questions asked:\n {users[userId].questions.length}\n
\nLeaderboard
\nCreate New Poll
\n\n
\n );\n};\nexport default AnsweredQuestion;\n","import React from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { saveAnswer } from \"../actions/questions\";\n\nconst UnansweredQuestion = ({ question_id }) => {\n const authedUser = useSelector((state) => state.authedUser.authedUser);\n const authedUserId = authedUser.id;\n const questions = useSelector((state) => state.questions.questions);\n const qid = question_id;\n const question = questions[question_id];\n const dispatch = useDispatch();\n\n function voteOption(e) {\n e.preventDefault();\n let answer = e.target.value;\n\n console.log(typeof authedUserId, qid, answer);\n dispatch(saveAnswer({ authedUser: authedUserId, qid, answer }));\n console.log(\"hi there\");\n }\n return (\n \n {question.optionOne.votes.includes(authedUser.id) ? (\n ✔ \n ) : (\n \"\"\n )}\n
\n {question.optionOne.text}
\n\n\n {question.optionOne.votes.length}{\" \"}\n {question.optionTwo.votes.length <= 1 ? \" person \" : \" people \"}\n voted this option\n
\n\n {Math.round(\n (question.optionOne.votes.length /\n (question.optionOne.votes.length +\n question.optionTwo.votes.length)) *\n 100\n )}\n % of the people voted this option\n
\n\n {question.optionTwo.votes.includes(authedUser.id) ? (\n ✔ \n ) : (\n \"\"\n )}\n
\n {question.optionTwo.text}
\n\n\n {question.optionTwo.votes.length}\n {question.optionTwo.votes.length <= 1 ? \" person \" : \" people \"}\n voted this option\n
\n\n {Math.round(\n (question.optionTwo.votes.length /\n (question.optionTwo.votes.length +\n question.optionOne.votes.length)) *\n 100\n )}\n % of the people voted this option\n
\n\n
\n );\n};\nexport default UnansweredQuestion;\n","import React, { useEffect } from \"react\";\nimport { useSelector } from \"react-redux\";\n\nimport { useParams } from \"react-router-dom\";\nimport Navbar from \"../components/Navbar\";\nimport styled from \"styled-components\";\nimport AnsweredQuestion from \"../components/AnsweredQuestion\";\nimport UnansweredQuestion from \"../components/UnansweredQuestion\";\n\nconst DetailsWrapper = styled.div`\n width: 100%;\n height: 90vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n\n .options {\n width: 60%;\n display: flex;\n justify-content: space-between;\n margin-bottom: 10px;\n border-radius: 3px;\n overflow-y: hidden;\n .option {\n position: relative;\n width: 50%;\n height: 200px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n\n .vote--btn {\n cursor: pointer;\n width: 50%;\n padding: 10px;\n }\n }\n .option__text {\n font-weight: bold;\n text-transform: uppercase;\n }\n .option--one {\n background-color: #249cff;\n }\n .option--two {\n background-color: #ff0000;\n color: #fff;\n }\n }\n\n .user-profile > img {\n border-radius: 50%;\n margin-top: 5px;\n }\n`;\n\nexport const Marker = styled.span`\n position: absolute;\n top: 5px;\n right: 10px;\n width: 30px;\n height: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: #fff;\n color: green;\n\n border-radius: 50%;\n`;\n\nconst QuestionDetails = () => {\n const { question_id } = useParams();\n const authedUser = useSelector((state) => state.authedUser.authedUser);\n const questions = useSelector((state) => state.questions.questions);\n const users = useSelector((state) => state.users.users);\n const question = questions[question_id];\n\n useEffect(() => {\n if (!question) {\n throw new Error(\"Page not found\");\n }\n });\n\n return (\n \n
\n {question.optionOne.text}
\n \n\n
\n {question.optionTwo.text}
\n \n\n \n \n
\n );\n};\n\nexport default QuestionDetails;\n","import { _getUsers } from \"../_DATA\";\n\nexport const GET_USERS = \"GET_USERS\";\nexport const GET_USERS_FAILURE = \"GET_USERS_FAILURE\";\nexport const GET_USERS_SUCCESS = \"GET_USERS_SUCCESS\";\nexport const SAVE_QUESTIONS_ANSWER = \"SAVE_QUESTIONS_ANSWER\";\nexport const SAVE_QUESTION = \"SAVE_QUESTION\";\n\nexport const getUsers = () => {\n return {\n type: GET_USERS,\n };\n};\nexport const getUsersSuccess = (users) => {\n return {\n type: GET_USERS_SUCCESS,\n users,\n };\n};\nexport const getUsersFailure = () => {\n return {\n type: GET_USERS_FAILURE,\n };\n};\n\n\n\nexport const fetchUsers = () => {\n return async (dispatch) => {\n dispatch(getUsers());\n try {\n const response = await _getUsers();\n const data = response;\n dispatch(getUsersSuccess(data));\n } catch (error) {\n dispatch(getUsersFailure());\n }\n };\n};\n","import React, { useState, useEffect } from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { useHistory, useLocation } from \"react-router\";\nimport { authUser } from \"../actions/authedUser\";\nimport { fetchUsers } from \"../actions/users\";\nimport { computeQueryParameters } from \"../utils/url.utils\";\nimport styled from \"styled-components\";\n\nconst SignWrapper = styled.div`\n width: 100%;\n height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n background-color: #fff;\n`;\n\nconst SignInCard = styled.div`\n width: 400px;\n height: 400px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background-color: inherit;\n border-radius: 3px;\n box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);\n * {\n width: 50%;\n padding: 10px 20px;\n }\n select {\n margin-bottom: 10px;\n }\n\n button {\n cursor: pointer;\n color: #272727;\n font-size: 16px;\n font-weight: bold;\n border: none;\n border-radius: 16px;\n background-color: #00d4ff;\n box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);\n }\n`;\n\nfunction SignIn() {\n const [id, setId] = useState(\"\");\n const authedUser = useSelector((state) => state.authedUser.authedUser);\n const dispatch = useDispatch();\n const history = useHistory();\n const location = useLocation();\n const { next } = computeQueryParameters(location.search) || {};\n const users = useSelector((state) => state.users.users);\n const usersId = Object.keys(users);\n\n function handleAuthUser() {\n dispatch(authUser(users[id]));\n }\n\n useEffect(() => {\n dispatch(fetchUsers());\n }, [dispatch]);\n\n useEffect(() => {\n if (authedUser) {\n history.replace(next || \"/\");\n }\n });\n\n return (\n Would You Rather...?
\n\n {question.optionOne.votes.includes(authedUser.id) ||\n question.optionTwo.votes.includes(authedUser.id) ? (\n\n
\n Would You Rather?
\nKindly Sign In to play
\nOops! You missed your way
\n \n );\n};\nexport default NotFound;\n","import { BrowserRouter as Router, Route, Switch } from \"react-router-dom\";\nimport ProtectedRoute from \"./components/ProtectedRoute\";\nimport Home from \"./pages/Home\";\nimport Leaderboard from \"./pages/Leaderboard\";\nimport NewPoll from \"./pages/NewPoll\";\nimport QuestionDetails from \"./pages/QuestionDetails\";\nimport SignIn from \"./pages/SignIn\";\nimport ErrorBoundary from \"./components/ErrorBoundary\";\nimport NotFound from \"./components/NotFound\";\n\nfunction App() {\n return (\n
+
+ );
+};
+export default AnsweredQuestion;
diff --git a/src/components/ErrorBoundary.js b/src/components/ErrorBoundary.js
new file mode 100644
index 0000000000..5ed8ac04f1
--- /dev/null
+++ b/src/components/ErrorBoundary.js
@@ -0,0 +1,52 @@
+import React from "react";
+import styled from "styled-components";
+import InvalidResource from "../assets/invalid-resource.png";
+
+const NoResource = styled.div`
+ width: 100vw;
+ height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ div {
+ height: 80%;
+ width: 60%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-image: url(${InvalidResource});
+ background-repeat: no-repeat;
+ }
+`;
+
+class ErrorBoundary extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ hasError: false,
+ error: { message: "", stack: "" },
+ info: { componentStack: "" },
+ };
+ }
+
+ static getDerivedStateFromError = (error) => {
+ return { hasError: true };
+ };
+
+ componentDidCatch = (error, info) => {
+ this.setState({ error, info });
+ };
+ render() {
+ if (this.state.hasError)
+ return (
+
+ {question.optionOne.votes.includes(authedUser.id) ? (
+ ✔
+ ) : (
+ ""
+ )}
+
+ {question.optionOne.text}
+ ++ {question.optionOne.votes.length}{" "} + {question.optionTwo.votes.length <= 1 ? " person " : " people "} + voted this option +
++ {Math.round( + (question.optionOne.votes.length / + (question.optionOne.votes.length + + question.optionTwo.votes.length)) * + 100 + )} + % of the people voted this option +
+
+ {question.optionTwo.votes.includes(authedUser.id) ? (
+ ✔
+ ) : (
+ ""
+ )}
+
+ {question.optionTwo.text}
+ ++ {question.optionTwo.votes.length} + {question.optionTwo.votes.length <= 1 ? " person " : " people "} + voted this option +
++ {Math.round( + (question.optionTwo.votes.length / + (question.optionTwo.votes.length + + question.optionOne.votes.length)) * + 100 + )} + % of the people voted this option +
+
+
+ No Resource Found
+
+
+ Home
+
+
+ Leaderboard
+
+
+ Create Poll
+
+
+
+
+ {authedUser && (
+ <>
+ 
+
+
+
+ {authedUser.id}
+ + )} +Oops! You missed your way
+ + +Would you rather...?
+ OR +
+
+ {questions[queId].optionOne.text}
+{questions[queId].optionTwo.text}
+Unanswered
+Answered
+
+ {queIds
+ .filter(
+ (queId) =>
+ !questions[queId].optionOne.votes.includes(authedUser.id) &&
+ !questions[queId].optionTwo.votes.includes(authedUser.id)
+ )
+ .sort((a, b) => questions[b].timestamp - questions[a].timestamp)
+ .map((queId) => (
+
+
+
+ {queIds
+ .filter(
+ (queId) =>
+ questions[queId].optionOne.votes.includes(authedUser.id) ||
+ questions[queId].optionTwo.votes.includes(authedUser.id)
+ )
+ .sort((a, b) => questions[b].timestamp - questions[a].timestamp)
+ .map((queId) => (
+
+
+
+
+ );
+};
+export default UnansweredQuestion;
diff --git a/src/components/User.js b/src/components/User.js
new file mode 100644
index 0000000000..471eea58b6
--- /dev/null
+++ b/src/components/User.js
@@ -0,0 +1,41 @@
+import React from "react";
+import styled from "styled-components";
+const UserWrapper = styled.div`
+ width: 550px;
+ height: 150px;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ background-color: #fff;
+ box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.25);
+ border-radius: 3px;
+ margin-bottom: 2rem;
+
+ img {
+ width: 70px;
+ height: 70px;
+ display: block;
+ border-radius: 50%;
+ }
+`;
+const User = ({ users, userId }) => {
+ const name = users[userId].name;
+
+ return (
+
+
+ {question.optionOne.text}
+ +
+
+ {question.optionTwo.text}
+ +{name}
+
+
+ + Number of questions answered: + {Object.keys(users[userId].answers).length} +
++ Number of questions asked: + {users[userId].questions.length} +
+
+
+ );
+};
+export default Home;
diff --git a/src/pages/Leaderboard.js b/src/pages/Leaderboard.js
new file mode 100644
index 0000000000..f90ae858f0
--- /dev/null
+++ b/src/pages/Leaderboard.js
@@ -0,0 +1,26 @@
+import React from "react";
+import Users from "../components/LeaderboardList";
+import Navbar from "../components/Navbar";
+import styled from "styled-components";
+
+const LeaderboardWrapper = styled.div`
+ width: 100vw;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 50px 0;
+`;
+
+function Leaderboard() {
+ return (
+ <>
+ Leaderboard
+Create New Poll
+
+
+
+ )}
+
+ );
+};
+
+export default QuestionDetails;
diff --git a/src/pages/SignIn.js b/src/pages/SignIn.js
new file mode 100644
index 0000000000..e1e393070e
--- /dev/null
+++ b/src/pages/SignIn.js
@@ -0,0 +1,92 @@
+import React, { useState, useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useHistory, useLocation } from "react-router";
+import { authUser } from "../actions/authedUser";
+import { fetchUsers } from "../actions/users";
+import { computeQueryParameters } from "../utils/url.utils";
+import styled from "styled-components";
+
+const SignWrapper = styled.div`
+ width: 100%;
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: #fff;
+`;
+
+const SignInCard = styled.div`
+ width: 400px;
+ height: 400px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background-color: inherit;
+ border-radius: 3px;
+ box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
+ * {
+ width: 50%;
+ padding: 10px 20px;
+ }
+ select {
+ margin-bottom: 10px;
+ }
+
+ button {
+ cursor: pointer;
+ color: #272727;
+ font-size: 16px;
+ font-weight: bold;
+ border: none;
+ border-radius: 16px;
+ background-color: #00d4ff;
+ box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
+ }
+`;
+
+function SignIn() {
+ const [id, setId] = useState("");
+ const authedUser = useSelector((state) => state.authedUser.authedUser);
+ const dispatch = useDispatch();
+ const history = useHistory();
+ const location = useLocation();
+ const { next } = computeQueryParameters(location.search) || {};
+ const users = useSelector((state) => state.users.users);
+ const usersId = Object.keys(users);
+
+ function handleAuthUser() {
+ dispatch(authUser(users[id]));
+ }
+
+ useEffect(() => {
+ dispatch(fetchUsers());
+ }, [dispatch]);
+
+ useEffect(() => {
+ if (authedUser) {
+ history.replace(next || "/");
+ }
+ });
+
+ return (
+ Would You Rather...?
+ + {question.optionOne.votes.includes(authedUser.id) || + question.optionTwo.votes.includes(authedUser.id) ? ( +
+ 
+
+ Would You Rather?
+Kindly Sign In to play
+