Merge branch 'develop' into #229-Set-up-Prettier-and-ESLint-for-the-p…

…roject
montevideo-tech · May 10, 2023 · 1995272 · 1995272
2 parents 763ee26 + 7c06811
commit 1995272
Show file tree

Hide file tree

Showing 18 changed files with 3,779 additions and 15,815 deletions.
diff --git a/frontend/README.md b/frontend/README.md
@@ -23,6 +23,6 @@ Follow the MUX docs [here](https://docs.mux.com/guides/video/build-real-time-vid
 
 Set the following env variable to the signed JWT:
 
-- `REACT_APP_MUX_SPACE_JWT`
+- `VITE_MUX_SPACE_JWT`
 
 You can find the docs for the MUX Spaces SDK [here](https://devdocs.mux.com/spaces-web/latest/modules.html).
diff --git a/frontend/index.html b/frontend/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="host and run hybrid meetups for the video community"
+    />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="manifest" href="/manifest.json" />
+    <title>Hybridly</title>
+  </head>
+
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
+  </body>
+</html>
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -22,18 +22,16 @@
     "react-hook-form": "^7.43.9",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.8.1",
-    "react-scripts": "5.0.1",
     "redux-persist": "^6.0.0",
     "redux-thunk": "^2.4.2",
     "styled-components": "^5.3.10",
     "web-vitals": "^2.1.4",
     "yup": "^0.32.11"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "start": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
     "lint": "eslint . --ext .js,.ts,.jsx",
     "lint:fix": "npm run lint -- --fix",
     "prettier:check": "prettier --check .",
@@ -60,13 +58,16 @@
     ]
   },
   "devDependencies": {
+    "@vitejs/plugin-react": "^4.0.0",
     "eslint": "^8.39.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "prettier": "^2.8.8"
+    "prettier": "^2.8.8",
+    "vite": "^4.3.5",
+    "vite-plugin-eslint": "^1.8.1"
   }
 }
diff --git a/frontend/public/index.html b/frontend/public/index.html
diff --git a/frontend/src/actions/index.js b/frontend/src/actions/index.js
@@ -1,5 +1,6 @@
 import mvdTech from '../lib/api';
 import { login } from '../reducers/userSlice';
