Use Hook to control application state (#46)

* remove .old files

* add store and actions, rewrite EventItem using hook instead of class constructor

* fix time format doesn't have prefix 0 when there is only one digit

* add star to mark favorite events. TODO, save to localStorage, render in selected events tab

* use json instead of csv, and use data directly from backend/data, also fix time parse format

* save event_index to store instead of event_id

gatsby_site/gatsby-config.js

@@ -4,25 +4,25 @@ module.exports = {
   },
   plugins: [
     {
-      resolve: `gatsby-plugin-typography`,
+      resolve: 'gatsby-plugin-typography',
       options: {
-        pathToConfigModule: `src/utils/typography`,
+        pathToConfigModule: 'src/utils/typography',
       },
     },
     {
-      resolve: `gatsby-plugin-styled-components`,
+      resolve: 'gatsby-plugin-styled-components',
       options: {
         // Add any options here
       },
     },
     'gatsby-plugin-eslint',
     {
-      resolve: `gatsby-source-filesystem`,
+      resolve: 'gatsby-source-filesystem',
       options: {
-        name: `data`,
-        path: `${__dirname}/data/`,
+        name: 'data',
+        path: `${__dirname}/../backend/data/`,
       },
     },
-    `gatsby-transformer-csv`,
+    'gatsby-transformer-json',
   ],
 };

gatsby_site/package.json

@@ -22,6 +22,7 @@
     "gatsby-plugin-typography": "^2.2.13",
     "gatsby-source-filesystem": "^2.0.37",
     "gatsby-transformer-csv": "^2.0.8",
+    "gatsby-transformer-json": "^2.2.9",
     "moment": "^2.24.0",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
@@ -30,7 +31,8 @@
     "shortid": "^2.2.14",
     "styled-components": "^4.2.0",
     "typography": "^0.16.19",
-    "typography-theme-moraga": "^0.16.19"
+    "typography-theme-moraga": "^0.16.19",
+    "use-global-hook": "^0.1.10"
   },
   "devDependencies": {
     "eslint": "^5.16.0",

gatsby_site/src/actions/index.js

@@ -0,0 +1,16 @@
+const toggleSelectedEvent = (store, selectedEventId) => {
+  const { selectedEvents } = store.state;
+
+  store.setState({
+    selectedEvents: selectedEvents.includes(selectedEventId)
+      ? selectedEvents.filter(x => x !== selectedEventId)
+      : [...selectedEvents, selectedEventId],
+  });
+};
+
+const saveToLocalStorage = (store) => {
+  // eslint-disable-next-line
+  console.log(`should save ${store} to localStorage here..`);
+};
+
+export { toggleSelectedEvent, saveToLocalStorage };