Merge pull request #5 from personalrobotics/amaln/web_app_revamp

2023 Web App Revamp

Author: taylorkf

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,16 @@
+[Describe this pull request. Link to relevant GitHub issues, if any.]
+
+[Explain how this pull request was tested, including but not limited to the below checkmarks.]
+
+***
+
+**Before creating a pull request**
+
+- [ ] Format code with `npm run format`
+- [ ] Thoroughly test your code's functionality, including unintended uses.
+- [ ] Thoroughly test your code's responsiveness by rendering it on different devices, browsers, etc.
+- [ ] Consider the user flow between states that this feature introduces, consider different situations that might occur for the user, and ensure that there is no way for the user to get stuck in a loop.
+
+**Before merging a pull request**
+
+- [ ] Squash all your commits into one (or `Squash and Merge`)

README.md

@@ -1,30 +1,3 @@
-# feeding_web_interface
+# Feeding Web Interface
 
-1. ssh into nano to start the camera node, make sure you export ROS_MASTER_URI to LOVELACE
-
-    ```ssh [email protected]``` passcode is normal lab passcode, with the last 4 characters changed to N@n0
-    
-    ```export ROS_MASTER_URI=https://192.168.2.145:11311```
-    
-    ```./run_camera.sh```
-    
-    ```uselovelace```
-
-* **Make sure all the following commands must be executed in the src/feeding_web_interface/frontend folder**
-
-2. go to ws/src/feeding_web_interface/frontend
-
-    ```./ngrok start --all``` to start proxy server
-3. launch rosbridge_server to create localhost with the following command
-
-    ```roslaunch rosbridge_server rosbridge_websocket.launch```
-    
-4. enter the following command:
-
-    ```python -m SimpleHTTPServer 8082```
-    
-5. start web video server to help streaming camera node:
-
-    ```rosrun web_video_server web_video_server```
-    
-6. go to webpage http://ada_feeding.ngrok.io/ to see the demo web interface. If you follow the above steps carefully, you should now be able to see the camera stream displayed on the right and the foodImage on left.
+This repository contains code for the feeding web app. The app itself is in `feedingwebapp` and contains its own README. The other folder in this repository (will) contain a ROS package that can be used to test the web app's integration with ROS.

feedingwebapp/.eslintignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

feedingwebapp/.eslintrc.js

@@ -0,0 +1,30 @@
+module.exports = {
+  root: true,
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true
+    }
+  },
+  settings: {
+    react: {
+      version: 'detect'
+    }
+  },
+  env: {
+    jest: true,
+    browser: true,
+    amd: true,
+    node: true
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:prettier/recommended' // Make this the last element so prettier config overrides other formatting rules
+  ],
+  rules: {
+    'no-unused-vars': ['error', { vars: 'all', args: 'after-used', ignoreRestSiblings: false }],
+    'prettier/prettier': ['error', {}, { usePrettierrc: true }]
+  }
+}

feedingwebapp/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

feedingwebapp/.prettierrc

@@ -0,0 +1,20 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "embeddedLanguageFormatting": "auto",
+  "htmlWhitespaceSensitivity": "css",
+  "insertPragma": false,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": true,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "requirePragma": false,
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "useTabs": false,
+  "vueIndentScriptAndStyle": false,
+  "printWidth": 140,
+  "tabWidth": 2,
+  "rangeStart": 0
+}

feedingwebapp/README.md

