final changes

Client/src/App.js

@@ -1,5 +1,5 @@
-import React from "react";
-import { BrowserRouter, Route, Switch } from "react-router-dom";
+import React, { useContext } from "react";
+import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";
 import "./stylesheet/styles.css";
 import "./stylesheet/sidebar.css";
 import "./stylesheet/playlist.css";
@@ -10,39 +10,80 @@ import "./stylesheet/profilepage.css";
 import "./stylesheet/search.css";
 import "./stylesheet/loginpage.css";
 import "./stylesheet/signuppage.css";
+import "./stylesheet/moderatorpage.css";
+import AddSong from "./components/AddSong";
+import ModeratorPage from "./components/ModeratorPage";
+import Home from "./components/home";
+import "./stylesheet/addsong.css";
 import Sidebar from "./components/Sidebar";
 import Navbar from "./components/Navbar";
 import PlaylistPage from "./components/PlaylistPage";
 import SongPage from "./components/SongPage";
 import ProfilePage from "./components/ProfilePage";
-import Search from "./components/search";
 import LoginPage from "./components/LoginPage";
 import SignupPage from "./components/SignupPage";
+import { UserProvider, UserContext } from "./userContext";
+import { SongProvider } from "./songContext";
+
+const renderPlaylistPage = ({ match }) => {
+  const id = match.params.id;
+  return <PlaylistPage id={id} />;
+};
+const renderSongPage = ({ match }) => {
+  const id = match.params.id;
+  return <SongPage id={id} />;
+};
+
+const RenderUser = () => {
+  const [user, setUser] = useContext(UserContext);
+  if (user)
+    return (
+      <>
+        <Route path="/" component={Sidebar} />
+        <div className="midSection">
+          <Switch>
+            <Route path="/" exact component={Home} />
+
+            <Route path="/playlist/:id" component={renderPlaylistPage} />
+            <Route path="/profile/:id" component={ProfilePage} />
+            <Route path="/song/:id" component={renderSongPage} />
+          </Switch>
+        </div>
+      </>
+    );
+
+  return <Redirect to="/login" />;
+};
+
+const RenderAuth = () => {
+  const [user, setUser] = useContext(UserContext);
+  if (!user)
+    return (
+      <>
+        <Route path="/signup" component={SignupPage} />
+        <Route path="/login" component={ModeratorPage} />
+        <Redirect to="/login" />
+      </>
+    );
+
+  return <Redirect to="/" />;
+};
 
-import { UserProvider } from "./userContext";
 
 const App = () => {
   return (
     <UserProvider>
-      <BrowserRouter>
-        <Route path="/" component={Navbar} />
-
-        <div className="section">
-          <Route path="/" component={Sidebar} />
-
-          <div className="midSection">
-            <Switch>
-              <Route path="/" exact component={Search} />
-              <Route path="/playlist/:id" component={PlaylistPage} />
-              <Route path="/profile/:id" component={ProfilePage} />
-              <Route path="/song/:id" component={SongPage} />
-              <Route path="/login/:id" component={LoginPage} />
-              <Route path="/signup/:id" component={SignupPage} />
-            </Switch>
+
+      <SongProvider>
+        <BrowserRouter>
+          <Route path="/" component={Navbar} />
+          <div className="section">
+            <RenderAuth />
+            <RenderUser />
           </div>
+        </BrowserRouter>
+      </SongProvider>
 
-        </div>
-      </BrowserRouter>
     </UserProvider>
   );
 };

Client/src/components/AddSong.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import Upload from "./Upload";
+import '../stylesheet/upload.css';
+
+const AddSong = () => {
+
+    return(
+        <div className = 'songbox'>
+            <h1 className = 'addst'>New Song</h1>
+            <div className = 'coverblock'>
+            <h3 className = 'songcov'>Song Cover</h3>
+            <div><Upload /></div>
+            </div>
+            <div className = 'inct'>
+            <input className = 'addsi' type = 'text' name = 'songname' required/>
+            <label for = 'songname' className = 'addslab'>
+            <span className = 'addsl'>Song</span>
+            </label>
+            </div>
+            <div className = 'inct'>
+            <input className = 'addsi' type = 'text' name = 'genre' required/>
+            <label for = 'genre' className = 'addslab'>
+            <span className = 'addsl'>Genre</span>
+            </label>
+            </div>
+            <div className = 'inct'>
+            <input className = 'addsi' type = 'text' name = 'mood' required/>
+            <label for = 'mood' className = 'addslab'>
+            <span className = 'addsl'>Mood</span>
+            </label>
+            </div>
+            <div className = 'inct'>
+            <input className = 'addsi' type = 'number' step = '.01' min = '0' name = 'duration' required/>        
+            <label for = 'duration' className = 'addslab'>
+            <span className = 'addsl'>Playtime</span>
+            </label>
+            </div>
+            <div className = 'inct2'>
+            <textarea className = 'addsi' name = 'lyrics' required/>
+            <label for = 'lyrics' className = 'addslab'>
+            <span className = 'addsl'>Lyrics</span>
+            </label>
+            </div>
+            <button className = 'clickme4'>Submit</button>
+        </div>
+    );
+}
+
+export default AddSong;

