Integrates GraphQL/Redux (#5) (#6)

Author: javascript-pro

.github/workflows/ci.yml

@@ -1,20 +1,16 @@
-name: 看看这里 👉
-
+name: Bitcoin Hash Continuous integration 👉
 on: [pull_request]
-
 jobs:
   run-ci:
     env:
       GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-    name: 👌 Listingslab AI Test
+    name: 👌 Listingslab AI
     runs-on: ubuntu-latest
-
     steps:
-      - name: 🦹‍♀️ Checkout
+      - name: 👉 Repository
         uses: actions/checkout@v3
         with:
           fetch-depth: 0
 
-      - name: 👼 React jest suite
-        run: cd react-app && npm install && npm test
+      - name: 👌 Build/run React jest suite
+        run: cd react-app && npm install && npm test

README.md

@@ -1 +1,32 @@
-## Bitcoin Hash
+## ![alt text](./react-app/public/svg/logo16.svg "Bitcoin Hash Logo") Bitcoin Hash
+
+Bootstrapping from recent work, everything needed to build an app quickly is already written. Even the [Documentation](./react-app/public/markdown/)
+
+### [Challenge](./react-app/public/markdown/00_challenge.md) 
+  
+### Solution
+
+#### Install & run
+
+> To connect to Bitquery requires an API key, which can't be exposed in a public repo and is therefore abstracted to an `.env`. Just un-zip `/react-app/env.zip` for a cheaty workaround 
+
+```shell
+# REACT_APP_BITQUERY_API_KEY=""
+```
+
+#### Features
+
+- [Tests](./react-app/public/markdown/05_tests.md)  
+    CI, Jest, GitHub Workflows, TDD. 
+
+- Highly Portable  
+    Copy the folder [/src/BitcoinHash/](https://github.com/listingslab/bitcoin-hash/tree/master/react-app/src/BitcoinHash) into any JS app and it _should just work_. (If all the dependencies exist)
+
+- [Custom Design System](./react-app/public/markdown/30_design-system.md)       
+    Based on several years of constant iteration, the project is bootstrapped with Material UI, listingslab custom components containing all the features I need to rapidly create a full PWA. Example: [<Icon icon="rocket" />](https://github.com/listingslab/bitcoin-hash/blob/master/react-app/src/BitcoinHash/components/Icon.tsx)
+
+- Persistant Data 
+    Instead of saving anything to a DB, we're using a [persisted Redux store with LocalStorage](https://github.com/listingslab/bitcoin-hash/blob/master/react-app/src/BitcoinHash/redux/store.ts). This means a returning visit does not require a DB request and even better; the entire app state is saved. As a next step I would also save the redux state to a cloud based NoSQL DB at certain times for good measure
+
+- [GraphQL](https://github.com/listingslab/bitcoin-hash/blob/feature/graphql/react-app/public/markdown/40_graphql.md)  
+    Combining [Bitquery's GraphQL API](https://bitquery.io/labs/graphql) service with [@apollo/client](https://www.npmjs.com/package/@apollo/client) in React, we developed an async data layer interface which is used via [redux actions](https://github.com/listingslab/bitcoin-hash/tree/master/react-app/src/BitcoinHash/redux/actions)

react-app/.gitignore

@@ -1,5 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+.env
+
 # dependencies
 /node_modules
 /.pnp

react-app/env.zip

@@ -1,7 +1,8 @@
 {
   "name": "bitcoin-hash",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "dependencies": {
+    "@apollo/client": "^3.7.14",
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.11.16",
@@ -14,6 +15,7 @@
     "@types/node": "^17.0.45",
     "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",
+    "graphql": "^16.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.5",

react-app/package-lock.json

@@ -4,8 +4,7 @@
 
 #### Introduction
 
-Hi, thank you for taking on our challenge! We hope that you'll learn a lot, 
-create an awesome project and join our team!
+Hi, thank you for taking on our challenge! We hope that you'll learn a lot, create an awesome project and join our team!
 
 In this test we will evaluate your technical skills, namely, code structure, code quality, naming conventions, knowledge of commonly used frameworks, and overall problem-solving skills. 
 

react-app/package.json

@@ -0,0 +1,14 @@
+## ![alt text](../svg/logo16.svg "Bitcoin Hash Logo") Tests
+
+#### Pull Request checks
+![alt text](../png/github-pr-checks.png "TDD")
+
+#### [Github Continuous Integration](https://github.com/listingslab/bitcoin-hash/blob/master/.github/workflows/ci.yml)  
+
+`/.github/workflows/ci.yml`  
+
+![alt text](../png/github-ci-workflow.png "TDD")
+
+#### React Jest
+![alt text](../png/test-driven-developemnt.png "TDD")
+![alt text](../png/test-driven-developemnt-fail.png "TDD")

react-app/public/markdown/challenge.md renamed to react-app/public/markdown/00_challenge.md

@@ -0,0 +1,15 @@
+## ![alt text](../svg/logo16.svg "Bitcoin Hash Logo") Initialise project
+
+Thinking first about the delivery of the project, requirements are a github repo with CI workflow and a live, publicly accessible demo
+
+- GitHub
+    - [Repo](https://github.com/listingslab/bitcoin-hash)
+- [Firebase Demo](https://bitcoin-hash-demo.web.app)
+
+#### React App
+
+`npx create-react-app react-app --template redux-typescript`
+
+First I make sure that whatever code I write from this point is modular enough to pick up and place in any other JS app. I’ll do that by creating a folder called /src/BitcoinHash in which all code lives. The idea is that so long as the required dependencies exist in the main project, the Bitcoin Hash model/app/whatever should work anywhere. Like Storybook.
+
+Now we’ve initialised the project by creating a repo, setting up a firebase environment and using create-react app to bootstrap the frontend app and chosen an API it’s time to code

react-app/public/markdown/05_tests.md

@@ -0,0 +1,23 @@
+## ![alt text](../svg/logo16.svg "Bitcoin Hash Logo") React
+
+We use a TDD (Test Driven Development) approach to this project. React has Jest built in, so we'll use that. What we’ll do is start the test suite and keep it running during development time. 
+
+#### Test Driven Development
+
+Install dependencies and start the React test suite
+
+```javascript
+cd <working-dir>
+git clone https://github.com/listingslab/bitcoin-hash
+cd bitcoin-hash
+npm install
+npm test
+```
+
+![alt text](../png/test-driven-developemnt.png "TDD")
+
+Any time any test breaks, we investigate and thus build better software. The same tests are used in the Continuous Integration [ci.yaml](https://github.com/listingslab/bitcoin-hash/blob/master/.github/workflows/ci.yml) so team members can’t merge broken code into important branches
+
+![alt text](../png/test-driven-developemnt-fail.png "TDD")
+
+> Fun Fact. Know what yaml stands for? Yet Another Markup Language