Add more node versions in front building github action

Author: alexisthual

.github/workflows/build_front.yml

@@ -11,14 +11,23 @@ on:
 jobs:
   build:
     name: Build front-end
-    runs-on: ubuntu-latest
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        include:
+          - os: ubuntu-latest
+            node_version: "14"
+          - os: ubuntu-latest
+            node_version: "16"
+          - os: ubuntu-latest
+            node_version: "18"
     steps:
       - uses: actions/checkout@v3
 
-      - name: Set Node.js 16.x
+      - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: ${{ matrix.node_version }}
 
       - name: Run install
         uses: borales/actions-yarn@v4

web/src/views/surface/index.tsx

@@ -82,13 +82,13 @@ const stateFromUrl = (): SurfaceViewState => {
     };
   }
 
-  return (urlState as unknown) as SurfaceViewState;
+  return urlState as unknown as SurfaceViewState;
 };
 
 // Custom hook to load state from URL
 const useSurfaceState = (): [
   SurfaceViewState,
-  React.Dispatch<React.SetStateAction<SurfaceViewState>>
+  React.Dispatch<React.SetStateAction<SurfaceViewState>>,
 ] => {
   const urlState = stateFromUrl();
 
@@ -126,7 +126,7 @@ const SurfaceExplorer = ({ datasetId }: SurfaceViewProps) => {
   const [meshTypeLabels, setMeshTypeLabels] = useState<string[]>([]);
   const [hemiLabels, setHemiLabels] = useState<string[]>([]);
   const [unit, setUnit] = useState<string | undefined>(undefined);
-  const [datasetDescriptions, setDatasetDescriptions] = useState<any>({});
+  const [datasetDescriptions] = useState<any>({});
 
   // Load state from url
   const [state, setState] = useSurfaceState();
@@ -199,7 +199,7 @@ const SurfaceExplorer = ({ datasetId }: SurfaceViewProps) => {
       hemiLabels?.length > 0
     ) {
       if (Object.keys(state.panes).length === 0) {
-        setState(({
+        setState({
           ...state,
           panes: {
             [nanoid(4)]: defaultPaneState(
@@ -210,7 +210,7 @@ const SurfaceExplorer = ({ datasetId }: SurfaceViewProps) => {
               hemiLabels
             ),
           },
-        } as unknown) as SurfaceViewState);
+        } as unknown as SurfaceViewState);
       }
     }
   }, [
@@ -419,15 +419,13 @@ const SurfaceExplorer = ({ datasetId }: SurfaceViewProps) => {
   const paneSubjects = Object.keys(state.panes).map(
     (k) => state.panes[k].subject
   );
-  const previousPaneSubjects = usePrevious<(number | undefined)[]>(
-    paneSubjects
-  );
+  const previousPaneSubjects =
+    usePrevious<(number | undefined)[]>(paneSubjects);
   const paneMeanSurfaceMaps = Object.keys(state.panes).map(
     (k) => state.panes[k].meanSurfaceMap
   );
-  const previousPaneMeanSurfaceMaps = usePrevious<(boolean | undefined)[]>(
-    paneMeanSurfaceMaps
-  );
+  const previousPaneMeanSurfaceMaps =
+    usePrevious<(boolean | undefined)[]>(paneMeanSurfaceMaps);
 
   useEffect(() => {
     if (