Removed package-lock.json.

sports-matcher/package.json

@@ -3,6 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.8.1",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.4.4",
+    "@mui/material": "^5.4.4",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",

sports-matcher/src/App.js

@@ -1,23 +1,15 @@
-import logo from './logo.svg';
 import './App.css';
+import Filter from './Filter';
+import MatchesList from './MatchesList';
+import ReportForm from "./ReportForm";
+import SearchBar from './SearchBar';
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <main>
+        <SearchBar />
+      </main>
     </div>
   );
 }

sports-matcher/src/CardSuggestedMatches.js

@@ -0,0 +1,20 @@
+import { Stack, Typography } from "@mui/material";
+import MatchInfo from "./matchinfo";
+
+export default function CardSuggestedMatches() {
+    return (
+        <div style={{ padding: 25 }}>
+            <Typography variant="h4" component="div">
+                Suggested
+            </Typography>
+            <Stack sx={{ margin: 2 }} direction="row" spacing={2}>
+                <MatchInfo>
+                </MatchInfo>
+                <MatchInfo>
+                </MatchInfo>
+                <MatchInfo>
+                </MatchInfo>
+            </Stack >
+        </div>
+    );
+}

sports-matcher/src/Chat.js

@@ -1,18 +0,0 @@
-/* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */
-
-import React from 'react';
-import './chats.css'
-
-class Chat extends React.Component {
-    render() {
-        return (
-            <div class="chatbubble-container">                    
-                        <div class= {this.props.side === "left" ? "chatbubble left": "chatbubble right"}>
-                            {this.props.message}
-                        </div>
-            </div>
-        )
-    }
-}
-
-export default Chat;

sports-matcher/src/ChatWindow.js

@@ -1,113 +0,0 @@
-/* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */
-
-import React from 'react';
-import './chats.css'
-import Chat from './Chat'
-import Contact from './Contact'
-import { useState } from "react";
-
-class ChatWindow extends React.Component {
-    render() {
-        return (
-            <div class="chatcomponent">
-                <UserList />
-                <MessageList />
-                <ChatInput />
-            </div>
-        )
-    }
-}
-
-class UserList extends React.Component {
-    
-    render() {
-        return (
-            <div class="contactlist">
-                    <Contact pfpsrc="./chief.jpg" name="Master Chief"/>
-                    <Contact pfpsrc="./freeman.jpg" name="Gordon Freeman" />
-                    <Contact pfpsrc="./shogun.jpg" name="Raiden Shogun" selected="true" />
-            </div>
-        )
-    }
-}
-
-class MessageList extends React.Component {
-    render() {
-        return (
-            <div class="messagelist">
-                <Chat message="Got time for tennis this week, Raiden?" side="right"/>
-                <Chat message="Foolish question. If I do not even have free time, How am I to pursue eternity and fulfill my promise to the people of Inazuma?" side="left" />
-                <Chat message="Aiight, see you at 4" side="right" />
-                <Chat message="As you wish." side="left" />
-                </div>
-        )
-    }
-}
-// class ChatWindow extends React.Component {
-//     render() {
-//         return (
-//             <div>
-//                 <ChatUserList />
-//                 {/* <MessageList /> */}
-//             </div>
-//         )
-//     }
-// }
-const ChatInput = () => {
-    const [message, setMessage] = useState( '' );
-    
-    // const onKeyPress = (e) => {
-    //     // if(e.key === 'Enter'){
-    //     //     e.preventDefault(); // Ensure it is only this code that runs
-    //     //     setMessage("")
-    //     // }
-    // }
-
-    const onKeyDown = (e) => {
-        const keyCode = e.which || e.keyCode;
-
-        // 13 represents the Enter key
-        if (keyCode === 13 && !e.shiftKey) {
-            e.preventDefault();
-            setMessage("")
-        }
-    }
-
-    return (
-        // onKeyPress={(e) => onKeyPress(e)}
-      <div>
-        <textarea
-           class="chatinput"
-           value={message}
-           placeholder="Press ENTER to send, SHIFT + ENTER for new line"
-           onChange={e => setMessage(e.target.value)}
-           
-           onKeyDown={onKeyDown}
-         />
-      </div>
-    );
-  };
-class ChatInput2 extends React.Component {
-    
-    constructor(props) {
-        super(props)
-        this.setState({inputVal : ""})
-    }
-
-    handleUserInput(e) {
-        this.setState(this.setState({inputVal : e.target.value}));
-    };
-
-    render() {
-        return (<textarea class="chatinput" placeholder="Press ENTER to send, Ctrl + ENTER for new line"
-                onKeyPress={(e)=>this.onKeyPress(e)} value="" onChange={(e) => this.handleUserInput(e)} />)
-        
-    }
-    onKeyPress(e) {
-        if(e.key === 'Enter'){
-            e.preventDefault(); // Ensure it is only this code that runs
-            this.setState({inputVal : ""});
-        }
-    }
-}
-export default ChatWindow;

