Frontend bc workflow (#74)

* frontend workflow to run&build before push  added

* frontend workflow formatting and linting added
----------
Co-authored-by: mertyldrr <mertyildirir14@gmail.com>

.github/workflows/frontend-workflow.yml

@@ -0,0 +1,52 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Node.js CI
+
+on:
+  push:
+    branches:
+      - "main"
+    paths: "frontend/**"
+  pull_request:
+    branches: ["main"]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x, 18.x, 20.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Cache dependencies
+        uses: actions/cache@v2
+        with:
+          path: |
+            **/node_modules
+          key: ${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
+
+      - name: Install dependencies
+        run: npm install
+        working-directory: ./frontend
+
+      - name: Run ESLint
+        run: npx eslint .
+        working-directory: ./frontend
+
+      - name: Format code with Prettier
+        run: npx prettier --write "**/*.{js,jsx,ts,tsx,css,scss}"
+        working-directory: ./frontend
+
+      - name: Build
+        run: CI=false npm run build
+        working-directory: ./frontend

frontend/src/App.js

@@ -62,7 +62,7 @@ function App() {
     console.log("%cRemote Stream Change Handler", "color:blue");
   };
 
-  /** Handle `connectionStateChange` event of {@link Connection}. */
+  /** Handle `connectionStateChange` event of {@link Connection} */
   const stateChangeHandler = async (state) => {
     console.log(
       `%cConnection state change Handler: ${ConnectionState[state]}`,
@@ -128,8 +128,8 @@ function App() {
     const isConnectionTestPage =
       pathname === "/connectiontest" || pathname === "/connectionlatencytest";
 
-    //   // TODO: get experimenter password before creating Connection, e.g. from "login" page
-    //   // The following solution using `prompt` is only a placeholder.
+    // TODO: get experimenter password before creating Connection, e.g. from "login" page
+    // The following solution using `prompt` is only a placeholder.
     if (
       !isConnectionTestPage &&
       userType === "experimenter" &&
@@ -154,7 +154,7 @@ function App() {
       userType,
       sessionId,
       participantId,
-      experimenterPassword || "no-password-given", // "no-password-given" is a placeholder if experimenterPassword is an empty string
+      experimenterPassword || "no-password-given", // "no-password-given" is a placeholder when experimenterPassword is an empty string
       true
     );
 
@@ -199,7 +199,7 @@ function App() {
   };
 
   const handleSavedSession = (data) => {
-    // Redirects to session overview page on saving a session.
+    // Redirects to session overview page on saving a session
     navigate("/");
     if (!getSessionById(data.id, sessionsListRef.current)) {
       setSnackbar({

frontend/src/pages/ConnectionLatencyTest/ConnectionLatencyTest.tsx

@@ -50,9 +50,9 @@ const ConnectionLatencyTest = (props: {
   const [startedRemoteStreamLoop, setStartedRemoteStreamLoop] = useState(false);
   const [remoteStreamData, setRemoteStreamData] = useState<RemoteStreamData[]>(
     []
-  ); // eslint-disable-line @typescript-eslint/no-unused-vars
-  const [localStreamData, setLocalStreamData] = useState<LocalStreamData[]>([]); // eslint-disable-line @typescript-eslint/no-unused-vars
-  const [pingData, setPingData] = useState<PingData[]>([]); // eslint-disable-line @typescript-eslint/no-unused-vars
+  );
+  const [localStreamData, setLocalStreamData] = useState<LocalStreamData[]>([]);
+  const [pingData, setPingData] = useState<PingData[]>([]);
   const [mergedData, setMergedData] = useState<MergedData[] | undefined>();
   const [config, setConfig] = useState<TestConfigObj>(defaultConfig);
   const canvasQRRef = useRef<HTMLCanvasElement>(null);
@@ -113,7 +113,6 @@ const ConnectionLatencyTest = (props: {
       connection.off("remoteStreamChange", streamChangeHandler);
       connection.off("connectionStateChange", stateChangeHandler);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [connection, config, startedRemoteStreamLoop, remoteStreamData]);
 
   // Handle API messages (ping / pong)

frontend/src/styles/styles.js

@@ -1,5 +1,5 @@
 // This file contains style properties used commonly across many components,
-// but it is not the default property unless applied explicitly.
+// but it is not the default property unless applied explicitly
 
 export const sessionCardBorderColor = "3px solid dodgerblue";
 export const ongoingSessionCardBorderColor = "3px solid rgb(255, 119, 0)";