├── .gitignore
├── README.md
├── client
    ├── pages
    │   ├── Signup.jsx
    │   ├── Login.jsx
    │   ├── Homepage.jsx
    │   ├── CreatePoll.jsx
    │   ├── TakePoll.jsx
    │   └── DisplayPoll.jsx
    ├── index.js
    ├── index.html
    ├── stylesheets
    │   └── styles.css
    └── App.jsx
├── .env
├── server
    ├── middleware
    │   ├── userMiddleware.js
    │   └── pollMiddleware.js
    ├── routers
    │   ├── userRouter.js
    │   └── pollRouter.js
    ├── db
    │   └── db.js
    └── server.js
├── .vscode
    └── launch.json
├── notes.txt
├── package.json
└── webpack.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # scratch
2 | Application to create polls and share 
3 | 


--------------------------------------------------------------------------------
/client/pages/Signup.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | 
3 | function Signup() {
4 |     return (<h1>Signup</h1>)
5 | }
6 | 
7 | export default Signup;
8 | 


--------------------------------------------------------------------------------
/.env:
--------------------------------------------------------------------------------
1 | PG_URI=postgres://adkyirma:w7PmsQmuimLfkILvmUJfdJdvW2AZorP5@heffalump.db.elephantsql.com/adkyirma
2 | GOOGLE_CLIENT_ID=300065318729-o1jft1potgu00vtu5484hdgog3ko9l2h.apps.googleusercontent.com
3 | GOOGLE_CLIENT_SECRET=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


--------------------------------------------------------------------------------
/client/pages/Login.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | function Login() {
 4 |     return(
 5 |     <>
 6 |         <h1>Login</h1>
 7 |         <button onClick={handleLogin}>Log in with Google</button>
 8 |     </>
 9 |     )
10 | 
11 |     function handleLogin(event) {
12 | 
13 |     }
14 | }
15 | 
16 | export default Login;


--------------------------------------------------------------------------------
/client/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import { BrowserRouter } from 'react-router-dom';
 4 | import App from './App.jsx';
 5 | 
 6 | import styles from './stylesheets/styles.css';
 7 | 
 8 | // Create a root.
 9 | const root = ReactDOM.createRoot(document.getElementById('root'));
10 | // Initial render
11 | root.render(
12 |     <React.StrictMode>
13 |       <BrowserRouter>
14 |         <App />
15 |       </BrowserRouter>
16 |     </React.StrictMode>
17 |     );
18 | 


--------------------------------------------------------------------------------
/client/pages/Homepage.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { useNavigate } from 'react-router-dom'
 3 | 
 4 | export const Homepage = () => {
 5 |   const navigate = useNavigate();
 6 | 
 7 |   return <div className='container'>
 8 |     <div className="mt-5 mb-3 d-flex justify-content-center"><h1 className="text-align-center">Poll-a-Bear</h1></div>
 9 |     <div className="d-flex justify-content-center">
10 |       <button onClick={() => navigate('/newPoll')} className="btn btn-primary btn-lg">Create a Poll</button>
11 |     </div>
12 |   </div>
13 | }
14 | 
15 | export default Homepage


--------------------------------------------------------------------------------
/server/middleware/userMiddleware.js:
--------------------------------------------------------------------------------
 1 | const middleware = {};
 2 | 
 3 | // Sign Up
 4 | middleware.signUp = (req, res, next) => {
 5 |     res.locals = {data: 'I am signing up!'}
 6 |     next();
 7 |     return;
 8 | }
 9 | 
10 | // Log In
11 | middleware.logIn = (req, res, next) => {
12 |     res.locals = {data: 'I am logging in!'}
13 |     next();
14 |     return;
15 | }
16 | 
17 | // Session Authentication
18 | middleware.verifyUser = (req, res, next) => {
19 |     res.locals = {data: 'I am getting verified!'}
20 |     next();
21 |     return;
22 | }
23 | 
24 | 
25 | module.exports = middleware;


--------------------------------------------------------------------------------
/server/routers/userRouter.js:
--------------------------------------------------------------------------------
 1 | const express = require('express');
 2 | const router = express.Router();
 3 | const userFunctions = require('../middleware/userMiddleware');
 4 | 
 5 | router.post('/signup', userFunctions.signUp, (req, res) => {
 6 |     res.status(200).json(res.locals);
 7 |     return;
 8 | })
 9 | 
10 | router.get('/login', userFunctions.logIn, (req, res) => {
11 |     res.status(200).json(res.locals);
12 |     return;   
13 | })
14 | 
15 | router.get('/verify', userFunctions.verifyUser, (req, res) => {
16 |     res.status(200).json(res.locals);
17 |     return;  
18 | })
19 | 
20 | module.exports = router;
21 | 


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     // Use IntelliSense to learn about possible attributes.
 3 |     // Hover to view descriptions of existing attributes.
 4 |     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 5 |     "version": "0.2.0",
 6 |     "configurations": [
 7 |         {
 8 |             "type": "node",
 9 |             "request": "launch",
10 |             "name": "Launch Program",
11 |             "skipFiles": [
12 |                 "<node_internals>/**",
13 |                 "${workspaceFolder}/node_modules/**"
14 |             ],
15 |             "program": "${workspaceFolder}/server/server.js"
16 |         }
17 |     ]
18 | }