@@ -0,0 +1,55 @@
+# Feeding Web Interface
+
+This directory contains the web app that users use to interact with the robot-assisted feeding system. This readme includes an overview and contribution guidelines, while [TechDocumentation.md](https://github.com/personalrobotics/feeding_web_interface/blob/2023PreDeployment/feedingwebapp/TechDocumentation.md) includes more specific documentation of the technical aspects of the app.
+
+## Overview
+The overall user flow for this robot can be seen below.
+
+![newWebAppWorkflow](https://user-images.githubusercontent.com/26337328/223597500-5e520b7a-eb2b-45ad-b9e8-91fec1bdeba4.jpg)
+(Last Updated 2023/03/07)
+<!-- ![Web App State Machine](https://user-images.githubusercontent.com/8277986/191333326-c71a1765-475c-40f6-87da-a79b7c73e0ee.png) 
+(Last Updated 2022/09/20) -->
+
+## Dependencies
+- [`npm`](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
+<!-- - [ROS](http://wiki.ros.org/noetic/Installation) -->
+
+## Getting Started
+
+### Installation
+1. Clone the repo: `git clone [email protected]:personalrobotics/feeding_web_interface.git` using SSH, or `git clone https://github.com/personalrobotics/feeding_web_interface.git` using HTTPS
+2. `cd {PATH TO feeding_web_interface}/feedingwebapp`
+3. Install all dependencies: `npm install --legacy-peer-deps`
+
+### Usage
+1. `cd {PATH TO feeding_web_interface}/feedingwebapp`
+2. Start the app: `npm start`
+  - Note that if you're not running the robot code alongside the app, set [`debug = true` in `App.jsx`](https://github.com/personalrobotics/feeding_web_interface/blob/b8f5d970628bbaac43b8b9c7dbc4349ada2f32d7/feedingwebapp/src/App.jsx#L17) to be able to move past screens where the app is waiting on the robot. Since the robot is not yet connected, the default is `debug = true`
+3. Use a web browser to navigate to `localhost:3000` to see the application.
+
+## Contributing
+
+### Documenting Tasks
+
+All tasks should be tracked and documented as [Github Issues](https://github.com/personalrobotics/feeding_web_interface/issues).
+
+### Adding Dependencies
+Note that we use `npm`, not `yarn`, to manage dependencies for this project.
+- Dependencies added with `npm install ...` should automatically be added when you add `package.json` and `package-lock.json` to your branch.
+- Additional dependencies should be documented in this readme.
+
+### Writing Code
+- Generally, only work on code if there is a corresponding [Github Issue](https://github.com/personalrobotics/feeding_web_interface/issues) for it.
+- Every feature should be on its own branch, and generally only one person should be pushing to one branch.
+- Follow the below style guides:
+  - [AirBnB React/JSX Style Guide](https://airbnb.io/javascript/react/). This was written before React hooks (e.g, `useState`); see [this for an example of how to order calls to various hooks](https://dev.to/abrahamlawson/react-style-guide-24pp#comment-1f4fd).
+  - [AirBnB JavaScript Style Guide](https://airbnb.io/javascript/) for anything not covered in the above guide (e.g., variable naming conventions).
+  - [React Styleguidist guide](https://react-styleguidist.js.org/docs/documenting/) for documenting code. Every function and component should be documented, and within functions there should be enough documentation that someone without knowledge of React can understand it.
+- Thoroughly test your feature:
+  - Run `npm start`, ensure it has no warnings or errors.
+  - Thoroughly test your feature, including all edge cases, to ensure it works as expected. This includes trying every combination of buttons/actions, even ones we don't expect users to use, to ensure there are no unaccounted for edge cases.
+  - Ensure the [console](https://developer.chrome.com/docs/devtools/console/) has no errors.
+  - Thoroughly test responsivity by changing browser/device size to ensure it renders as expected.
+- Before creating a Pull Request, run `npm format` and address any warnings or errors.
+- Create a Pull Request to merge your branch into `main`. You need at least one approving review to merge.
+- Squash all commits on your branch before merging into `main` to ensure a straightforward commit history.

feedingwebapp/TechDocumentation.md

@@ -0,0 +1,14 @@
+# Technical Documentation
+
+## Global State vs. Local State
+
+**Local State**: React has the native concept of local state, which exists within a component and triggers re-rendering of the component when changed. Local state should contain the variables that do not need to persist beyond a component (e.g., whether or not a to display a pop-up, countdowns to display within the component, etc.). Use [`useState`](https://react.dev/reference/react/useState) to create and access local state variables; see example [here](https://github.com/personalrobotics/feeding_web_interface/blob/b8f5d970628bbaac43b8b9c7dbc4349ada2f32d7/feedingwebapp/src/Pages/Header/Header.jsx#L22).
+
+**Global State**: Global state are the variables that we need to keep track of across components and page refreshes. This includes what page the app is on (see FAQ below), what stage of the meal the user/robot are currently on, and any settings. All variables in global state should be defined in [`GlobalState.jsx`](https://github.com/personalrobotics/feeding_web_interface/blob/amaln/web_app_revamp/feedingwebapp/src/Pages/GlobalState.jsx), along with their setter functions. Internally, we use [`zustland`](https://github.com/pmndrs/zustand) for global state, which in turn uses cookies to store the state. Therefore, the state will persist across page refreshes, even after clearing the cache. The only way to reset global state is by clearing cookies.
+
+## ROS <--> App Interface (Forthcoming)
+
+## Frequently Asked Questions (FAQ)
+
+Q: Why are we using global state as opposed to a [`Router`](https://www.w3schools.com/react/react_router.asp) to decide which app components to render?
+A: If we use a router, each component will have its own URL. That means that by using the "back" button or navigating through the history in their browser, users can reach any screen of the app, even if it doesn't align with the current state of the robot. Since the app's current screen has to be tightly coupled with the state of the robot, we use global state to decide which component to render, as opposed to giving users free reign to jump to any screen of the app by modifying the URL.