Client/src/components/ListItems.js

@@ -1,10 +1,10 @@
 import React from 'react';
 
-const ListItems = ({ artist, name, id, duration, mood, genre }) => {
+const ListItems = ({ artist, songname, duration, mood, genre }) => {
 	return(
 		<div className ='listitems'>
 		<div className = 'entrylist'>
-		<h2 className = 'listentry le'>{name}</h2>
+		<h2 className = 'listentry le'>{songname}</h2>
 		<h2 className = 'listentry le2'>{artist}</h2>
 		<h2 className = 'listentry le3'>{mood}</h2>
 		<h2 className = 'listentry le4'>{genre}</h2>

Client/src/components/LoginPage.js

@@ -1,21 +1,60 @@
-import React from 'react';
+import React from "react";
+import { Link } from "react-router-dom";
 
-const LoginPage = () =>{
-    return(
-        <div className = 'loginbox'>
-                <h1 className = 'formtop'>Login</h1>
-                <div>
-                <h2 className = 'formfield'>Username</h2>
-                <input className = 'forminput' type = 'text' placeholder = 'Username' name = 'username'/>
-                </div>
-                <div>
-                <h2 className = 'formfield'>Password</h2>
-                <input className = 'forminput' type = 'password' name = 'pass' placeholder = '********'/>
-                </div>
-                <button className = 'clickme3 bt2'>New User</button>
-                <button className = 'clickme3 bt3'>Login</button>
-        </div>
-    );
-}
+const initialFormData = Object.freeze({
+  fullname: "",
+  password: ""
+});
 
-export default LoginPage;
+const LoginPage = () => {
+  const [formData, setFormData] = React.useState(initialFormData);
+
+  const handleInputChange = e => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value
+    });
+    // console.log(e.target.value);
+  };
+
+  const handleSubmit = e => {
+    e.preventDefault();
+    console.log(formData);
+    // ... submit to API or something
+  };
+
+  return (
+    <div className="loginbox">
+      <h1>Login</h1>
+      <label for="username">Username</label>
+      <input
+        className="forminput"
+        type="text"
+        placeholder="Username"
+        name="fullname"
+        value={formData.username}
+        onChange={handleInputChange}
+      />
+
+      <label for="password">Password</label>
+      <input
+        className="forminput"
+        type="password"
+        name="password"
+        placeholder="Password..."
+        value={formData.password}
+        onChange={handleInputChange}
+      />
+      <div className="buttons">
+        <button className="bt" onClick={handleSubmit}>
+          Login
+        </button>
+        <Link to="/signup">
+          <button className="bt">New User</button>
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default LoginPage;

Client/src/components/ModList.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const ModList = ({ artist, songname, duration, mood, genre }) => {
+	return(
+		<div className = 'modlistent'>
+                <h3 className = 'modetext pd1'>{songname}</h3>
+                <h3 className = 'modetext pd2'>{artist}</h3>
+                <h3 className = 'modetext pd3'>{genre}</h3>
+                <h3 className = 'modetext pd4'>{mood}</h3>
+                <h3 className = 'modetext pd5'>{duration}</h3>
+                <button className = 'clickme5 but1'>Approve</button>
+                <button className = 'clickme5 but2'>Decline</button>
+            </div>
+		);
+
+} 
+
+export default ModList;

Client/src/components/ModeratorPage.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import ModList from './ModList';
+
+const ModeratorPage = () =>{
+    return(
+        <div className = 'modpagecont'>
+        <div className = 'moderator'>
+            <div className = 'modheader'>
+                <h1 className = 'modheadtext'>Moderator Console</h1>
+            </div>
+            <div className = 'modlisttop'>
+                <h3 className = 'modhtext pd1'>Song Title</h3>
+                <h3 className = 'modhtext pd2'>Artist</h3>
+                <h3 className = 'modhtext pd3'>Genre</h3>
+                <h3 className = 'modhtext pd4'>Mood</h3>
+                <h3 className = 'modhtext pd5'>Playtime</h3>
+                <h3 className = 'modhtext pd6'>Approve</h3>
+            </div>
+            <div className = 'modlist'>
+            <ModList
+            songname = 'Way Down We Go'
+            artist = 'Kaleo'
+            genre = 'Indie'
+            mood = 'Sad'
+            duration = '2.45'
+            />
+            <ModList
+            songname = 'Way Down We Go'
+            artist = 'Kaleo'
+            genre = 'Indie'
+            mood = 'Sad'
+            duration = '2.45'
+            />
+            <ModList
+            songname = 'Way Down We Go'
+            artist = 'Kaleo'
+            genre = 'Indie'
+            mood = 'Sad'
+            duration = '2.45'
+            />
+            </div>
+        </div>
+        </div>
+    );
+}
+ export default ModeratorPage;