--------------------------------------------------------------------------------
/client/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 9 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
10 |     <title>Document</title>
11 |     <base href="/">
12 | </head>
13 | <body>
14 |     <div id="root"></div>
15 |     <!-- <script type="module" src="acquisitions.js"></script>
16 |     <div><canvas id="acquisitions"></canvas></div> --> 
17 |     <!-- <script defer src="bundle.js"></script>
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/server/db/db.js:
--------------------------------------------------------------------------------
 1 | const { Pool } = require('pg');
 2 | require('dotenv').config();
 3 | 
 4 | // create a new pool here using the connection string above
 5 | const pool = new Pool({ connectionString: process.env.PG_URI });
 6 | 
 7 | // Adding some notes about the database here will be helpful for future you or other developers.
 8 | // Schema for the database can be found below:
 9 | // https://github.com/CodesmithLLC/unit-10SB-databases/blob/master/docs/assets/images/schema.png
10 | 
11 | // We export an object that contains a property called query,
12 | // which is a function that returns the invocation of pool.query() after logging the query
13 | // This will be required in the controllers to be the access point to the database
14 | module.exports = {
15 |   query: (text, params, callback) => {
16 |     // console.log('executed query', text);
17 |     return pool.query(text, params, callback);
18 |   },
19 | };
20 | 


--------------------------------------------------------------------------------
/client/stylesheets/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     margin: 0px;
 3 |     line-height: 1.3;
 4 |     font-family: 'Source Sans Pro', sans-serif;
 5 |     background-color: rgb(240, 208, 208);
 6 |     background-image: url(https://i.pinimg.com/736x/aa/db/56/aadb5612d8eb7361ab03c3d7e2b07762.jpg);
 7 |     background-size: cover;
 8 | }
 9 | 
