diff --git a/.babelrc b/.babelrc new file mode 100644 index 00000000..e1146fb3 --- /dev/null +++ b/.babelrc @@ -0,0 +1,18 @@ +{ + "presets": ["next/babel"], + "plugins": [ + ["syntax-dynamic-import"], + [ + "module-resolver", + { + "root": ["./src"], + "alias": { + "assets": "./src/assets", + "components": "./src/components", + "data": "./src/data", + "lib": "./src/lib" + } + } + ] + ] +} diff --git a/.eslintrc.json b/.eslintrc.json index d7fde400..97725fa4 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,11 +1,19 @@ { "root": true, + "parser": "babel-eslint", "extends": ["airbnb", "plugin:prettier/recommended", "prettier/react"], "env": { "browser": true, "jest": true }, + "plugins": ["module-resolver"], + "settings": { + "import/resolver": { + "babel-module": {} + } + }, "rules": { + "module-resolver/use-alias": 2, "react/prop-types": 0, "react/jsx-filename-extension": [ 1, @@ -13,6 +21,7 @@ "extensions": [".js", ".jsx"] } ], + "react/jsx-props-no-spreading": 0, "no-nested-ternary": "off" } } diff --git a/.snyk b/.snyk deleted file mode 100644 index 1e791b9d..00000000 --- a/.snyk +++ /dev/null @@ -1,8 +0,0 @@ -# Snyk (https://snyk.io) policy file, patches or ignores known vulnerabilities. -version: v1.13.3 -ignore: {} -# patches apply the minimum changes required to fix a vulnerability -patch: - SNYK-JS-AXIOS-174505: - - axios: - patched: '2019-05-06T06:06:08.427Z' diff --git a/README.md b/README.md index 6d1965fd..85388e80 100644 --- a/README.md +++ b/README.md @@ -9,6 +9,6 @@ Dominion gives journalist and civic activists useful facts and data about land o ## Chart Definitions -The charts in the app are defined in the json file `charts.json` in the `src/data/`. When you define the charts, they will be assigned a unique id when your run `yarn start` or `yarn deploy` or `yarn build`. This id will be used to identify this chart especially important when used in an embed. Don't chnage the id once the code is deployed otherwise any shared embeds with this Id will fail. +The charts in the app are defined in the json file `charts.json` in the `src/data/` folder. When you define the charts, they will be assigned a unique id when your run `yarn start` or `yarn deploy` or `yarn build`. This id will be used to identify this chart especially important when used in an embed. Don't chnage the id once the code is deployed otherwise any shared embeds with this Id will fail. Note: Using router in gh-pages see [spa-github-pages](https://github.com/rafrex/spa-github-pages). It requires the app to have a `404.html` file with a custom script and a custom script in the `index.html` that will allow the router to work in gh-pages. \ No newline at end of file diff --git a/jsconfig.json b/jsconfig.json new file mode 100644 index 00000000..d766a817 --- /dev/null +++ b/jsconfig.json @@ -0,0 +1,12 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "paths": { + "*": ["*"], + "assets/*": ["src/assets/*"], + "components/*": ["src/components/*"], + "data/*": ["src/data/*"], + "lib/*": ["src/lib/*"] + } + } +} diff --git a/next.config.js b/next.config.js new file mode 100644 index 00000000..4d420bed --- /dev/null +++ b/next.config.js @@ -0,0 +1,4 @@ +const withCSS = require('@zeit/next-css'); +const withImages = require('next-images'); + +module.exports = withCSS(withImages()); diff --git a/package.json b/package.json index 47b0a63d..4e22a681 100644 --- a/package.json +++ b/package.json @@ -4,58 +4,79 @@ "private": true, "homepage": "https://dev.dominion.africa", "dependencies": { - "@codeforafrica/hurumap-ui": "^0.1.12", + "@apollo/react-hooks": "^3.1.3", + "@apollo/react-ssr": "^3.1.3", + "@codeforafrica/hurumap-ui": "^0.2.0-alpha.10", "@fortawesome/fontawesome-free": "^5.9.0", "@fortawesome/fontawesome-svg-core": "^1.2.19", "@fortawesome/free-brands-svg-icons": "^5.6.3", "@fortawesome/free-solid-svg-icons": "^5.6.3", "@fortawesome/react-fontawesome": "^0.1.4", - "@material-ui/core": "^4.5.1", + "@material-ui/core": "^4.6.0", "@material-ui/icons": "^4.5.1", + "@material-ui/styles": "^4.6.0", + "@types/react": "^16.9.11", + "@zeit/next-css": "^1.0.1", "apollo-boost": "^0.4.3", - "apollo-client": "^2.6.3", + "apollo-cache": "^1.3.2", + "apollo-cache-inmemory": "^1.6.3", + "apollo-client": "^2.6.4", + "apollo-link": "^1.2.13", + "apollo-link-http": "^1.5.16", + "apollo-utilities": "^1.3.2", "axios": "^0.19.0", "classnames": "^2.2.6", "dequal": "^1.0.0", "graphql": "^14.4.2", "graphql-tag": "^2.10.1", + "isomorphic-unfetch": "^3.0.0", + "next": "^9.1.3", + "next-images": "^1.2.0", "prop-types": "^15.7.2", "react": "^16.8.6", - "react-apollo": "^2.5.8", + "react-apollo": "^3.1.3", "react-apollo-hooks": "^0.5.0", "react-dom": "^16.8.6", "react-router": "^5.0.1", "react-router-dom": "^5.0.1", - "react-scripts": "3.0.1", "shortid": "^2.2.15", - "typescript": "*" + "typescript": "*", + "webpack": "^4.41.2" }, "devDependencies": { - "eslint": "^5.16.0", - "eslint-config-airbnb": "^17.1.0", - "eslint-config-prettier": "^3.6.0", + "@babel/core": "^7.7.2", + "babel-eslint": "^10.0.3", + "babel-plugin-module-resolver": "^3.2.0", + "babel-plugin-syntax-dynamic-import": "^6.18.0", + "eslint": "^6.6.0", + "eslint-config-airbnb": "^18.0.1", + "eslint-config-prettier": "^6.5.0", + "eslint-import-resolver-babel-module": "^5.1.0", "eslint-plugin-import": "^2.15.0", - "eslint-plugin-json": "^1.4.0", + "eslint-plugin-json": "^2.0.1", "eslint-plugin-jsx-a11y": "^6.2.3", + "eslint-plugin-module-resolver": "^0.15.0", "eslint-plugin-prettier": "^3.0.1", "eslint-plugin-react": "^7.12.4", - "gh-pages": "2.0.1", - "husky": "^1.3.1", - "lint-staged": "^8.1.0", - "prettier": "^1.16.1" + "eslint-plugin-react-hooks": "^1.7.0", + "husky": "^3.0.9", + "lint-staged": "^9.4.2", + "now": "^16.4.4", + "prettier": "^1.19.1" }, "scripts": { "commitChartDefinitions": "git add src/data/charts.json && (git diff-index --quiet HEAD || (git commit -m 'updated chart ids' && git push))", "applyIdsToChartDefinitions": "node scripts/chartsDefinitionsApplyUniqueId.js", + "dev": "next", "prestart": "yarn applyIdsToChartDefinitions", - "start": "react-scripts start", + "start": "next start", "prebuild": "yarn applyIdsToChartDefinitions", - "build": "react-scripts build", - "test": "react-scripts test", - "lint": "node_modules/eslint/bin/eslint.js --fix src scripts", - "eject": "react-scripts eject", + "build": "next build", + "test": "next test", + "lint": "yarn eslint --fix ./", + "lint-staged": "yarn eslint --fix", "predeploy": "yarn build && yarn commitChartDefinitions", - "deploy": "gh-pages -d build", + "deploy": "yarn now --prod", "postversion": "git push --follow-tags && yarn deploy && echo \"Successfully released version $npm_package_version!\"" }, "eslintConfig": { @@ -80,7 +101,7 @@ }, "lint-staged": { "src/**/*.{js,json,scss,md}": [ - "yarn lint", + "yarn lint-staged", "git add" ] } diff --git a/public/404.html b/public/404.html deleted file mode 100644 index 481a8fef..00000000 --- a/public/404.html +++ /dev/null @@ -1,45 +0,0 @@ - - - - - - - - Dominion.AFRICA - - - - - - diff --git a/public/CNAME b/public/CNAME deleted file mode 100644 index 19dc21e0..00000000 --- a/public/CNAME +++ /dev/null @@ -1 +0,0 @@ -dev.dominion.africa \ No newline at end of file diff --git a/public/index.html b/public/index.html deleted file mode 100644 index f74c0f5c..00000000 --- a/public/index.html +++ /dev/null @@ -1,86 +0,0 @@ - - - - - - - - - - - - - Dominion: Who owns the land - - - - -
- - - - - - - diff --git a/public/manifest.json b/public/manifest.json index 1f2f141f..d8b89b39 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,6 +1,6 @@ { - "short_name": "React App", - "name": "Create React App Sample", + "short_name": "Dominion", + "name": "Dominion.AFRICA", "icons": [ { "src": "favicon.ico", @@ -10,6 +10,6 @@ ], "start_url": ".", "display": "standalone", - "theme_color": "#000000", + "theme_color": "#2b3129", "background_color": "#ffffff" } diff --git a/scripts/chartsDefinitionsApplyUniqueId.js b/scripts/chartsDefinitionsApplyUniqueId.js index aa05f6cc..be26881b 100644 --- a/scripts/chartsDefinitionsApplyUniqueId.js +++ b/scripts/chartsDefinitionsApplyUniqueId.js @@ -1,3 +1,7 @@ +/** This file runs under node and hence shouldn't contain + * any `processable` syntax + */ +/* eslint-disable module-resolver/use-alias */ const fs = require('fs'); const shortid = require('shortid'); const sectionedCharts = require('../src/data/charts.json'); diff --git a/src/App.js b/src/App.js deleted file mode 100644 index c3e630cc..00000000 --- a/src/App.js +++ /dev/null @@ -1,48 +0,0 @@ -import React from 'react'; - -import { BrowserRouter, Route, Switch } from 'react-router-dom'; -import Home from './pages/Home'; -import Country from './pages/Country'; -import Profile from './pages/Profile'; -import Resources from './pages/Resources'; -import About from './pages/About'; -import ServerError from './pages/ServerError'; -import NotFound from './pages/NotFound'; -import Embed from './pages/Embed'; - -import config from './config'; - -const supportedCountriesSlug = Object.keys(config.countries).join('|'); - -function App() { - return ( - - - - - - - - - - - - - - - ); -} - -export default App; diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index a754b201..00000000 --- a/src/App.test.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); diff --git a/src/AppContext.js b/src/AppContext.js index 9890c829..376f7082 100644 --- a/src/AppContext.js +++ b/src/AppContext.js @@ -1,7 +1,7 @@ import React, { useReducer } from 'react'; import PropTypes from 'prop-types'; -export const AppContext = React.createContext({}); +const AppContext = React.createContext({}); const initialState = { selectedCountry: {}, @@ -18,7 +18,8 @@ const reducer = (state, action) => { return state; } }; -export default function AppContextProvider({ children }) { + +function Provider({ children }) { const [state, dispatch] = useReducer(reducer, initialState); return ( @@ -27,9 +28,13 @@ export default function AppContextProvider({ children }) { ); } -AppContextProvider.propTypes = { +Provider.propTypes = { children: PropTypes.oneOfType([ PropTypes.arrayOf(PropTypes.node), PropTypes.node ]).isRequired }; + +export { Provider }; + +export default AppContext; diff --git a/src/assets/images/logos/dominion-logo-small.png b/src/assets/images/logos/dominion-logo-small.png new file mode 100644 index 00000000..69c8c2a8 Binary files /dev/null and b/src/assets/images/logos/dominion-logo-small.png differ diff --git a/src/components/A.js b/src/components/A.js deleted file mode 100644 index e02fdcf7..00000000 --- a/src/components/A.js +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -import { Link } from '@material-ui/core'; -import { withStyles } from '@material-ui/core/styles'; - -const styles = () => ({}); - -function A({ children, className, href, variant, ...props }) { - return ( - - {children} - - ); -} -A.propTypes = { - children: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.node), - PropTypes.node - ]).isRequired, - href: PropTypes.string.isRequired, - className: PropTypes.string, - variant: PropTypes.string -}; - -A.defaultProps = { - className: null, - variant: 'inherit' -}; - -export default withStyles(styles)(A); diff --git a/src/components/About/AboutCountry.js b/src/components/About/AboutCountry.js index 3590c15d..9dd04227 100644 --- a/src/components/About/AboutCountry.js +++ b/src/components/About/AboutCountry.js @@ -3,13 +3,13 @@ import PropTypes from 'prop-types'; import { makeStyles, Grid } from '@material-ui/core'; +import land from 'assets/images/hero-image-3.png'; +import config from 'config'; + import Header from './Header'; import Info, { InfoSubtitle, InfoBody } from './Info'; import Land from './Land'; -import land from '../../assets/images/hero-image-3.png'; -import config from '../../config'; - const useStyles = makeStyles(theme => ({ root: { flexGrow: 1, diff --git a/src/components/About/AboutDominion.js b/src/components/About/AboutDominion.js index b1cf4728..64bcd002 100644 --- a/src/components/About/AboutDominion.js +++ b/src/components/About/AboutDominion.js @@ -2,14 +2,14 @@ import React from 'react'; import { makeStyles, Grid } from '@material-ui/core'; +import A from '@codeforafrica/hurumap-ui/core/A'; + +import land from 'assets/images/hero-image-3_2.png'; + import Header from './Header'; import Info, { InfoSubtitle, InfoBody } from './Info'; import Land from './Land'; -import A from '../A'; - -import land from '../../assets/images/hero-image-3_2.png'; - const useStyles = makeStyles(theme => ({ root: { flexGrow: 1, diff --git a/src/components/About/Info.js b/src/components/About/Info.js index 3508cff6..ec82a365 100644 --- a/src/components/About/Info.js +++ b/src/components/About/Info.js @@ -71,7 +71,6 @@ function Info({ children, ...props }) { } Info.propTypes = { - classes: PropTypes.shape({}).isRequired, children: PropTypes.oneOfType([ PropTypes.arrayOf(PropTypes.node), PropTypes.node diff --git a/src/components/About/Land.js b/src/components/About/Land.js index 9d4cb171..dc4f3998 100644 --- a/src/components/About/Land.js +++ b/src/components/About/Land.js @@ -32,7 +32,7 @@ const useStyles = makeStyles(theme => ({ } })); -function Land({ width, imgSrc, ...props }) { +function Land({ imgSrc, ...props }) { const classes = useStyles(props); const theme = useTheme(); let direction = 'column'; @@ -58,7 +58,6 @@ function Land({ width, imgSrc, ...props }) { } Land.propTypes = { - width: PropTypes.string.isRequired, imgSrc: PropTypes.string.isRequired }; diff --git a/src/components/ArrowButton.js b/src/components/ArrowButton.js index ecf1a3ca..fd071534 100644 --- a/src/components/ArrowButton.js +++ b/src/components/ArrowButton.js @@ -5,8 +5,8 @@ import classNames from 'classnames'; import { makeStyles, Button, Grid } from '@material-ui/core'; -import arrow from '../assets/images/icons/combined-shape.svg'; -import arrowBlack from '../assets/images/icons/black-combined-shape.svg'; +import arrow from 'assets/images/icons/combined-shape.svg'; +import arrowBlack from 'assets/images/icons/black-combined-shape.svg'; const useStyles = makeStyles(theme => ({ root: { @@ -41,13 +41,13 @@ const useStyles = makeStyles(theme => ({ } })); -function ArrowButton({ children, onClick, secondary, ...props }) { +function ArrowButton({ children, secondary, ...props }) { const classes = useStyles(props); + return (