sports-matcher/src/Contact.js

@@ -1,38 +0,0 @@
-/* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */
-
-import React from 'react';
-import './chats.css';
-
-class Contact extends React.Component {
-    constructor(props) {
-        super(props)
-        this.state = {
-            selected : this.props.selected
-        }
-    }
-    onClick() {
-        // This toggling of the contact selection is for demo purposes only
-        // Once backend is implemented, only one contact can be selected
-        if (this.state.selected === "false") {
-            this.setState({selected : "true"})
-        } else {
-            this.setState({selected : "false"})
-        }
-        
-    }
-    render() {
-        return (
-            <div class={this.state.selected === "true" ? "contact dark" : "contact"}>
-                        <div class="profilepiccontainer">
-                            <img src={this.props.pfpsrc} class="profilepic" onClick={() => this.onClick()} 
-                                alt="profile" />
-                        </div>
-                        <div class="profilenamecontainer">
-                            <div class="profilename" onClick={() => this.onClick()}>{this.props.name}</div>
-                        </div>
-            </div>
-        )
-    }
-}
-
-export default Contact;

sports-matcher/src/Filter.js

@@ -0,0 +1,65 @@
+import { InputLabel, MenuItem, Select, TextField, FormControl } from "@mui/material";
+
+export default function Filter() {
+    return (
+        <div>
+            <FormControl sx={{ margin: 2 }}>
+                <InputLabel id="skill-level-label">Sport</InputLabel>
+                <Select
+                    labelId="skill-level-label"
+                    id="skill-level"
+                    label="Skill level"
+                    sx={{ width: 100 }}
+                >
+                    <MenuItem value={-10}>Tennis</MenuItem>
+                    <MenuItem value={10}>Soccer</MenuItem>
+                    <MenuItem value={20}>Golf</MenuItem>
+                    <MenuItem value={30}>Basketball</MenuItem>
+                </Select>
+            </FormControl>
+            <FormControl sx={{ margin: 2 }}>
+                <InputLabel id="skill-level-label">Level</InputLabel>
+                <Select
+                    labelId="skill-level-label"
+                    id="skill-level"
+                    label="Skill level"
+                    sx={{ width: 100 }}
+                >
+                    <MenuItem value={-10}>Everyone</MenuItem>
+                    <MenuItem value={10}>Beginner</MenuItem>
+                    <MenuItem value={20}>Intermediate</MenuItem>
+                    <MenuItem value={30}>Professional</MenuItem>
+                </Select>
+            </FormControl>
+            <FormControl sx={{ margin: 2 }}>
+                <InputLabel id="skill-level-label">Level</InputLabel>
+                <Select
+                    labelId="skill-level-label"
+                    id="skill-level"
+                    label="Skill level"
+                    sx={{ width: 100 }}
+                >
+                    <MenuItem value={-10}>Everyone</MenuItem>
+                    <MenuItem value={10}>Beginner</MenuItem>
+                    <MenuItem value={20}>Intermediate</MenuItem>
+                    <MenuItem value={30}>Professional</MenuItem>
+                </Select>
+            </FormControl>
+            <FormControl sx={{ margin: 2 }}>
+                <TextField id="outlined-basic" label="Date" variant="outlined" />
+            </FormControl>
+
+            <FormControl sx={{ margin: 2 }}>
+                <TextField id="outlined-basic" label="Time" variant="outlined" />
+            </FormControl>
+
+            <FormControl sx={{ margin: 2 }}>
+                <TextField id="outlined-basic" label="Location" variant="outlined" />
+            </FormControl>
+
+            <FormControl sx={{ margin: 2 }}>
+                <TextField id="outlined-basic" label="Radius" variant="outlined" />
+            </FormControl>
+        </div>
+    );
+}