10 | 
11 | .displayPrompt {
12 |     margin: 5% 5%
13 | }
14 | 
15 | .displayPoll {
16 |     background-image: url(https://img.freepik.com/free-vector/white-background-with-blue-tech-hexagon_1017-19366.jpg?w=2000);
17 |     background-size: cover;
18 |     display: flex;
19 |     width: 100%;
20 |     flex-direction: column;
21 |     justify-content: center;
22 |     align-items: center;
23 | 
24 | }
25 | 
26 | .display-list-group {
27 |     width: 100;
28 | 
29 | }
30 | 
31 | .display-list-group2 {
32 |     width: 800px;
33 | 
34 | }
35 | .display-barchart {
36 |     /* margin: 10rem 10rem 10rem 10rem; */
37 |     width: 800px;
38 | 
39 |     /* flex: flex-grow; */
40 | 
41 |   }
42 | 
43 | 
44 | 
45 | .form-wrapper {
46 |     width: 40%;
47 | }


--------------------------------------------------------------------------------
/server/routers/pollRouter.js:
--------------------------------------------------------------------------------
 1 | const express = require('express');
 2 | const router = express.Router();
 3 | const pollFunctions = require('../middleware/pollMiddleware');
 4 | 
 5 | router.post('/', pollFunctions.savePollFormat, (req, res) => {
 6 |     res.status(200).json(res.locals.pollID);
 7 |     return;
 8 | })
 9 | 
10 | router.get('/:id', pollFunctions.getPollFormat, (req, res) => {
11 |     res.status(200).json(res.locals.getPollFormat);
12 |     return;
13 | })
14 | 
15 | router.post('/:id', pollFunctions.savePollResponse, (req, res) => {
16 |     res.status(200).send('update successful');
17 |     return;
18 | })
19 | 
20 | router.get('/:id/display', pollFunctions.getPollResponses, (req, res) => {
21 |     res.status(200).json(res.locals);
22 |     return;
23 | })
24 | 
25 | router.delete('/:id/:key', pollFunctions.deletePoll, (req, res) => {
26 |     res.status(204).json(res.locals);
27 |     return;  
28 | })
29 | 
30 | router.put('/:id/:key', pollFunctions.updatePoll, (req, res) => {
31 |     res.status(200).json(res.locals);
32 |     return;  
33 | })
34 | 
35 | module.exports = router;
36 | 


--------------------------------------------------------------------------------
/client/App.jsx:
--------------------------------------------------------------------------------
 1 | import { useNavigate, useLocation } from "react-router-dom";
 2 | import { Route, Routes, Link } from "react-router-dom"
 3 | import React, { useEffect } from 'react';
 4 | import Login from './pages/Login';
 5 | import Signup from './pages/Signup';
 6 | import CreatePoll from './pages/CreatePoll';
 7 | import TakePoll from './pages/TakePoll';
 8 | import { DisplayPoll, UpdateTable } from "./pages/DisplayPoll";
 9 | 
10 | {/* <Route path='/' element={<Homepage />} /> */}
11 | 
12 | function App() {
13 | 
14 |   // Navigate to requested URL on component mount
15 |   const navigate = useNavigate();
16 |   const location = useLocation();
17 |   useEffect(() => {
18 |     navigate(location.path);
19 |   }, [])
20 | 
21 |   return (
22 |     <>
23 |     <nav className="navbar navbar-expand-lg navbar-light bg-light ">
24 |       <ul className="navbar-nav float-end">  
25 |         <li className="nav-link"><Link to='/login'>Login</Link></li>
26 |         <li className="nav-link"><Link to='/signup'>Sign-up</Link></li>
27 |         <li className="nav-link"><Link to='/'>Home</Link></li> 
28 |         <li className="nav-link"><Link to='/1/display'>Display1</Link></li>
29 |       </ul>
30 |     </nav>
31 | 
32 |       <Routes>
33 |         <Route path='/' element={<CreatePoll />} />
34 |         <Route path='/:id' element={<TakePoll />} />
35 |         <Route path='/:id/display' element={<DisplayPoll />} />
36 |         <Route path='/login' element={<Login />} />
37 |         <Route path='/signup' element={<Signup />} />
38 |         <Route path='/*' element={<h1>Page Not Found</h1>} />
39 |       </Routes>
40 |     </>
41 | 
42 |     )
43 | }
44 | 
45 | export default App;


--------------------------------------------------------------------------------
/notes.txt:
--------------------------------------------------------------------------------
 1 | //Our npm commands: 
 2 | // npm init -y
 3 | // npm i react react-dom
 4 | // npm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react  
 5 | // npm i -D style-loader file-loader css-loader sass-loader sass
 6 | // npm install webpack-dev-server --save-dev
 7 | // npm i -D webpack webpack-cli
 8 | // npm install --save-dev html-webpack-plugin
 9 | 
10 | // npm install nodemon
11 | //npm install express
12 | //npm install node-fetch
13 | // npm install react-router react-router-dom pg
14 | // npm install -D source-map-loader
15 | // npm install cors
16 | // npm install moment --save
17 | npm install dotenv --save
18 | npm i eslint 
19 | // npx webpack serve
20 | // npm install concurrently
21 | // npm install chart.js
22 | // npm install react-chartjs-2
23 | 
24 | 
25 | SQL commands
26 | 
27 | CREATE TABLE poll (id BIGSERIAL NOT NULL PRIMARY KEY, poll_id INT NOT NULL, poll_options VARCHAR(50), users VARCHAR(50), entries VARCHAR(50));
28 | 
29 | 
30 | INSERT INTO poll (poll_id, poll_options) values (1, 'cats');
31 | INSERT INTO poll (poll_id, poll_options) values (1, 'dogs');
32 | INSERT INTO poll (poll_id, poll_options) values (1, 'birds');
33 | 
34 | 
35 | INSERT INTO poll (poll_id, users, entries) values (1, 'Bob', 'dogs');
36 | 
37 | SELECT * FROM poll;  see all of cell_bank
38 | 
39 | 
40 | ALTER TABLE poll ADD COLUMN poll_prompt VARCHAR(100);
41 | 
42 | INSERT INTO poll (poll_id, poll_prompt) values (1,'What is your favorite type of pet?');
43 | 
44 | //spelled fishes wrong so correcting it
45 | UPDATE poll SET poll_options = 'fishes' WHERE id = 7;
46 | 
47 | //update jess
48 | "UPDATE poll SET poll_id, options=$2, users=$3, entries=$4 WHERE id=$5 returning *"


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "scratch",
 3 |   "version": "1.0.0",
 4 |   "description": "Application to create polls and share",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "build": "NODE_ENV=production webpack",
 8 |     "dev-front": "NODE_ENV=development webpack serve --open",
 9 |     "dev-back": "nodemon server/server.js",
10 |     "dev-hour": "npm run dev-back & npm run dev-front",
11 |     "prod-hour": "npm run build && nodemon server/server.js"
12 |   },
13 |   "repository": {
14 |     "type": "git",
15 |     "url": "git+https://github.com/Red-lipped-Batfish-54/scratch.git"
16 |   },
17 |   "keywords": [],
18 |   "author": "",
19 |   "license": "ISC",
20 |   "bugs": {
21 |     "url": "https://github.com/Red-lipped-Batfish-54/scratch/issues"
22 |   },
23 |   "homepage": "https://github.com/Red-lipped-Batfish-54/scratch#readme",
24 |   "dependencies": {
25 |     "chart.js": "^4.0.1",
26 |     "concurrently": "^7.5.0",
27 |     "cookie-parser": "^1.4.6",
28 |     "cors": "^2.8.5",
29 |     "dotenv": "^16.0.3",
30 |     "eslint": "^8.28.0",
31 |     "express": "^4.18.2",
32 |     "moment": "^2.29.4",
33 |     "node-fetch": "^3.3.0",
34 |     "nodemon": "^2.0.20",
35 |     "passport-google-oauth20": "^2.0.0",
36 |     "pg": "^8.8.0",
37 |     "react": "^18.2.0",
38 |     "react-chartjs-2": "^5.0.1",
39 |     "react-dom": "^18.2.0",
40 |     "react-router": "^6.4.3",
41 |     "react-router-dom": "^6.4.3"
42 |   },
43 |   "devDependencies": {
44 |     "@babel/core": "^7.20.2",
45 |     "@babel/preset-env": "^7.20.2",
46 |     "@babel/preset-react": "^7.18.6",
47 |     "babel-loader": "^9.1.0",
48 |     "css-loader": "^6.7.2",
49 |     "file-loader": "^6.2.0",
50 |     "html-webpack-plugin": "^5.5.0",
51 |     "sass": "^1.56.1",
52 |     "sass-loader": "^13.2.0",
53 |     "source-map-loader": "^4.0.1",
54 |     "style-loader": "^3.3.1",
55 |     "webpack": "^5.75.0",
56 |     "webpack-cli": "^5.0.0",
57 |     "webpack-dev-server": "^4.11.1"
58 |   }
59 | }
60 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | //set module.exports to be object that hold all necessary config for webpack to properly access into bundle
 2 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 3 | const path = require('path');
 4 | 
 5 | module.exports = {
 6 |     //added source-map
 7 |     //set the mode to be production
 8 |     //will create minified/uglified production bundle
 9 |     mode: process.env.NODE_ENV, //does this need to be single quotes?
10 |     devtool: 'source-map',
11 |     entry: './client/index.js',
12 |     output: {
13 |         path: path.resolve(__dirname, 'build'),
14 |         filename: 'bundle.js',
15 |     },
16 |     plugins: [
17 |         new HtmlWebpackPlugin({
18 |         title: 'Development',
19 |         template: './client/index.html'
20 |         })
21 |     ],
22 |     resolve: {
23 |         // Enable importing JS / JSX files without specifying their extension
24 |         extensions: ['.js', '.jsx'],
25 |       },
26 |     devServer: {
27 |         host: 'localhost',
28 |         port: 8080,
29 |         allowedHosts: 'all',
30 |         historyApiFallback: true,
31 |         static: {
32 |           directory: path.join(__dirname, 'build'),
33 |           publicPath: '/'
34 |         },
35 |         proxy: {
36 |             '/api': 'http://localhost:3000'
37 |         }
38 |       },
39 |     module: {
40 |         rules: [
41 |             {
42 |                 test: /\.jsx?/,
43 |                 exclude: /node_modules/,
44 |                 use: {
45 |                     loader: 'babel-loader',
46 |                     options: {
47 |                     presets: ['@babel/preset-env', '@babel/preset-react'],
48 |                     }
49 |                 }
50 |             }, {
51 |                 test: /.(css|scss)$/,
52 |                 exclude: /node_modules/,
53 |                 use: [
54 |                     'style-loader',
55 |                     'css-loader',
56 |                     'sass-loader'
57 |                 ]
58 |             }
59 |         ]
60 |     }
61 | 
62 | 
63 | };


