Revamp for 2023 Deployment

- Began with code from the `2023PreDeployment` branch
- Split each component into a separate file
- Added thorough in-code documentation
- Adding eslint and prettier checks for readability and consistency
- Implemented intentional splits between local and global state

Author: amalnanavati

README.md

@@ -0,0 +1,3 @@
+# Feeding Web Interface
+
+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/.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

@@ -2,7 +2,7 @@
 > For Technical Documentation, please refer to [this file](https://github.com/personalrobotics/feeding_web_interface/blob/2023PreDeployment/feedingwebapp/TechDocumentation.md).
 
 ## Summary
-This project aims to develop a web app to connect and control feeding through ADA robot. The overall workflow (state machine) for this robot can be seen below. 
+This project aims to develop a web app to connect and control feeding through ADA robot. The overall workflow (state machine) for this robot can be seen below.
 
 <!-- ![Web App State Machine](https://user-images.githubusercontent.com/8277986/191333326-c71a1765-475c-40f6-87da-a79b7c73e0ee.png) -->
 ![newWebAppWorkflow](https://user-images.githubusercontent.com/26337328/223597500-5e520b7a-eb2b-45ad-b9e8-91fec1bdeba4.jpg)
@@ -11,7 +11,25 @@ This project aims to develop a web app to connect and control feeding through AD
 - [`npm`](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
 - [ROS](http://wiki.ros.org/noetic/Installation)
 
-## Usage 
+## Misc Notes
+Q: Why are we using a global state to manage which page of the app the user is on, as opposed to React's Router?
+A: If we use React's Router, we allow users to navigate through the web app by changing the URL, or clicking the "back" button on their browser. However, not all pages should be reachable from all other pages, e.g., the bite selection page should only be reachable if the robot arm is above the plate. Hence, we use a global state so we can internally control the user's flow through the app.
+
+TODO (amaln):
+- Document debug mode.
+- We use npm, not yarn, as a package installer for this repo
+- Add guidelines for contributing
+
+## Style Guide
+- For writing your code, follow the [AirBnB React/JSX Style Guide](https://airbnb.io/javascript/react/). For anything not specified there (e.g., variable naming conventions), use the [AirBnB JavaScript Style Guide](https://airbnb.io/javascript/).
+  - The style guide was written before hooks (e.g, `useState`) were added to React. Since hooks can only be used within the Component's function, ordering code within that function becomes important. See [this for an example of how to order calls to various hooks](https://dev.to/abrahamlawson/react-style-guide-24pp#comment-1f4fd).
+- For documenting code, follow the [React Styleguidist guide](https://react-styleguidist.js.org/docs/documenting/).
+
+## TODO
+- Consider having a generic "Teleoperation" page that would be accessible from anywhere. The page would show the robot's live video and buttons for the user to teleoperate the robot. This is useful e.g., if the user wants to nudge the robot closer to their face, move the robot when it is above the plate so it doesn't obstruct their desired food, etc. In fact, maybe this should take the place of the "Video" modal, that the user can click anytime. If the robot is currently executing a plan the teleop buttons would be greyed out (but the can still see the video), else they can see the video and teleoperate the robot.
+- An additional axis of customization is to let the user specify the staging location, where one option should be "above the plate" e.g., don't stage it in front of their mouth until the user initiates the bite (with a method other than open mouth).
+
+## Usage
 ### How to run the app locally?
 - 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 HTTP
 - See all branches: `git branch -a` and check to make sure `2022_revamp` branch shows up
@@ -21,51 +39,51 @@ This project aims to develop a web app to connect and control feeding through AD
 - Then, `npm start` to begin the application.
 - Then, use a web browser to navigate to `localhost:3000` to see the application.
 
-In the `Home.js` file, you can set `debug = true` and run the application in debug mode to experience the GUI of the app without needing it to connect to ROS. Otherwise, set it to `debug = false` and run it along with roscore/ros messages. 
+In the `Home.js` file, you can set `debug = true` and run the application in debug mode to experience the GUI of the app without needing it to connect to ROS. Otherwise, set it to `debug = false` and run it along with roscore/ros messages.
 
 #### How to run ROS 'stuff' with the app in `debug = true` mode?
-For this, you just need the web app running. And, to mimic the robot/webapp communicating, there are some default buttons throughtout the app that can help mimic the state changes as described in the state machine picture above. 
+For this, you just need the web app running. And, to mimic the robot/webapp communicating, there are some default buttons throughtout the app that can help mimic the state changes as described in the state machine picture above.
 
 #### How to run ROS 'stuff' with the app in `debug = false` mode?
 - `cd` into the ROS workspace
-- Make sure to open up at least four terminals with all of them inside the workspace. 
+- Make sure to open up at least four terminals with all of them inside the workspace.
 - Then, run `source devel/setup.bash` in each of the terminals that are open (Use Tmux to make splitting terminal easier on Ubuntu)
 - On the first terminal, run `roscore`
 - On the second terminal, run `roslaunch rosbridge_server rosbridge_websocket.launch` to start the webserver. _This will allow the webapp to actually directly connect with the server (when you hit "start feeding" button)._
-- On the third terminal (designate this terminal for yourself to be the "ROBOT sending messages to app") - You can publish messages to `/from_robot` topic and communicate with the webapp to make changes to the states. An example message is `rostopic pub /from_robot std_msgs/String "<state>"`. 
-- On the fourth terminal (designate this terminal for yourself to be the "ROBOT receiving messages from app") - You can listen to messages from `from_web` topic. An example command is `rostopic echo /from_web` to listen to messages published from the webapp. 
+- On the third terminal (designate this terminal for yourself to be the "ROBOT sending messages to app") - You can publish messages to `/from_robot` topic and communicate with the webapp to make changes to the states. An example message is `rostopic pub /from_robot std_msgs/String "<state>"`.
+- On the fourth terminal (designate this terminal for yourself to be the "ROBOT receiving messages from app") - You can listen to messages from `from_web` topic. An example command is `rostopic echo /from_web` to listen to messages published from the webapp.
 
 #### How to run camera 'stuff' with the app?
-The following steps will outline the method to use to run the video collected from a particular topic in the [rosbag](http://wiki.ros.org/rosbag) _These steps might be diffrerent for if you were to connect to Robot's camera (please check)._
-- Start by downloading the rosbags that you wish to run and store them in your ROS workspace. 
-- Make sure to run `source devel/setup.bash`. 
+The following steps will outline the method to use to run the video collected from a particular topic in the [rosbag](http://wiki.ros.org/rosbag) _These steps might be different for if you were to connect to Robot's camera (please check)._
+- Start by downloading the rosbags that you wish to run and store them in your ROS workspace.
+- Make sure to run `source devel/setup.bash`.
 - Then make sure to download the [web video sever](http://wiki.ros.org/web_video_server) files by performing the following steps:
-  - First, split the terminal and open up two terminals both inside the `camera_ws`. Make sure you perform `source devel/setup.bash`. 
+  - First, split the terminal and open up two terminals both inside the `camera_ws`. Make sure you perform `source devel/setup.bash`.
   - In the first terminal, perform the following:  
   ```
   git clone https://github.com/sfalexrog/async_web_server_cpp.git
   cd async_web_server
   git checkout noetic-devel
   ```
-  - In the second terminal, perform the following: 
+  - In the second terminal, perform the following:
   ```
   git clone https://github.com/RobotWebTools/web_video_server.git
   ```
-  Then, perform `catkin build` from one of the terminals. 
-  
+  Then, perform `catkin build` from one of the terminals.
+
 ##### Running Rosbags
-- First navigate into your `catkin_ws` workspace and make sure you have your original rosbag files. This means, if you need to decompress, make sure you decompress and store the decompressed rosbag file. Usually, after decompressing, the rosbag file gets stored as <something>.orig.bag. 
-- Next, run `rosbag play <name of the bag file>`. 
-- You should see the rosbag running its contents. 
-- While this is happening, we will need to start the web server to be able to see the images as video. So, we would navigate into the `camera_ws` workspace and change directory into where ever you have stored the `web_video_server`. 
-- Inside this folder, run `rosrun web_video_server web_video_server`. 
-- After this, you can go to a web browser and type in `localhost:8080` and see that there is a list of topics to choose from. Choose a particular topic to listen to and you should see the video playing. As you do that, you can notice the parameters in web url changing. Make sure you play with the parameters by referring to the document below to get the best quality video for the webapp. 
+- First navigate into your `catkin_ws` workspace and make sure you have your original rosbag files. This means, if you need to decompress, make sure you decompress and store the decompressed rosbag file. Usually, after decompressing, the rosbag file gets stored as <something>.orig.bag.
+- Next, run `rosbag play <name of the bag file>`.
+- You should see the rosbag running its contents.
+- While this is happening, we will need to start the web server to be able to see the images as video. So, we would navigate into the `camera_ws` workspace and change directory into where ever you have stored the `web_video_server`.
+- Inside this folder, run `rosrun web_video_server web_video_server`.
+- After this, you can go to a web browser and type in `localhost:8080` and see that there is a list of topics to choose from. Choose a particular topic to listen to and you should see the video playing. As you do that, you can notice the parameters in web url changing. Make sure you play with the parameters by referring to the document below to get the best quality video for the webapp.
 
-For further information about this, you can refer to [Web Video server](http://wiki.ros.org/web_video_server) document. 
+For further information about this, you can refer to [Web Video server](http://wiki.ros.org/web_video_server) document.
 
-## What are some next steps? 
-- Enabling a method of selecting food from the live video feed that gets displayed in the video tab. 
-- What happens if Wifi goes out? 
+## What are some next steps?
+- Enabling a method of selecting food from the live video feed that gets displayed in the video tab.
+- What happens if Wifi goes out?
 - What happens if the user accidentally refreshes?
 - When you first start the webapp, it should first get the status from the robot and update itself to mimic that of the robot. This could be something that can be implemented to eliminate any syncing issues between the robot and the app. Further, in the Settings page, the app should get the settings as default from the robot.
-- Currently, the E-stop is not accessible when the video modal is open. Consider changing this. 
+- Currently, the E-stop is not accessible when the video modal is open. Consider changing this.