Fix prettier errors

Author: picknchew

.eslintrc.js

@@ -8,35 +8,29 @@ module.exports = {
     'plugin:react/recommended',
     'plugin:react-hooks/recommended',
     'standard',
-    'prettier'
+    'prettier',
   ],
   parserOptions: {
     ecmaFeatures: {
-      jsx: true
+      jsx: true,
     },
     ecmaVersion: 12,
-    sourceType: 'module'
+    sourceType: 'module',
   },
-  plugins: [
-    'react',
-    'react-hooks'
-  ],
+  plugins: ['react', 'react-hooks'],
   rules: {
     'react/prop-types': 'off',
     'no-unused-vars': 'off',
-    'react/no-children-prop': 'off'
+    'react/no-children-prop': 'off',
   },
   settings: {
     react: {
       version: 'detect',
-    }
+    },
   },
   overrides: [
     {
-      files: [
-        '**/*.test.js',
-        '**/*.test.jsx'
-      ]
-    }
-  ]
-}
+      files: ['**/*.test.js', '**/*.test.jsx'],
+    },
+  ],
+};

.github/workflows/node.js.yml

@@ -5,13 +5,12 @@ name: Node.js CI
 
 on:
   push:
-    branches: [ master ]
+    branches: [master]
   pull_request:
-    branches: [ master ]
+    branches: [master]
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     strategy:
@@ -20,13 +19,13 @@ jobs:
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v2
-      with:
-        node-version: ${{ matrix.node-version }}
-    - run: npm ci
-    - run: npm run build --if-present
-    - run: npm run lint
-    - run: npm run prettier-check
-    - run: npm test
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm ci
+      - run: npm run build --if-present
+      - run: npm run lint
+      - run: npm run prettier-check
+      - run: npm test

.prettierrc

@@ -3,5 +3,5 @@
   "trailingComma": "es5",
   "singleQuote": true,
   "semi": true,
-  "endOfLine": "lf",
+  "endOfLine": "lf"
 }

.vscode/settings.json

@@ -1,2 +1 @@
-{
-}
+{}

jsconfig.json

@@ -2,4 +2,4 @@
   "compilerOptions": {
     "baseUrl": "src"
   }
-}
+}

src/components/RoomBox/index.js

@@ -43,9 +43,11 @@ function RoomBox(props) {
         setShowViewOnly(true);
       }
       // Populate bubbles data, but don't add client's bubble