--------------------------------------------------------------------------------
/client/pages/CreatePoll.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react'
 2 | import { BrowserRouter, useNavigate } from "react-router-dom";
 3 | // import Questions from '../components/Questions';
 4 | 
 5 | export const CreatePoll = () => {
 6 |   const navigate = useNavigate();
 7 |   const [questions, setQuestions] = useState(2);
 8 | 
 9 |   const handleFormData = async (e) => {
10 |     e.preventDefault();
11 |     const results = [e.target.title.value];
12 |     for (let i = 1; i <= questions; i++) {
13 |       const answer = `answer${i}`;
14 |       results.push(e.target[answer].value);
15 |     }
16 | 
17 |     const response = await fetch('./api/poll', {
18 |       method: 'POST',
19 |       headers: {
20 |         'Content-Type': 'application/json'
21 |       },
22 |       body: JSON.stringify(results)
23 |     });
24 |     const data = await response.json();
25 |     navigate(`/${data}`);
26 |   }
27 | 
28 |   const numOfQuestions = [];
29 |   for (let i = 1; i <= questions; i++) {
30 |     numOfQuestions.push(
31 |       <div className="input-group mb-3" key={i}>
32 |         <input type="text" name={`answer${i}`} className="form-control border border-info" placeholder={`Option ${i}`} required/>
33 |         <button type="button" onClick={() => setQuestions(questions - 1)} className="input-group-text btn btn-outline-info" >X</button>
34 |       </div>
35 |     )
36 |   }
37 | 
38 |   return <div>
39 |     <h1 className='text-center'>Create a Poll</h1>
40 |     <div className='m-auto p-3 border border-info rounded form-wrapper'>
41 | 
42 |       <form onSubmit={handleFormData}>
43 |         <label><strong>Title</strong></label>
44 |         <div className="input-group mb-3">
45 |           <input  type="text" name="title" className="form-control border border-info" placeholder="Type your question here" required/>
46 |         </div>
47 | 
48 |         <label><strong>Answer Options:</strong></label>
49 |         {numOfQuestions}
50 | 
51 |         <button className="btn btn-outline-info" type="button" onClick={() => setQuestions(questions + 1)}>Add Option</button>
52 |         <hr className="border border-info" />
53 |         <button className="btn btn-info text-white w-25" type="submit" >Create Poll</button>
54 |       </form>
55 |     </div>
56 |   </div>
57 | }
58 | 
59 | export default CreatePoll


