first major

payamazadi · Apr 5, 2020 · a04faab · a04faab
1 parent ca881fc
commit a04faab
Show file tree

Hide file tree

Showing 11 changed files with 8,278 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,4 @@
+{
+    "presets": ["@babel/env", "@babel/preset-react"],
+    "plugins": ["@babel/plugin-proposal-class-properties"]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "freedomtracker",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server --mode development"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/cli": "^7.8.4",
+    "@babel/core": "^7.9.0",
+    "@babel/preset-env": "^7.9.0",
+    "@babel/preset-react": "^7.9.4",
+    "babel-loader": "^8.1.0",
+    "css-loader": "^3.4.2",
+    "style-loader": "^1.1.3",
+    "webpack": "^4.42.1",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3"
+  },
+  "dependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "bootstrap": "^4.4.1",
+    "d3-fetch": "^1.1.2",
+    "d3-scale": "^3.2.1",
+    "react": "^16.13.1",
+    "react-bootstrap": "^1.0.0",
+    "react-dom": "^16.13.1",
+    "react-hot-loader": "^4.12.20",
+    "react-simple-maps": "^2.0.0",
+    "react-tooltip": "^4.1.5"
+  }
+}
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,19 @@
+<!-- sourced from https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html -->
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
+  <title>React Starter</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <noscript>
+    You need to enable JavaScript to run this app.
+  </noscript>
+  <script src="../dist/bundle.js"></script>
+</body>
+
+</html>
diff --git a/public/vulnerability.csv b/public/vulnerability.csv
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,4 @@
+.App {
+    margin: 1rem;
+    font-family: Arial, Helvetica, sans-serif;
+}
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,32 @@
+import React, { Component, useState } from "react";
+import ReactTooltip from "react-tooltip";
+import { hot } from "react-hot-loader";
+
+import "./App.css";
+
+import MapChart from "./MapChart";
+
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+// const x = 5;
+
+class App extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { content: "sdf" };
+    }
+
+    render() {
+        return (
+            <div>
+                {/* <MapChart setTooltipContent={(x) => this.setState({ content: x })} /> */}
+                <MapChart  />
+                {/* <ReactTooltip>{this.state.content}</ReactTooltip> */}
+
+            </div>
+
+        );
+    }
+}
+
+export default hot(module)(App);
diff --git a/src/MapChart.js b/src/MapChart.js
@@ -0,0 +1,115 @@
+import React, { Component, memo } from "react";
+import {
+    ZoomableGroup,
+    ComposableMap,
+    Geographies,
+    Geography
+} from "react-simple-maps";
+
+import Modal from 'react-bootstrap/Modal'
+import Button from 'react-bootstrap/Button'
+
+const geoUrl =
+    "https://raw.githubusercontent.com/zcreativelabs/react-simple-maps/master/topojson-maps/world-110m.json";
+
+const fetchGeographies = (url) => {
+return fetch(url)
+    .then(res => {
+    if (!res.ok) {
+        throw Error(res.statusText)
+    }
+    return res.json()
+    }).catch(error => {
+    console.log("There was a problem when fetching the data: ", error)
+    })
+}
+
+const geographies = fetchGeographies(geoUrl);
+
+const rounded = num => {
+    if (num > 1000000000) {
+        return Math.round(num / 100000000) / 10 + "Bn";
+    } else if (num > 1000000) {
+        return Math.round(num / 100000) / 10 + "M";
+    } else {
+        return Math.round(num / 100) / 10 + "K";
+    }
+};
+
+
+class MapChart extends Component {
+    x = 5;
+
+    constructor(props) {
+        super(props);
+        this.state = { showModal: false };
+    }
+
+    test() {
+        alert("ok");
+    }
+
+    render() {
+        const hideModal = () => {
+            this.setState({ showModal: false });
+            this.setState({ class: "default" });
+            this.test();
+        };
+        return (
+            <>
+                <Modal show={this.state.showModal} onHide={hideModal}>
+                    <Modal.Header closeButton>
+                        <Modal.Title>Modal heading</Modal.Title>
+                    </Modal.Header>
+                    <Modal.Body>Woohoo {this.x}, you're reading this text in a modal!</Modal.Body>
+                    <Modal.Footer>
+                        <Button variant="secondary" onClick={hideModal}>
+                            Close
+                        </Button>
+                        <Button variant="primary" onClick={hideModal}>
+                            Save Changes
+                        </Button>
+                    </Modal.Footer>
+                </Modal>
+                <div>wtf</div>
+
+                <ComposableMap data-tip="" projectionConfig={{ scale: 200 }}>
+                    <ZoomableGroup>
+                        <Geographies geography={geoUrl}>
+                            {
+                                ({ geographies }) => geographies.map(
+                                    geo => {
+                                        console.log(geo.properties.ISO_A3);
+                                        return (
+                                            <Geography key={geo.rsmKey} geography={geo} onClick={() => {
+                                                const { NAME, POP_EST } = geo.properties;
+                                                this.setState({ showModal: true });
+                                                // setTooltipContent(`${NAME} — ${rounded(POP_EST)}`);
+                                            }} onMouseLeave={() => {
+                                                this.setState({ class: "default" });
+                                            }} style={{
+                                                default: {
+                                                    fill: "#D6D6DA",
+                                                    outline: "none"
+                                                },
+                                                hover: {
+                                                    fill: "#F53",
+                                                    outline: "none"
+                                                },
+                                                pressed: {
+                                                    fill: "#E42",
+                                                    outline: "none"
+                                                }
+                                            }} />)
+                                    }
+                                )
+                            }
+                        </Geographies>
+                    </ZoomableGroup>
+                </ComposableMap>
+            </>
+        )
+    }
+}
+
+export default MapChart;
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,4 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App.js";
+ReactDOM.render(<App />, document.getElementById("root"));
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,34 @@
+const path = require("path");
+const webpack = require("webpack");
+
+module.exports = {
+  entry: "./src/index.js",
+  mode: "development",
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /(node_modules|bower_components)/,
+        loader: "babel-loader",
+        options: { presets: ["@babel/env"] }
+      },
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader"]
+      }
+    ]
+  },
+  resolve: { extensions: ["*", ".js", ".jsx"] },
+  output: {
+    path: path.resolve(__dirname, "dist/"),
+    publicPath: "/dist/",
+    filename: "bundle.js"
+  },
+  devServer: {
+    contentBase: path.join(__dirname, "public/"),
+    port: 3000,
+    publicPath: "http://localhost:3000/dist/",
+    hotOnly: true
+  },
+  plugins: [new webpack.HotModuleReplacementPlugin()]
+};