sports-matcher/src/ListSuggestedMatch.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import Typography from '@mui/material/Typography';
+import SportsTennisIcon from '@mui/icons-material/SportsTennis';
+import { ListItemIcon } from '@mui/material';
+
+export default function ListSuggestedMatch() {
+    return (<ListItem alignItems="flex-start">
+        <ListItemIcon>
+            <SportsTennisIcon />
+        </ListItemIcon>
+        <ListItemText
+            primary="Tennis - King of The Court"
+            secondary={
+                <React.Fragment>
+                    <Typography
+                        sx={{ display: 'inline' }}
+                        component="span"
+                        variant="body2"
+                        color="text.primary"
+                    >
+                        12:30PM - 123 Alphabet St. Toronto ON.
+                    </Typography>
+                    {" — John Smith, Alfred Baker, and Samantha Wright"}
+                </React.Fragment>
+            }
+        />
+    </ListItem>);
+}

sports-matcher/src/MatchesList.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import List from '@mui/material/List';
+import Divider from '@mui/material/Divider';
+import ListSuggestedMatch from './ListSuggestedMatch';
+
+export default function MatchesList() {
+    return (
+        <List sx={{ width: '100%' }}>
+            <ListSuggestedMatch></ListSuggestedMatch>
+            <Divider variant="inset" component="li" />
+            {/* TODO: Loop to populate */}
+        </List>
+    );
+}

sports-matcher/src/ReportForm.js

@@ -0,0 +1,21 @@
+import FormControl from "@mui/material/FormControl";
+import OutlinedInput from "@mui/material/OutlinedInput";
+import TextField from "@mui/material/TextField";
+
+export default function ReportForm() {
+    return (
+        <FormControl sx={{ width: '80%' }}>
+            <OutlinedInput
+                sx={{ margin: 1 }}
+                placeholder="Please enter user email." />
+            <TextField
+                id="outlined-multiline-static"
+                label="Multiline"
+                multiline
+                rows={5}
+                sx={{ margin: 1 }}
+                defaultValue="Reason for suspension..."
+            />
+        </FormControl>
+    );
+}

sports-matcher/src/SearchBar.js

@@ -0,0 +1,11 @@
+import { Button, TextField } from "@mui/material";
+
+export default function SearchBar() {
+    return (
+        <div>
+            <TextField sx={{ margin: 1 }} id="standard-basic" label="Search" variant="outlined" />
+            <Button sx={{ margin: 1 }} variant="outlined">Search</Button>
+            <Button sx={{ margin: 1 }} variant="outlined">Filter</Button>
+        </div>
+    );
+}

sports-matcher/src/chats.css