--------------------------------------------------------------------------------
/server/server.js:
--------------------------------------------------------------------------------
 1 | // Import express and import middleware dependencies
 2 | const express = require('express');
 3 | const cors = require('cors');
 4 | // const cookierParser = require('cookie-parser');
 5 | const path = require('path');
 6 | 
 7 | // Import custom middleware
 8 | const userRouter = require('./routers/userRouter.js')
 9 | const pollRouter = require('./routers/pollRouter.js')
10 | 
11 | // Create App
12 | const PORT = 3000;
13 | const app = express();
14 | 
15 | // Use global middleware
16 | app.use(express.json());
17 | app.use(express.urlencoded({ extended: true }));
18 | app.use(cors());
19 | // app.use(cookieParser());
20 | 
21 | // Create routes for index.html, bundle.js, and bundle.js.map
22 | // We could have served everything in the build folder as static
23 | // or just send routes for the files we want to use.
24 | // Both of these are tested and work.
25 | // Option a)
26 | // app.use(express.static(path.resolve(__dirname, '../build')));
27 | // Option b)
28 | app.get('/', (req, res) => {
29 |   res.sendFile(path.resolve(__dirname, '../build/index.html' ));
30 | })
31 | app.get('/bundle.js', (req, res) => {
32 |   res.sendFile(path.resolve(__dirname, '../build/bundle.js'));
33 | });
34 | app.get('/bundle.js.map', (req, res) => {
35 |   res.sendFile(path.resolve(__dirname, '../build/bundle.js.map'));
36 | });
37 | 
38 | // Handle routes to user functionality
39 | app.use('/api/user', userRouter);
40 | 
41 | // Handle routes to poll functionality
42 | app.use('/api/poll', pollRouter);
43 | 
44 | // Test route for database
45 | app.get("/api/flasks", async(req, res)=>{
46 |     try{
47 |       const results = await db.query("SELECT * FROM poll");
48 |       console.log(results);
49 |       res.status(200).json({
50 |         status: "success",
51 |         results: results.rows.length,
52 |           poll: results.rows
53 |       })
54 |     } catch(err){ 
55 |       console.log(err)
56 |     }
57 | })
58 | 
59 | // Return all unmatched get requests to index.html
60 | app.get('/*', (req, res) => {
61 |   res.sendFile(path.resolve(__dirname, '../build/index.html' ));
62 | })
63 | 
64 | // Global error handler
65 | app.use((err, req, res, next) => {
66 |   console.error(err);
67 |   res.sendStatus(500);
68 | })
69 |   
70 | 
71 | app.listen(PORT, () => console.log(`SERVER IS LISTENING ON PORT: ${PORT}`)); //listens on port 3000 -> http://localhost:3000/
72 | 
73 | module.exports = app;
74 | 


