edit readme, add data load hooks

Author: chrtze

README.md

@@ -1,26 +1,32 @@
-# React Starterkit
+# React Starter
 
 [![Dependabot badge](https://flat.badgen.net/dependabot/wbkd/react-starter?icon=dependabot)](https://dependabot.com/)
 
-**A minimal starting point for your react projects including:**
+A minimal starting point for interactive applications that we build at [webkid](https://webkid.io). The boilerplate already includes some basic components as well as hooks and utils that we are often using in our projects.
+
+The starterkit is based on these libraries:
 
 - [react](https://facebook.github.io/react/)
 - [easy-peasy](https://easy-peasy.now.sh/)
 - [emotion](https://emotion.sh/docs/styled)
 - [rebass](https://rebassjs.org/)
 
-## Get the kit
+## Getting started
+
+**[Create a new Github repository with the template](https://github.com/wbkd/react-starter/generate)** or clone the repo:
 
 ```sh
 git clone [email protected]:wbkd/react-starter.git && cd react-starter
 ```
 
-## Installation
+then install the dependencies via [npm](https://npmjs.org):
 
 ```sh
 npm install
 ```
 
+you are now ready to develop your app.
+
 ## Development
 
 Builds the application and starts a webserver with hot loading.
@@ -38,6 +44,4 @@ Builds a minified version of the application in the build folder.
 npm run build
 ```
 
-## Contribute
-
-Feel free to dive in! [Open an issue](https://github.com/wbkd/react-starter/issues/new) or submit a [pull request](https://github.com/wbkd/react-starter/pulls/).
+Additionally, a zipped version of the bundle is added as `build.zip`. We often use this for our clients to upload the application to their own servers.

package-lock.json

@@ -3,7 +3,7 @@
   "config": {
     "appname": "my-app-name"
   },
-  "version": "6.0.1",
+  "version": "7.0.0",
   "description": "lightweight react starterkit including webpack, unistore, styled components",
   "scripts": {
     "start": "webpack-dev-server --config webpack/webpack.config.dev.js",
@@ -59,12 +59,14 @@
     "@emotion/core": "^10.0.35",
     "@emotion/styled": "^10.0.27",
     "core-js": "^3.6.5",
+    "d3-dsv": "^2.0.0",
     "easy-peasy": "^3.3.1",
     "emotion-normalize": "^10.1.0",
     "emotion-theming": "^10.0.27",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "rebass": "^4.0.7",
+    "topojson-client": "^3.1.0",
     "unfetch": "^4.2.0"
   }
 }

package.json

@@ -0,0 +1,27 @@
+import { useState, useEffect } from 'react';
+import { dsvFormat } from 'd3-dsv';
+import { fetchCsv } from 'utils/data-utils';
+
+const defaultOptions = { delimiter: ',', onEachRow: (d) => d };
+
+export default function useCsvData(url, options = defaultOptions) {
+  const [data, setData] = useState(null);
+  const mergedOptions = { ...defaultOptions, ...options };
+  const { delimiter, onEachRow } = mergedOptions;
+  const csvParser = dsvFormat(delimiter);
+
+  useEffect(() => {
+    const loadData = async () => {
+      const csv = await fetchCsv(url);
+      const result = csvParser.parse(csv, onEachRow);
+      setData(result);
+    };
+
+    loadData();
+  }, [url]);
+
+  return {
+    data,
+    isLoading: !data,
+  };
+}

src/hooks/useCsvData.js

@@ -0,0 +1,20 @@
+import { useState, useEffect } from 'react';
+import { fetchJson } from 'utils/data-utils';
+
+export default function useJsonData(url) {
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    const loadData = async () => {
+      const result = await fetchJson(url);
+      setData(result);
+    };
+
+    loadData();
+  }, [url]);
+
+  return {
+    data,
+    isLoading: !data,
+  };
+}

src/hooks/useJsonData.js

@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'react';
+import { feature } from 'topojson-client';
+import { fetchJson } from 'utils/data-utils';
+
+export default function useTopoData(url) {
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    const loadData = async () => {
+      const topo = await fetchJson(url);
+      const topoKey = Object.keys(topo.objects)[0];
+      const topoData = feature(topo, topo.objects[topoKey]);
+      setData(topoData);
+    };
+
+    loadData();
+  }, [url]);
+
+  return {
+    data,
+    isLoading: !data,
+  };
+}

src/hooks/useTopoData.js

@@ -0,0 +1,28 @@
+import fetch from 'unfetch';
+
+export async function fetchJson(url) {
+  try {
+    const response = await fetch(url);
+    const json = await response.json();
+    return json;
+  } catch (err) {
+    console.log('Error loading data', err);
+    return null;
+  }
+}
+
+export async function fetchCsv(url) {
+  try {
+    const response = await fetch(url);
+    const csv = await response.text();
+    return csv;
+  } catch (err) {
+    console.log('Error loading data', err);
+    return null;
+  }
+}
+
+export default {
+  fetchJson,
+  fetchCsv,
+};

src/utils/data-utils.js

@@ -15,6 +15,7 @@ module.exports = merge(common, {
     contentBase: Path.resolve(__dirname, 'build'),
     historyApiFallback: true,
     hot: true,
+    host: '0.0.0.0',
   },
   plugins: [
     new Webpack.DefinePlugin({