@@ -1,108 +0,0 @@
-/* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */
-
-.chatcomponent > * {
-    display: inline-block;
-}
-.contact {
-    border-style: solid;
-    border-width: 1px;
-    border-bottom: 1px;
-    border-color:rgb(75, 75, 75);
-
-    background-color: rgb(80, 80, 80);
-    height: 70px;
-
-    user-select: none;
-}
-.contact.dark {
-    background-color: black;
-}
-.contactlist {
-    height: 500px;
-    width: 200px;
-    top: 0;
-    left: 0;
-    box-sizing: border-box;
-    border-radius: 2%;
-    background: rgb(48, 45, 45);
-    overflow-y: scroll;
-    overflow-x: hidden;
-
-    text-align: center;
-}
-.messagelist {
-    height: 400px;
-    width: 800px;
-    top: 0px;
-    left: 200px;
-
-    position: absolute;
-    background-color: rgb(80, 80, 80);
-    overflow-x: hidden;
-    overflow-y: scroll;
-}
-.messagelist > * {
-    display: block;
-}
-.profilepiccontainer {
-    height: 60px;
-    width: 60px;
-    margin-top: 10px;
-    margin-left: 10px;
-    margin-right: 10px;
-    float: left;
-}
-.profilepic {
-    border-radius: 50%;
-    height: 50px;
-    width: 50px;
-}
-.profilenamecontainer {
-    text-align: center;
-    padding: 7%;
-}
-.profilename {
-    color: white;
-}
-.chatbubble {
-	margin-top: 20px;
-    margin-left: 20px;
-    display: inline-block;
-    position: relative;
-	width: auto;
-	height: auto;
-    padding: 10px;
-	
-    border-radius: 10px;
-}
-.left {
-    background-color: rgba(0, 57, 163, 0.637);
-    margin-right: 35px;
-    color: white;
-    float: auto;
-}
-.right {
-    background-color: khaki;
-    color: black;
-    margin-right: 35px;
-    float: right;
-}
-.chatbubble-container {
-    width: 800px;
-    height: auto;
-    float: left;
-}
-.chatinput {
-    background-color: rgb(75, 75, 75);
-    top: 400px;
-    left: 200px;
-    position: absolute;
-
-    height: 92px;
-    width: 793px;
-
-    color: antiquewhite;
-
-    border-width: 2px;
-    border-color: rgb(48, 45, 45);
-}

sports-matcher/src/matchinfo.js

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import Card from '@mui/material/Card';
+import { List, ListItemAvatar } from '@mui/material';
+import { ListItem } from '@mui/material';
+import { ListItemText } from '@mui/material';
+import PeopleIcon from '@mui/icons-material/People';
+import SportsIcon from '@mui/icons-material/Sports';
+import MapIcon from '@mui/icons-material/Map';
+import EventIcon from '@mui/icons-material/Event';
+import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+
+export default function MatchInfo() {
+    return (
+        <Card sx={{ maxWidth: 400 }}>
+            <CardContent>
+                <Typography sx={{ fontSize: 24 }} component="div">
+                    King of the Court!
+                </Typography>
+                <List>
+                    <ListItem>
+                        <ListItemAvatar>
+                            <SportsIcon />
+                        </ListItemAvatar>
+                        <ListItemText primary="Sport" secondary="Tennis" />
+                    </ListItem>
+                    <ListItem>
+                        <ListItemAvatar>
+                            <PeopleIcon />
+                        </ListItemAvatar>
+                        <ListItemText primary="Participants" secondary="John Smith, Bob Williams, and Candice Baker" />
+                    </ListItem>
+                    <ListItem>
+                        <ListItemAvatar>
+                            <MapIcon />
+                        </ListItemAvatar>
+                        <ListItemText primary="Location" secondary="Athletic Center - 55 Harbord St, Toronto, ON M5S 2W6" />
+                    </ListItem>
+                    <ListItem>
+                        <ListItemAvatar>
+                            <EventIcon />
+                        </ListItemAvatar>
+                        <ListItemText primary="Time" secondary="1:00PM Tomorrow (January 13th)" />
+                    </ListItem>
+                </List>
+            </CardContent>
+            <CardActions>
+                <Button size="Medium">Participate</Button>
+            </CardActions>
+        </Card>
+    );
+}