--------------------------------------------------------------------------------
/client/pages/TakePoll.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from "react";
 2 | import { useParams, useNavigate } from 'react-router-dom';
 3 | 
 4 | function TakePoll() {
 5 |     const { id } = useParams();
 6 |     const navigate = useNavigate();
 7 |     const [prompt, setPrompt] = useState('');
 8 |     const [checked, setChecked] = useState([]);
 9 |     const [pollOptions, setPollOptions] = useState([]);
10 |     const [name, setName] = useState('');
11 |     let updatedList = [];
12 | 
13 |     useEffect(() => {
14 |       const fetchPollQuestions = async () => {
15 |         const response = await fetch(`http://localhost:3000/api/poll/${id}`)
16 |         return await response.json();
17 |       }
18 | 
19 |       fetchPollQuestions()
20 |       .then((accessPoll) => {
21 |         const pollOptionsArray = accessPoll.pollOptionsArray;
22 |         setPollOptions(pollOptionsArray);
23 |         const pollPrompt = accessPoll.pollPrompt;
24 |         setPrompt(pollPrompt);
25 |       })
26 |     }, [])
27 | 
28 |     const handleCheck = (event) => {
29 |         updatedList = [...checked];
30 |         console.log(updatedList);
31 |         if (event.target.checked) {
32 |           updatedList = [...checked, event.target.value];
33 |         } else {
34 |           updatedList.splice(checked.indexOf(event.target.value), 1);
35 |         }
36 |         setChecked(updatedList);
37 |     };
38 | 
39 |     const handle = (event) => {
40 |       setName(event.target.value);
41 |     };
42 | 
43 |     const submit = (event) => {
44 |       event.preventDefault();
45 |       const dataToSend = {
46 |         answer: checked[0],
47 |         user: name
48 |       }
49 |       fetch(`http://localhost:3000/api/poll/${id}`, {
50 |           method: "POST", 
51 |           headers: {
52 |             "Content-Type": "application/json"
53 |           },
54 |           body: JSON.stringify(dataToSend),
55 |       }) 
56 |       navigate(`/${id}/display`);
57 |     }
58 | 
59 |     const checkBoxOptions = [];
60 |     pollOptions.forEach((option) => {
61 |       checkBoxOptions.push(
62 |         <div>
63 |           <input value={option} key={option} name='entry' type="radio" onChange={handleCheck}></input>
64 |           <h3>{option}</h3>
65 |           <br></br>
66 |         </div>
67 |       )
68 |     })
69 |   
70 |     return (
71 |         <div>
72 |             <h1>Take Poll</h1>
73 |             <h2>{prompt}</h2>
74 |             <form onSubmit={submit}>
75 |               {checkBoxOptions}
76 |               <input type='text' onChange={(event) => handle(event)} placeholder="enter your name"></input>
77 |               <input type='submit' value="Submit!"></input>
78 |             </form>
79 |         </div>
80 |     )
81 | }
82 | 
83 | export default TakePoll;


--------------------------------------------------------------------------------
/server/middleware/pollMiddleware.js:
--------------------------------------------------------------------------------
  1 | const db = require('../db/db')
  2 | 
  3 | const middleware = {};
  4 | 
  5 | middleware.savePollFormat = async (req, res, next) => {
  6 |   try {
  7 |     const query = 'SELECT MAX(poll_id) FROM poll';
  8 |     const pollID = await db.query(query);
  9 | 
 10 |     const maxID = pollID.rows[0].max + 1;
 11 |     const prompt = req.body[0];
 12 |     const options = req.body;
 13 | 
 14 |     for (let i = 1; i < req.body.length; i++) {
 15 |       const insert = "INSERT INTO poll (poll_id, poll_options, poll_prompt) VALUES ($1, $2, $3)" ;
 16 |       db.query(insert, [maxID, options[i], prompt], (err, res) => {
 17 |         console.log('update successful')
 18 |       })
 19 |     }
 20 |     res.locals.pollID = maxID;
 21 |     return next();
 22 |   } catch(err) {
 23 |     console.log(err)
 24 |   }
 25 | }
 26 | 
 27 | middleware.getPollFormat = async (req, res, next) => {
 28 |     try {
 29 |       const results = await db.query("SELECT poll_options, poll_prompt FROM poll WHERE poll_id = $1", [req.params.id]);
 30 |       let pollOptions = results.rows;
 31 |       const pollOptionsArray = [];
 32 |       let pollPrompt;
 33 |       pollOptions.forEach((object) => {
 34 |         if (object.poll_options) pollOptionsArray.push(object.poll_options);
 35 |         if (object.poll_prompt) pollPrompt = object.poll_prompt;
 36 |       })
 37 |       res.locals.getPollFormat = {
 38 |         pollOptionsArray: pollOptionsArray,
 39 |         pollPrompt: pollPrompt
 40 |       }
 41 |       next();
 42 |       return;
 43 |     }
 44 |     catch(err) {
 45 |         console.log(err);
 46 |         return next(err);
 47 |     }
 48 | }
 49 | 
 50 | middleware.savePollResponse = (req, res, next) => {
 51 |   try{
 52 |     const insert = "INSERT INTO poll (poll_id, entries, users) VALUES ($1, $2, $3)";
 53 |     const pollId = req.params.id
 54 |     const users = req.body.user;
 55 |     const entries = req.body.answer;
 56 |     db.query(insert, [pollId, entries, users], (err, res) => {
 57 |         console.log('update successful')
 58 |       })
 59 |     next();
 60 |     return;
 61 |   } catch(err) {
 62 |     console.log(err)
 63 |   }
 64 | }
 65 | 
 66 | middleware.getPollResponses = async (req, res, next) => {
 67 |     try{
 68 |         const results = await db.query("SELECT * FROM poll WHERE poll_id = $1", [req.params.id]);
 69 |         console.log('results', results);
 70 |         const data = {
 71 |           status: "success",
 72 |           results: results.rows.length,
 73 |             poll: results.rows
 74 |         };
 75 |         res.locals = data;
 76 |         next();
 77 |         return;
 78 |       } catch(err){
 79 |         next(err);
 80 |         return;
 81 |       }
 82 | }
 83 | 
 84 | 
 85 | middleware.deletePoll = async (req, res, next) => {
 86 |     try{
 87 |         const results = await db.query("DELETE FROM poll WHERE id = $1", [req.params.key]);
 88 |         res.locals = results;
 89 |         next();
 90 |         return;
 91 |       } catch(err){ 
 92 |         next(err);
 93 |         return;
 94 |       }
 95 | }
 96 | //in progress
 97 | middleware.updatePoll = async (req, res, next) => {
 98 |     try{
 99 |         const results = await db.query("UPDATE poll SET users=$1, entries=$2 WHERE id=$3", [req.body.users, req.body.entries, req.params.key]);
100 |         // console.log(req.params.key)
101 |         // console.log('results', results);
102 |         const data = {
103 |             status: "success",
104 |             results: results.rows.length,
105 |               poll: results.rows[0]
106 |           };
107 |         res.locals = data;
108 |         next();
109 |         return;
110 |       } catch(err){ 
111 |         console.log
112 |         next(err);
113 |         return;
114 |       }
115 | }
116 | 
117 | module.exports = middleware;
118 | 