-      setBubblesData(produce(data.members, draft => {
-        delete draft[clientUsername];
-      }));
+      setBubblesData(
+        produce(data.members, draft => {
+          delete draft[clientUsername];
+        })
+      );
       // todo: set video position to current time - data.songStartTime
     } else if (status === 'failed') {
       toast({
@@ -63,9 +65,12 @@ function RoomBox(props) {
       if (clientUsername === username) return;
 
       // TODO: find a better way to update this
-      setBubblesData(data => produce(data, draft => {
-        if (draft?.[username]?.position) draft[username].position = newPosition;
-      }));
+      setBubblesData(data =>
+        produce(data, draft => {
+          if (draft?.[username]?.position)
+            draft[username].position = newPosition;
+        })
+      );
     };
 
     const handleJoin = (user, position) => {
@@ -78,15 +83,17 @@ function RoomBox(props) {
         isClosable: true,
         duration: 3000,
       });
-      setBubblesData(data => produce(data, draft => {
-        draft[username] = {
-          profilePicture: profilePicture,
-          prefix: '',
-          username: username,
-          type: 'other',
-          position: position,
-        };
-      }));
+      setBubblesData(data =>
+        produce(data, draft => {
+          draft[username] = {
+            profilePicture: profilePicture,
+            prefix: '',
+            username: username,
+            type: 'other',
+            position: position,
+          };
+        })
+      );
     };
 
     const handleLeave = username => {
@@ -98,9 +105,11 @@ function RoomBox(props) {
         isClosable: true,
         duration: 3000,
       });
-      setBubblesData(data => produce(data, draft => {
-        delete draft[username];
-      }));
+      setBubblesData(data =>
+        produce(data, draft => {
+          delete draft[username];
+        })
+      );
     };
 
     const handleTransferHost = username => {

src/components/YoutubePlayer/index.js

@@ -8,7 +8,7 @@ import {
   playSong,
   endSong,
   stopSong,
-  youtubeAPIReady
+  youtubeAPIReady,
 } from 'slices/youtubeSlice';
 import { ClientPositionContext } from 'contexts/clientposition';
 import { Box } from '@chakra-ui/react';
@@ -88,53 +88,64 @@ function YoutubePlayer(props) {
   const player = useRef(null);
   const boundingBox = useRef(baseBoundingBox);
   const song = useSelector(state => state.currentRoom.data.currentSong);
-  const isYouTubeAPIReady = useSelector(state => state.youtube.isYouTubeAPIReady)
-
-  const onError = useCallback(event => {
-    const { data } = event;
-
-    dispatch(reportError(data));
-  }, [dispatch])
-
-  const onPlayerStateChange = useCallback(event => {
-    const { data } = event;
-
-    switch (data) {
-      case -1:
-        dispatch(clearError());
-        break;
-      case 0:
-        dispatch(endSong());
-        dispatch(clearError());
-        break;
-      case 1:
-        dispatch(playSong());
-        break;
-      case 2:
-        dispatch(clearError());
-        break;
-      case 3:
-        dispatch(clearError());
-        break;
-      case 5:
-        dispatch(clearError());
-        break;
-      default:
-        break;
-    }
-  }, [dispatch])
+  const isYouTubeAPIReady = useSelector(
+    state => state.youtube.isYouTubeAPIReady
+  );
 
-  const onPlayerReady = useCallback(event => {
-    event.target.playVideo();
+  const onError = useCallback(
+    event => {
+      const { data } = event;
 
-    if (!isAuth) {
-      // Set player volume for non authed users,
-      // because they can't control volume by moving bubble
-      dispatch(changeVolume(50));
-    }
+      dispatch(reportError(data));
+    },
+    [dispatch]
+  );
+
+  const onPlayerStateChange = useCallback(
+    event => {
+      const { data } = event;
+
+      switch (data) {
+        case -1:
+          dispatch(clearError());
+          break;
+        case 0:
+          dispatch(endSong());
+          dispatch(clearError());
+          break;
+        case 1:
+          dispatch(playSong());
+          break;
+        case 2:
+          dispatch(clearError());
+          break;
+        case 3:
+          dispatch(clearError());
+          break;
+        case 5:
+          dispatch(clearError());
+          break;
+        default:
+          break;
+      }
+    },
+    [dispatch]
+  );
 
-    boundingBox.current = event.target.getIframe().getBoundingClientRect();
-  }, [dispatch, isAuth])
+  const onPlayerReady = useCallback(
+    event => {
+      event.target.playVideo();
+
+      if (!isAuth) {
+        // Set player volume for non authed users,
+        // because they can't control volume by moving bubble
+        dispatch(changeVolume(50));
+      }
+
+      boundingBox.current = event.target.getIframe().getBoundingClientRect();
+    },
+    [dispatch, isAuth]
+  );
 
   const createPlayer = useCallback(() => {
     player.current = new window.YT.Player('youtube-player', {
@@ -156,7 +167,7 @@ function YoutubePlayer(props) {
         onError: onError,
       },
     });
-  }, [height, width, song, onPlayerReady, onPlayerStateChange, onError])
+  }, [height, width, song, onPlayerReady, onPlayerStateChange, onError]);
 
   function updateSong(song) {
     if (song?.videoId == null) {
@@ -176,13 +187,13 @@ function YoutubePlayer(props) {
   useEffect(() => {
     // callback for youtube iframe api
     window.onYouTubeIframeAPIReady = () => {
-      dispatch(youtubeAPIReady())
-    }
+      dispatch(youtubeAPIReady());
+    };
 
     // if youtube iframe api was loaded before
     if (isYouTubeAPIReady) {
       if (!song) {
-        return
+        return;
       }
 
       // create a youtube player if there isn't already one

src/slices/currentRoomSlice.js

@@ -81,7 +81,7 @@ export const currentRoomSlice = createSlice({
         state.data.host = host;
         state.data.numMembers = numMembers;
         // Convert members from object to array
-        state.data.members =  members;
+        state.data.members = members;
         state.data.currentSong = currentSong;
         state.status = 'success';
         state.isGuest = payload.guest;

src/slices/youtubeSlice.js

@@ -5,7 +5,7 @@ const initialState = {
   videoId: null,
   status: 'unstarted',
   errorCode: null,
-  isYouTubeAPIReady: false
+  isYouTubeAPIReady: false,
 };
 
 // This is for storing youtube player data
@@ -50,7 +50,7 @@ export const youtubeSlice = createSlice({
     },
     youtubeAPIReady: state => {
       state.isYouTubeAPIReady = true;
-    }
+    },
   },
 });
 
@@ -64,7 +64,7 @@ export const {
   reportError,
   clearError,
   reset,
-  youtubeAPIReady
+  youtubeAPIReady,
 } = youtubeSlice.actions;
 
 export default youtubeSlice.reducer;