+import { VITE_SUPABASE_KEY } from '../lib/constants';
 
 export const signInWithEmail = (data, onSuccess = null, onError = null) => async (dispatch) => {
   if (!data || !data.email || !data.password) {
@@ -16,7 +17,7 @@ export const signInWithEmail = (data, onSuccess = null, onError = null) => async
       JSON.stringify({ user }),
       {
         headers: {
-          Authorization: `Bearer ${process.env.REACT_APP_SUPABASE_KEY}`,
+          Authorization: `Bearer ${VITE_SUPABASE_KEY}`,
           'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
         },
       },
@@ -54,7 +55,7 @@ export const signUp = (data, onSuccess = null, onError = null) => async () => {
       JSON.stringify({ user }),
       {
         headers: {
-          Authorization: `Bearer ${process.env.REACT_APP_SUPABASE_KEY}`,
+          Authorization: `Bearer ${VITE_SUPABASE_KEY}`,
           'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
         },
       },
@@ -72,7 +73,7 @@ export const createRoom = (onSuccess = null, onError = null) => async () => {
       JSON.stringify({}),
       {
         headers: {
-          Authorization: `Bearer ${process.env.REACT_APP_SUPABASE_KEY}`,
+          Authorization: `Bearer ${VITE_SUPABASE_KEY}`,
           'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
         },
       },
@@ -89,7 +90,7 @@ export const deleteRoom = (providerId, onSuccess = null, onError = null) => asyn
       `/spaces/${providerId}`,
       {
         headers: {
-          Authorization: `Bearer ${process.env.REACT_APP_SUPABASE_KEY}`,
+          Authorization: `Bearer ${VITE_SUPABASE_KEY}`,
           'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
         },
       },
@@ -112,7 +113,7 @@ export const addRoomToDb = (data, onSuccess = null, onError = null) => async ()
       JSON.stringify({ table: 'rooms', ...data }),
       {
         headers: {
-          Authorization: `Bearer ${process.env.REACT_APP_SUPABASE_KEY}`,
+          Authorization: `Bearer ${VITE_SUPABASE_KEY}`,
           'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
         },
       },
@@ -140,7 +141,7 @@ export const roomJWTprovider = async (
       JSON.stringify({ spaceId: roomId, participantId }),
       {
         headers: {
-          Authorization: `Bearer ${process.env.REACT_APP_SUPABASE_KEY}`,
+          Authorization: `Bearer ${VITE_SUPABASE_KEY}`,
           'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
         },
       },
@@ -174,7 +175,7 @@ export const giveUserRoleOnRoom = async (
       JSON.stringify({ userEmail: email, providerId: roomId, permission: roleToAdd }),
       {
         headers: {
-          Authorization: `Bearer ${process.env.REACT_APP_SUPABASE_KEY}`,
+          Authorization: `Bearer ${VITE_SUPABASE_KEY}`,
           'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
         },
       },
@@ -206,7 +207,7 @@ export const getRoomPermissions = async (
       JSON.stringify({ providerId: roomId, userEmail }),
       {
         headers: {
-          Authorization: `Bearer ${process.env.REACT_APP_SUPABASE_KEY}`,
+          Authorization: `Bearer ${VITE_SUPABASE_KEY}`,
           'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
         },
       },

diff --git a/frontend/src/components/Chat.jsx b/frontend/src/components/Chat.jsx
@@ -1,25 +1,33 @@
-import React, { useState, useEffect } from 'react';
-import { useSelector } from 'react-redux';
-import { useLoaderData } from 'react-router-dom';
-import { subscribeToNewMessages, onSendMessage } from '../utils/chat';
-import { supabase } from '../lib/api';
+import React, { useState, useEffect } from "react";
+import { useSelector } from "react-redux";
+import { useLoaderData } from "react-router-dom";
+import { subscribeToNewMessages, onSendMessage } from "../utils/chat";
+import { supabase } from "../lib/api";
+import { epochToISO8601 } from "../utils/time";
+
 import {
-  ChatButton, ChatContainer, ChatContent, ChatForm, ChatInput
-} from '../themes/componentsStyles';
+  ChatButton,
+  ChatContainer,
+  ChatContent,
+  ChatForm,
+  ChatInput,
+} from "../themes/componentsStyles";
 
 function Chat() {
-  const [content, setContent] = useState('');
+  const [content, setContent] = useState("");
   const { email } = useSelector((state) => state.user);
   const roomId = useLoaderData();
   const [messages, setMessages] = useState([]);
+  const [dateTimeJoined] = useState(epochToISO8601(Date.now()));
 
   async function fetchMessages() {
     const { data, error } = await supabase
-      .from('message-chat')
-      .select('*')
-      .order('created_at', { ascending: true });
+      .from("message-chat")
+      .select("*")
+      .gt("created_at", dateTimeJoined)
+      .order("created_at", { ascending: true });
     if (error) {
-      console.log('Error Fetching Messages:', error);
+      console.log("Error Fetching Messages:", error);
     } else {
       setMessages(data);
     }
@@ -35,23 +43,21 @@ function Chat() {
     if (!email || !content) return;
 
     onSendMessage({ email, content, providerId: roomId });
-    setContent('');
+    setContent("");
   };
   return (
     <ChatContainer>
       <ChatContent>
         {messages?.map((m) => (
           <p>
-            <strong>
-              {m.email}
-              :
-            </strong>
-            {' '}
-            {m.content}
+            <strong>{m.email}:</strong> {m.content}
           </p>
         ))}
       </ChatContent>
-      <ChatForm onSubmit={handleSubmit} style={{ display: 'flex', justifyContent: 'space-between' }}>
+      <ChatForm
+        onSubmit={handleSubmit}
+        style={{ display: "flex", justifyContent: "space-between" }}
+      >
         <ChatInput
           type="text"
           placeholder="Message"

diff --git a/frontend/src/components/ParticipantsCollection.jsx b/frontend/src/components/ParticipantsCollection.jsx
@@ -1,6 +1,7 @@
 import React, {
   useCallback, useMemo, useState, ReactNode,
 } from 'react';
+import { LocalParticipant } from '@mux/spaces-web';
 import PropTypes from 'prop-types';
 import { Box, IconButton } from '@mui/material';
 import ChevronLeftIcon from './icons/ChevronLeftIcon';
@@ -9,10 +10,19 @@ import { MAX_PARTICIPANTS_PER_PAGE } from '../lib/constants';
 import Audio from './Audio';
 import Video from './Video';
 import ParticipantLayout from './ParticipantLayout';
+import { ROLES } from '../utils/roles';
 
 function ParticipantsCollection(props) {
   const {
-    width, height, participantsPerPage, participantsCount, gap, children,
+    width,
+    height,
+    participantsPerPage,
+    participantsCount,
+    gap,
+    children,
+    localParticipant,
+    permissionRole,
+    isEnableToUnmute,
   } = props;
 
   const [currentPage, setCurrentPage] = useState(1);
@@ -52,6 +62,14 @@ function ParticipantsCollection(props) {
 
   const widthBetweenPagination = numberPages === 1 ? width : width - 80;
 
+  const onClickRemove = (r) => {
+    localParticipant.removeRemoteParticipant(r);
+  };
+
+  const onClickMute = (r, isMuted) => {
+    localParticipant.blockMuteRemoteParticipant(r, isMuted);
+  };
+
   // const handleParticipantSelection = (participant) => {
   //   setSelectedParticipant(participant);
   // };
@@ -120,12 +138,15 @@ function ParticipantsCollection(props) {
             videoStream, name, audioMuted, videoMuted, speaking
           }) => (
             <Video
+              permissionRole={permissionRole}
               key={name}
               stream={videoStream}
               isAudioMuted={audioMuted || false}
               isVideoMuted={videoMuted || false}
               isSpeaking={speaking || false}
               name={name}
+              onClick={() => onClickRemove(name)}
+              onClickMute={() => onClickMute(name, audioMuted)}
               // style={selectedParticipant === name
               //   ? selectedParticipantStyle : normalParticipantStyle}
               // onClick={() => handleParticipantSelection(name)}
@@ -170,7 +191,9 @@ ParticipantsCollection.propTypes = {
   gap: PropTypes.number,
   participantsPerPage: PropTypes.number,
   participantsCount: PropTypes.number,
-
+  localParticipant: LocalParticipant,
+  permissionRole: PropTypes.string,
+  isEnableToUnmute: PropTypes.bool,
 };
 
 ParticipantsCollection.defaultProps = {
@@ -180,6 +203,9 @@ ParticipantsCollection.defaultProps = {
   gap: 10,
   participantsPerPage: MAX_PARTICIPANTS_PER_PAGE,
   participantsCount: 1,
+  localParticipant: null,
+  permissionRole: ROLES.GUEST,
+  isEnableToUnmute: true,
 };
 
 export default ParticipantsCollection;