Stubbed out a lot of the store and got data loading.

Author: AdamMorris

.editorconfig

@@ -0,0 +1,7 @@
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[*.{js,ts,jsx,tsx}]
+indent_size = 2
+indent_style = space

package.json

@@ -7,9 +7,14 @@
     "@types/node": "12.7.5",
     "@types/react": "16.9.2",
     "@types/react-dom": "16.9.0",
+    "@types/react-redux": "^7.1.2",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
+    "react-redux": "^7.1.1",
     "react-scripts": "3.1.1",
+    "redux": "^4.0.4",
+    "redux-devtools-extension": "^2.13.8",
+    "redux-saga": "^1.0.5",
     "typescript": "3.6.3"
   },
   "scripts": {
@@ -19,7 +24,14 @@
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
-    "extends": "react-app"
+    "extends": "react-app",
+    "rules": {
+      "quotes": "double",
+      "comma-dangle": [
+        "error",
+        "always-multiline"
+      ]
+    }
   },
   "browserslist": {
     "production": [

data/glTF-projects-data.json renamed to public/data/glTF-projects-data.json

@@ -1,24 +1,18 @@
-import React from "react";
-import logo from "./logo.svg";
+import React, { useState } from "react";
 import "./App.css";
+import { IProjectInfo } from "./interfaces/IProjectInfo";
+import ProjectList from "./components/ProjectList";
 
 const App: React.FC = () => {
+  const [] = useState<IProjectInfo[]>([]);
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <>
+      <div className="header">
+        <h1>glTF Project Explorer</h1>
+      </div>
+      <ProjectList></ProjectList>
+    </>
   );
 };
 

src/App.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { IProjectInfo } from "../interfaces/IProjectInfo";
+
+export interface IFilterBarProps {
+  projects: IProjectInfo[];
+}
+
+const FilterBar: React.FC<IFilterBarProps> = props => {
+  return <div>This will be the filter bar.</div>;
+};
+
+// TODO: Connect the filter bar.
+
+export default FilterBar;

src/components/FilterBar.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { connect } from "react-redux";
+import { IProjectInfo } from "../interfaces/IProjectInfo";
+import { IAppState } from "../interfaces/IAppState";
+
+export interface IProjectListProps {
+  projects: IProjectInfo[];
+}
+
+const ProjectList: React.FC<IProjectListProps> = props => {
+  const { projects } = props;
+
+  return (
+    <>
+      <ul>
+        {projects &&
+          projects.map(p => <li key={`${p.name}_${p.link}`}>{p.name}</li>)}
+      </ul>
+    </>
+  );
+};
+
+function mapStateToProps(state: IAppState): IProjectListProps {
+  const {
+    projects: { values: projects }
+  } = state;
+
+  return { projects };
+}
+
+export default connect(mapStateToProps)(ProjectList);

src/components/ProjectList.tsx

@@ -1,6 +1,41 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import { Provider } from "react-redux";
+import { applyMiddleware, createStore } from "redux";
+import { composeWithDevTools } from "redux-devtools-extension";
+import createSagaMiddleware from "@redux-saga/core";
 import "./index.css";
 import App from "./App";
+import rootReducer from "./store/Reducers";
+import rootSagas from "./store/Sagas";
 
-ReactDOM.render(<App />, document.getElementById("root"));
+// A note about the use of redux here; a lot of inner deliberations were made
+// before choosing to pull in both Redux and Sagas for this app. The idea is
+// to keep this app mostly simple, but Redux and Sagas were pulled in for two
+// major reasons:
+//
+//   1. We have to communicate data changes across the app to several components.
+//   2. Redux makes managing complex state changes (such as filtering) easy.
+//
+// Yes, this is probably over-engineered, but Redux is the best tool for this
+// potentially complex task. If you hate it, blame me and I'd be glad to bike
+// shed about it with you. -ANM
+
+const initialState = {};
+
+const sagaMiddleware = createSagaMiddleware({});
+
+const store = createStore(
+  rootReducer,
+  initialState,
+  composeWithDevTools(applyMiddleware(sagaMiddleware))
+);
+
+sagaMiddleware.run(rootSagas);
+
+ReactDOM.render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  document.getElementById("root") as HTMLElement
+);

src/index.tsx

@@ -0,0 +1,10 @@
+import { IProjectInfo } from "./IProjectInfo";
+
+export interface IProjectsState {
+  isFetchingProjects: boolean;
+  values: IProjectInfo[];
+}
+
+export interface IAppState {
+  projects: IProjectsState;
+}

src/interfaces/IAppState.ts

@@ -0,0 +1,11 @@
+export interface IProjectInfo {
+  name: string;
+  description?: string;
+  link?: string;
+  task?: string[];
+  license?: string[];
+  type?: string[];
+  language?: string[];
+  inputs?: string[];
+  outputs?: string[];
+}

src/interfaces/IProjectInfo.ts

@@ -0,0 +1,9 @@
+import { IProjectInfo } from "../interfaces/IProjectInfo";
+
+// Despite the data being a static file, we don't pull it in using Webpack so
+//   we can change to using a restful service in the future.
+export function fetchProjects(): Promise<IProjectInfo[]> {
+  return fetch("./data/glTF-projects-data.json")
+    .then(r => r.json())
+    .catch(error => console.error(`Error fetching data. Reason: ${error}`));
+}