--------------------------------------------------------------------------------
/client/pages/DisplayPoll.jsx:
--------------------------------------------------------------------------------
  1 | import { useNavigate, useParams } from 'react-router-dom';
  2 | import React, { useState, useContext, useEffect } from 'react'
  3 | import { Bar } from "react-chartjs-2"
  4 | import { Chart as ChartJS} from 'chart.js/auto'
  5 | //notes: 
  6 | // npm install chart.js
  7 | // npm install react-chartjs-2
  8 | 
  9 | function DisplayPoll() {
 10 | 
 11 |     const [polls, setPolls] = useState([]);
 12 |     const {id} = useParams();
 13 | 
 14 |     const [value, setValue] = useState('')
 15 |     const [updated, setUpdated] = useState(0);
 16 |   //   const [, updateState] = React.useState();
 17 |   // const forceUpdate = React.useCallback(() => updateState({}), []);
 18 | 
 19 | 
 20 |     useEffect(()=>{
 21 |         const fetchPolls = async () => {
 22 |             let response = await fetch(`http://localhost:3000/api/poll/${id}/display`)
 23 |         let data = await response.json()
 24 | 
 25 |         setPolls(data.poll)
 26 |   
 27 |         }
 28 |         fetchPolls()
 29 |         .catch(console.err)
 30 |     },[])  
 31 | 
 32 |   
 33 |     async function handleDelete(e, key, poll_id, users, entries) {
 34 |         console.log("entering handleSubmit?")
 35 |         e.preventDefault();
 36 |         
 37 |         async function postFlask (){
 38 |          const response = await fetch(`http://localhost:3000/api/poll/${poll_id}/${key}`, {
 39 |             method: 'DELETE'
 40 |       
 41 |             })
 42 |         }
 43 |         await postFlask()
 44 |         .catch(err => console.log('error in post server deleting flask'))
 45 |         // navigateFlaskHome()
 46 | 
 47 |       const fetchPolls = async () => {
 48 |         let response = await fetch(`http://localhost:3000/api/poll/${id}/display`)
 49 |         let data = await response.json()
 50 |         setPolls(data.poll)
 51 |         }
 52 |         await fetchPolls()
 53 |         .catch(console.err)
 54 |        
 55 |       }
 56 |       //filtered poll:  removed all rows that did not have entries.  
 57 |     let filteredPoll = polls.filter(poll => poll.entries !== null)
 58 |     // console.log('filteredPoll', filteredPoll)
 59 |     const pollResult = {}
 60 |     const pollOptions = polls.filter(poll => poll.poll_options !==null)
 61 |     //making sure graph contains all poll_options since it is filtered out in the entries
 62 |     pollOptions.forEach(poll => {
 63 |         pollResult[poll.poll_options] = 0
 64 |     })
 65 |     // console.log('pollOptions, check if it has all options, fish', pollOptions)
 66 |     // console.log( 'pollResult', pollResult)
 67 |     
 68 |     filteredPoll.forEach(poll => {
 69 |         pollResult[poll.entries] ? pollResult[poll.entries]++ : pollResult[poll.entries] = 1;
 70 |     })
 71 |     // console.log('pollResult', pollResult)
 72 |     // console.log('Object.entries(pollResult)', Object.entries(pollResult))
 73 |     const test = Object.entries(pollResult).map(entry=> entry[0]);
 74 | 
 75 |     //
 76 |     const pollGraph = {
 77 |         labels: Object.entries(pollResult).map((entry)=> entry[0]),
 78 |         datasets: [{
 79 |           label: "votes",
 80 |           data: Object.entries(pollResult).map((entry)=> entry[1])
 81 |         }],
 82 |         
 83 |         
 84 |       }
 85 | 
 86 |       //getting the prompt to display on top of the page
 87 |       let prompt = polls.filter(poll => poll.poll_prompt !== null)
 88 |     //   console.log('prompt[0]', (prompt[0]))
 89 |     //   let oneObj = prompt[0]
 90 |     //   console.log('oneObj', {...prompt[0]}.poll_prompt)
 91 | // 
 92 |     return (
 93 |      
 94 |      <div className="displayPoll mb-5">
 95 |     
 96 |       <div className="displayPrompt text-secondary"><h1>{{...prompt[0]}.poll_prompt}</h1></div>        
 97 |     {/* bar chart below */}
 98 |       <div className="barchartdiv mb-5">
 99 |          <h3 className="text-center text-muted">Poll Graph</h3>
100 |          <Bar className="display-barchart" data={pollGraph} /> 
101 |         </div>
102 |     {/*  */}
103 |      
104 |    
105 |      {/*  */} 
106 |      <h3 className="text-muted mt-5">Individual Results</h3>
107 |      <div className="display-list-group2 mt-2 mb-5">
108 |      <table className="table table-hover table-light">
109 |        <thead>
110 |          <tr className="bg-primary table-warning">
111 |              
112 |              <th className="text-center" scope="col">Users</th>
113 |              <th className="text-center" scope="col">Vote</th>
114 |              <th className="text-center" scope="col">Delete</th>
115 |          </tr>
116 |        </thead>
117 | 
118 |        <tbody>
119 | 
120 |              {   filteredPoll &&
121 |                  filteredPoll.map(poll => {
122 |                      return (
123 |                          <tr key={poll.id} value={poll.id} >
124 |                              
125 |                              <td className="text-center">{poll.users}</td>
126 |                              <td className="text-center">{poll.entries}</td>
127 |                              <td className="text-center"><button type="submit" onClick={(e) => handleDelete(e, poll.id, poll.poll_id, poll.users, poll.entries)} className="btn btn-danger btn-sm ">Delete</button></td>
128 |                          </tr>
129 |                      )
130 |                  })
131 |              }
132 |         
133 |        </tbody>
134 |      </table>
135 |    </div>
136 |      
137 |      {/*  */}
138 | 
139 |      <h3 className="text-muted mt-5 ">Update Poll</h3>
140 |      {   polls.filter(poll => poll.entries !== null) &&
141 |       polls.filter(poll => poll.entries !== null).map(poll => { return (<UpdateTable poll={poll} setValue={setValue}></UpdateTable>) })
142 |       }
143 | 
144 |     </div>
145 |     )
146 | }
147 | 
148 | 
149 | function UpdateTable({poll, setValue}) {
150 |  
151 |   const [users, setUsers] = useState(poll.users);
152 |   const [entries, setEntries] = useState(poll.entries);
153 |   const refreshPage = ()=>{
154 |     window.location.reload();
155 |  }
156 |   async function handleSubmit(e, key, poll_id){
157 | 
158 |     e.stopPropagation();
159 |     e.preventDefault();
160 | 
161 |     async function postFlask (){
162 |         const response = await fetch(`http://localhost:3000/api/poll/${poll_id}/${key}`, {
163 |             method: 'PUT',
164 |             headers: {
165 |                 'Content-Type': 'application/json'
166 |             },
167 |             body: JSON.stringify({
168 |               users, 
169 |               entries 
170 |             })
171 |         })
172 |     }
173 |     await postFlask()
174 |     await refreshPage()
175 |     .catch(err => console.log('error in post server adding flask'))
176 |     
177 |      }
178 | 
179 |      let reactkey = 0;
180 |      console.log('poll prop in updateTable component handlesubmit', poll.id)
181 | 
182 |      
183 |   return (
184 |     <div>
185 |         <form key={poll.id} action="">
186 |             <div className="form-row row mb-3">
187 |             <div className="col-sm">
188 |             Users <input type="text" value={users} onChange={e=> setUsers(e.target.value)} className="form-control" />
189 |          </div> 
190 |          <div className="col-sm">
191 |             Vote <input type="text" className="form-control" value={entries} onChange={e=> setEntries(e.target.value)}/>
192 |          </div> 
193 |             <button type="submit" onClick={(e) => handleSubmit(e, poll.id, poll.poll_id)} className="btn btn-warning btn-sm  ">Update</button>   
194 |           </div>
195 |                          
196 |           </form>
197 |      
198 |     </div>
199 |   )
200 | }
201 | 
202 | 
203 | 
204 | export { DisplayPoll, UpdateTable }


--------------------------------------------------------------------------------