Condorcet Frontend

Todo list

password reset
redirect to login page on expired token
- go back to original page after login
archive election results
- preserve information so that it does not get lost when deleting election or user
delete election/user
- depends on archiving elections
confirmations for destructive operations
changes after vote
- for some kinds of elections it makes sense to allow changes to the election after voting has started
- still need to preserve the kinds of elections where everything is fixed once voting starts

Prerequisites

Scripts

./scripts/prepare.sh
- One time initialization
./scripts/run.sh
- Run application
./scripts/test.sh
- Run the tests
./scripts/coverage.sh
- Test coverage report

How this project was created

npm install -g npm@latest
npx create-react-app condorcet-frontend
cd condorcet-frontend
npm install ramda
npm install redux
npm install react-redux
npm install redux-saga
npm install history
npm install http-proxy-middleware

Proxy setup

Create file src/setupProxy.js, with the following contents

const {createProxyMiddleware} = require('http-proxy-middleware');

module.exports = function (app) {
    const options = {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
            '^/proxy/': '/',
        }
    };
    app.use(
        '/proxy/',
        createProxyMiddleware(options)
    );
};

The idea here is to be specific about which http paths should render something from the source directory vs. a proxy to elsewhere. This helps prevent urls from conflicting in case a path to a proxied resource happens to match a path to a resource in the src directory. The source code adds the 'proxy' prefix indicating this is a request that should be proxied, but when proxying out externally, the proxy middleware rewrites the url, removing the proxy prefix.

Css reset

Add the file reset.css, and import it from index.js import './reset.css'

The idea here is to preserve a consistent presentation in spite of different browser css defaults, and be more explicit and intentional about what css styles are applied

Technology Stack

React
Ramda
React Router
- react-router-dom
history
Jest
- expect api
Testing Library
- queries
http-proxy-middleware
- https://github.com/chimurai/http-proxy-middleware
- https://www.npmjs.com/package/http-proxy-middleware

Nginx

config file is at /usr/local/etc/nginx/nginx.conf

html content symlink is at /usr/local/Cellar/nginx/1.21.6/html html content is at /usr/local/var/www

to stop nginx nginx -s quit

Confirmed to work

location  /proxy {
    rewrite /proxy/(.*) /$1 break;
    proxy_pass         http://localhost:8080;
    proxy_redirect     off;
    proxy_set_header   Host $host;
}

Notes

To pull out emails from table Array.from(document.querySelectorAll('td:nth-child(3)')).map(element => element.innerText).forEach(email => console.log(email))

seanshubin / condorcet-frontend Goto Github PK