diff --git a/src/App.tsx b/src/App.tsx index 1151917..701edbf 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -14,9 +14,15 @@ import Theme from "./Theme"; import "./style/App.css"; import Sidebar from "./components/sidebar/Sidebar"; -import { MeetingStatus, SidebarUserObj } from "./components/sidebar/SidebarUser"; +import { + MeetingStatus, + SidebarUserObj, +} from "./components/sidebar/SidebarUser"; +import MeetingDetails from "./components/meeting-details/MeetingDetails"; +import { Box } from "@mui/material"; const App: React.FC = () => { + const [meetingInfoOpen, setMeetingInfoOpen] = useState(false); /* Temporary data */ const [sidebarUsers] = useState([ @@ -45,17 +51,27 @@ const App: React.FC = () => { return ( - - - } /> - }> - } /> - } /> - } /> - - + + + + } /> + }> + } /> + } + /> + } /> + + + + + + + + ); diff --git a/src/api-bodies/DetailedMeeting.tsx b/src/api-bodies/DetailedMeeting.tsx new file mode 100644 index 0000000..eb64a19 --- /dev/null +++ b/src/api-bodies/DetailedMeeting.tsx @@ -0,0 +1,12 @@ +interface DetailedMeeting { + meetingId: string; // primary key + liveParticipantIds: string[]; + registrantIds: string[]; + start: string; + duration: number; + timezone: string; + joinUrl: string; + topic: string; +} + +export default DetailedMeeting; diff --git a/src/api-bodies/NewMeeting.tsx b/src/api-bodies/NewMeeting.tsx new file mode 100644 index 0000000..a36bc0b --- /dev/null +++ b/src/api-bodies/NewMeeting.tsx @@ -0,0 +1,10 @@ +interface NewMeeting { + uuid: string; + startTime: string; + duration: number; + timezone: string; + topic: string; + registrantsIds: string[]; +} + +export default NewMeeting; diff --git a/src/api-bodies/UserFull.tsx b/src/api-bodies/UserFull.tsx new file mode 100644 index 0000000..c67dbc7 --- /dev/null +++ b/src/api-bodies/UserFull.tsx @@ -0,0 +1,9 @@ +import UserLite from "./UserLite"; + +interface UserFull { + userInfo: UserLite; + manager: UserLite; + directReports: UserLite[]; +} + +export default UserFull; diff --git a/src/api-bodies/UserLite.tsx b/src/api-bodies/UserLite.tsx new file mode 100644 index 0000000..6882238 --- /dev/null +++ b/src/api-bodies/UserLite.tsx @@ -0,0 +1,8 @@ +interface UserLite { + uuid: string; + emailAddress: string; + name: string; + role: string; +} + +export default UserLite; diff --git a/src/components/contacts/Contacts.tsx b/src/components/contacts/Contacts.tsx index 7fcc7e6..c95afe8 100644 --- a/src/components/contacts/Contacts.tsx +++ b/src/components/contacts/Contacts.tsx @@ -1,11 +1,15 @@ import { Box } from "@mui/material"; import React from "react"; -import Body from "./Body"; +import Body from "./contacts-components/Body"; import ContactInfo from "./ContactInfo"; -import Sidebar from "./Sidebar"; +import Sidebar from "./contacts-components/Sidebar"; -const Contacts: React.FC = () => { +interface Props { + setMeetingInfoOpen: (open: boolean) => void; +} + +const Contacts: React.FC = (props) => { const [contactSelected, setContactSelected] = React.useState(null); @@ -13,7 +17,10 @@ const Contacts: React.FC = () => { {contactSelected !== null ? ( - + ) : null} ); diff --git a/src/components/contacts/Body.tsx b/src/components/contacts/contacts-components/Body.tsx similarity index 57% rename from src/components/contacts/Body.tsx rename to src/components/contacts/contacts-components/Body.tsx index f4f6a66..fd4de4a 100644 --- a/src/components/contacts/Body.tsx +++ b/src/components/contacts/contacts-components/Body.tsx @@ -1,11 +1,12 @@ import { Box, Toolbar } from "@mui/material"; import React from "react"; -import UpperBody from "./UpperBody"; -import LowerBody from "./LowerBody"; -import ContactInfo from "./ContactInfo"; +import UpperBody from "./body-components/UpperBody"; +import LowerBody from "./body-components/LowerBody"; +import ContactInfo from "../ContactInfo"; interface Props { contactSelected: ContactInfo; + setMeetingInfoOpen: (open: boolean) => void; } const Body: React.FC = (props) => { @@ -20,7 +21,10 @@ const Body: React.FC = (props) => { > - + ); }; diff --git a/src/components/contacts/Sidebar.tsx b/src/components/contacts/contacts-components/Sidebar.tsx similarity index 94% rename from src/components/contacts/Sidebar.tsx rename to src/components/contacts/contacts-components/Sidebar.tsx index 8253a0e..f4007f4 100644 --- a/src/components/contacts/Sidebar.tsx +++ b/src/components/contacts/contacts-components/Sidebar.tsx @@ -9,9 +9,9 @@ import { } from "@mui/material"; import React from "react"; import { ExpandLess, ExpandMore } from "@mui/icons-material"; -import ContactInfo from "./ContactInfo"; -import Status from "./Status"; -import ContactItem from "./ContactItem"; +import ContactInfo from "../ContactInfo"; +import Status from "../Status"; +import ContactItem from "./sidebar-components/ContactItem"; const contacts: ContactInfo[] = [ { name: "Taehee ...", status: Status.Online }, diff --git a/src/components/contacts/LowerBody.tsx b/src/components/contacts/contacts-components/body-components/LowerBody.tsx similarity index 71% rename from src/components/contacts/LowerBody.tsx rename to src/components/contacts/contacts-components/body-components/LowerBody.tsx index 35bb6cc..a43d74f 100644 --- a/src/components/contacts/LowerBody.tsx +++ b/src/components/contacts/contacts-components/body-components/LowerBody.tsx @@ -1,6 +1,6 @@ -import { Box, List, Typography } from "@mui/material"; +import { Box, Button, List, Typography } from "@mui/material"; import React from "react"; -import ContactInfo from "./ContactInfo"; +import ContactInfo from "../../ContactInfo"; const meetings: { name: string; duration: string }[] = [ { name: "Kanban Meeting", duration: "10:45 am - 11:45 am" }, @@ -12,9 +12,10 @@ const meetings: { name: string; duration: string }[] = [ interface Props { contactInfo: ContactInfo; + setMeetingInfoOpen: (open: boolean) => void; } -const LowerBody: React.FC = () => { +const LowerBody: React.FC = (props) => { return ( = () => { border: 1, borderRadius: 2, width: "70%", - height: "70%", + height: "60%", alignSelf: "center", }} > @@ -43,8 +44,14 @@ const LowerBody: React.FC = () => { }} key={i} > - {meeting.name} - {meeting.duration} + + {meeting.duration} ))} diff --git a/src/components/contacts/UpperBody.tsx b/src/components/contacts/contacts-components/body-components/UpperBody.tsx similarity index 60% rename from src/components/contacts/UpperBody.tsx rename to src/components/contacts/contacts-components/body-components/UpperBody.tsx index 0c53c2a..18ead7a 100644 --- a/src/components/contacts/UpperBody.tsx +++ b/src/components/contacts/contacts-components/body-components/UpperBody.tsx @@ -3,7 +3,8 @@ import React from "react"; import PhoneIcon from "@mui/icons-material/Phone"; import VideocamIcon from "@mui/icons-material/Videocam"; import GroupsIcon from "@mui/icons-material/Groups"; -import ContactInfo from "./ContactInfo"; +import ContactInfo from "../../ContactInfo"; +import AddIcon from "@mui/icons-material/Add"; interface Props { contactInfo: ContactInfo; @@ -26,40 +27,45 @@ const UpperBody: React.FC = (props) => { sx={{ display: "flex", flexDirection: "row", - justifyContent: "space-evenly", + justifyContent: "space-between", alignItems: "center", + mx: 4, }} > {props.contactInfo.name} + - - + + - + - + - - - {props.contactInfo.status} + + + {props.contactInfo.status} + MeetingName-1372 diff --git a/src/components/contacts/ContactItem.tsx b/src/components/contacts/contacts-components/sidebar-components/ContactItem.tsx similarity index 90% rename from src/components/contacts/ContactItem.tsx rename to src/components/contacts/contacts-components/sidebar-components/ContactItem.tsx index 36f5043..c8d9e48 100644 --- a/src/components/contacts/ContactItem.tsx +++ b/src/components/contacts/contacts-components/sidebar-components/ContactItem.tsx @@ -2,8 +2,8 @@ import { ListItemButton, ListItemIcon, ListItemText } from "@mui/material"; import React from "react"; import PersonOutlineIcon from "@mui/icons-material/PersonOutline"; import CircleIcon from "@mui/icons-material/Circle"; -import ContactInfo from "./ContactInfo"; -import { returnStatusColor } from "./Utils"; +import ContactInfo from "../../ContactInfo"; +import { returnStatusColor } from "../../Utils"; interface Props { contactInfo: ContactInfo; diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx index da75841..c50a231 100644 --- a/src/components/home/Home.tsx +++ b/src/components/home/Home.tsx @@ -5,16 +5,16 @@ import Grid from "@mui/material/Grid"; const Home: React.FC = () => { return ( - - - - - - - - - - + + + + + + + + + + ); }; diff --git a/src/components/home/Meeting.tsx b/src/components/home/Meeting.tsx index bc054c7..efd40d1 100644 --- a/src/components/home/Meeting.tsx +++ b/src/components/home/Meeting.tsx @@ -1,20 +1,25 @@ -function Meeting(props: any) { - return ( +interface Props { + meetingName: string; + meetingTime: string; + meetingMembers: string +} -
-
-
- -
-
- -
-
- -
-
+function Meeting(props: Props) { + return ( +
+
+
+
- ); - }; - - export default Meeting; \ No newline at end of file +
+ +
+
+ +
+
+
+ ); +} + +export default Meeting; diff --git a/src/components/home/MeetingsPanel.tsx b/src/components/home/MeetingsPanel.tsx index 1756ffc..358fd94 100644 --- a/src/components/home/MeetingsPanel.tsx +++ b/src/components/home/MeetingsPanel.tsx @@ -1,19 +1,19 @@ import Meeting from "./Meeting"; const MeetingsPanel: React.FC = () => { - return ( -
-
- -
-
- -
+ return ( +
+
+ +
+
+ +
- - -
- ); - }; + + +
+ ); +}; - export default MeetingsPanel; \ No newline at end of file +export default MeetingsPanel; \ No newline at end of file diff --git a/src/components/home/ShortCuts.tsx b/src/components/home/ShortCuts.tsx index 2ea7277..61afba9 100644 --- a/src/components/home/ShortCuts.tsx +++ b/src/components/home/ShortCuts.tsx @@ -1,43 +1,43 @@ -import PeopleIcon from '@mui/icons-material/People'; -import AddIcon from '@mui/icons-material/Add'; -import PhoneEnabledIcon from '@mui/icons-material/PhoneEnabled'; -import CircleIcon from '@mui/icons-material/Circle'; +import PeopleIcon from "@mui/icons-material/People"; +import AddIcon from "@mui/icons-material/Add"; +import PhoneEnabledIcon from "@mui/icons-material/PhoneEnabled"; +import CircleIcon from "@mui/icons-material/Circle"; import Button from "@mui/material/Button"; import Grid from "@mui/material/Grid"; const ShortCuts: React.FC = () => { - return ( -
- - - - - - - - - - - - - - - - - - - - -
- ); - }; + return ( +
+ + + + + + + + + + + + + + + + + + + + +
+ ); +}; - export default ShortCuts; \ No newline at end of file +export default ShortCuts; \ No newline at end of file diff --git a/src/components/login/Login.tsx b/src/components/login/Login.tsx index c63160c..8a0f4db 100644 --- a/src/components/login/Login.tsx +++ b/src/components/login/Login.tsx @@ -1,4 +1,4 @@ -import { useRef, useState, useEffect, useContext } from 'react'; +import { useRef, useState, useEffect, useContext } from "react"; import { useLocation, Link, useNavigate } from "react-router-dom"; import { Stack } from "@mui/material"; import Container from "@mui/material/Container"; @@ -6,61 +6,61 @@ import TextField from "@mui/material/TextField"; import Button from "@mui/material/Button"; import hsbcLogo from "../../assets/logo-png.png"; import zoomLogo from "../../assets/zoom.png"; -import LoginIcon from '@mui/icons-material/Login'; +import LoginIcon from "@mui/icons-material/Login"; import useAuth from "../../hooks/useAuth"; const Login: React.FC = () => { - const { setAuth }: any = useAuth(); + const { setAuth }: any = useAuth(); - const navigate = useNavigate(); - const location: any = useLocation(); - const from = location.state?.from?.pathname || "/"; + const navigate = useNavigate(); + const location: any = useLocation(); + const from = location.state?.from?.pathname || "/"; - const [username, setUsername] = useState(''); - const [password, setPassword] = useState(''); - // const [errMsg, setErrMsg] = useState(''); - - // const userRef = useRef(); - // const errRef = useRef(); + const [username, setUsername] = useState(""); + const [password, setPassword] = useState(""); + // const [errMsg, setErrMsg] = useState(''); - // useEffect(() => { - // userRef.current.focus(); - // }, []) + // const userRef = useRef(); + // const errRef = useRef(); - // useEffect(() => { - // setErrMsg(''); - // }, [user, pwd]) + // useEffect(() => { + // userRef.current.focus(); + // }, []) - const handleLogin = () => { - if (username === "" && password === "") { - setAuth({username: username, isLoggedIn: true}); - navigate(from, {replace: true}); - } - setUsername(""); - setPassword(""); - }; + // useEffect(() => { + // setErrMsg(''); + // }, [user, pwd]) - return ( - - - HSBC Logo - {/*

{errMsg}

*/} - {setUsername(event.target.value)}}/> - {setPassword(event.target.value)}}/> - - Forgotten Your Password? - - - - - - Zoom Logo - - - - - ); + const handleLogin = () => { + if (username === "" && password === "") { + setAuth({username: username, isLoggedIn: true}); + navigate(from, {replace: true}); + } + setUsername(""); + setPassword(""); }; + + return ( + + + HSBC Logo + {/*

{errMsg}

*/} + {setUsername(event.target.value)}}/> + {setPassword(event.target.value)}}/> + + Forgotten Your Password? + + + + + + Zoom Logo + + + + + ); +}; - export default Login; \ No newline at end of file +export default Login; \ No newline at end of file diff --git a/src/components/meeting-details/MeetingDetails.tsx b/src/components/meeting-details/MeetingDetails.tsx new file mode 100644 index 0000000..dcca058 --- /dev/null +++ b/src/components/meeting-details/MeetingDetails.tsx @@ -0,0 +1,20 @@ +import { Dialog } from "@mui/material"; +import React from "react"; +import Body from "./meeting-details-components/Body"; +import Header from "./meeting-details-components/Header"; + +interface Props { + open: boolean; + setOpen: (open: boolean) => void; +} + +const MeetingDetails: React.FC = (props) => { + return ( + props.setOpen(false)}> +
+ +
+ ); +}; + +export default MeetingDetails; diff --git a/src/components/meeting-details/meeting-details-components/Body.tsx b/src/components/meeting-details/meeting-details-components/Body.tsx new file mode 100644 index 0000000..632ac39 --- /dev/null +++ b/src/components/meeting-details/meeting-details-components/Body.tsx @@ -0,0 +1,74 @@ +import { + Box, + List, + ListItem, + ListItemIcon, + ListItemText, + Typography, +} from "@mui/material"; +import React from "react"; +import PersonOutlineIcon from "@mui/icons-material/PersonOutline"; + +const Body: React.FC = () => { + return ( + + + Feb 10, 2022 10:45 am - 11:00 am + Status: Live + + Topic: Lorem Ipsum is simply dummy text of the printing and + typesetting industry. Lorem Ipsum has been the industrys standard + dummy text ever since the 1500s. Topic: Lorem Ipsum is simply dummy + text of the printing and typesetting industry. Lorem Ipsum has been + the industrys standard dummy text ever since the 1500s. + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default Body; diff --git a/src/components/meeting-details/meeting-details-components/Header.tsx b/src/components/meeting-details/meeting-details-components/Header.tsx new file mode 100644 index 0000000..5f40cd8 --- /dev/null +++ b/src/components/meeting-details/meeting-details-components/Header.tsx @@ -0,0 +1,36 @@ +import { AppBar, Button, IconButton, Toolbar, Typography } from "@mui/material"; +import React from "react"; +import CloseIcon from "@mui/icons-material/Close"; + +interface Props { + setOpen: (open: boolean) => void; +} + +const Header: React.FC = (props) => { + return ( + + + + Kanban Meeting + + + + props.setOpen(false)} + sx={{ ml: 1 }} + > + + + + + ); +}; + +export default Header; diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx index 08cb47b..8a544bb 100644 --- a/src/components/sidebar/Sidebar.tsx +++ b/src/components/sidebar/Sidebar.tsx @@ -1,13 +1,20 @@ -import { Divider, Drawer, List, ListItem, ListSubheader } from "@mui/material"; +import { + Divider, + Drawer, + List, + ListItem, + ListSubheader, + Toolbar, +} from "@mui/material"; import GroupSelect from "./GroupSelect"; import SidebarUser, { SidebarUserObj } from "./SidebarUser"; // TODO: toolbar on top of sidebar since it goes under the navbar -const drawerWidth = 240; +const drawerWidth = 200; interface Props { - users: SidebarUserObj[], + users: SidebarUserObj[]; } const Sidebar: React.FC = ({ users }: Props) => { @@ -15,22 +22,21 @@ const Sidebar: React.FC = ({ users }: Props) => { + {users.map((user) => ( - + ))} @@ -39,4 +45,4 @@ const Sidebar: React.FC = ({ users }: Props) => { ); }; -export default Sidebar; \ No newline at end of file +export default Sidebar;