0.0.7

- Switch redux -> Context
- Remove excess packages

web/src/Pages/About.js

@@ -12,7 +12,7 @@ const About = () => {
         Used to track your listening history and build a profile to discover new music.
       </p>
       <a
-        className="aboutBodyw"
+        className="aboutBody"
         href="https://gitlab.com/idanoo/go-scrobble"
         target="_blank"
         rel="noopener noreferrer"

web/src/Pages/Dashboard.js

@@ -1,56 +1,44 @@
-import React from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import '../App.css';
 import './Dashboard.css';
-
+import { useHistory } from "react-router";
 import { getRecentScrobbles } from '../Api/index';
 import ScaleLoader from 'react-spinners/ScaleLoader';
 import ScrobbleTable from "../Components/ScrobbleTable";
+import AuthContext from '../Contexts/AuthContext';
 
-class Dashboard extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isLoading: true,
-      scrobbleData: [],
-      uuid: null,
-    };
+const Dashboard = () => {
+  const history = useHistory();
+  let { user } = useContext(AuthContext);
+  let [isLoading, setIsLoading] = useState(true);
+  let [dashboardData, setDashboardData] = useState({});
+
+  if (!user) {
+    history.push("/login");
   }
 
-  componentDidMount() {
-    const { history, uuid } = this.props;
-    const isLoggedIn = this.props.isLoggedIn;
-
-    if (!isLoggedIn) {
-      history.push("/login")
+  useEffect(() => {
+    if (!user) {
+      return
     }
+    getRecentScrobbles(user.uuid)
+      .then(data => {
+        setDashboardData(data);
+        setIsLoading(false);
+      })
+  }, [user])
 
-    getRecentScrobbles(uuid)
-    .then((data) => {
-      this.setState({
-        isLoading: false,
-        data: data
-      });
-    })
-    .catch(() => {
-      this.setState({
-        isLoading: false
-      });
-    });
-  }
-
-  render() {
-    return (
-      <div className="pageWrapper">
-        <h1>
-          Dashboard!
-        </h1>
-        {this.state.isLoading
-          ? <ScaleLoader color="#FFF" size={60} />
-          : <ScrobbleTable data={this.state.data} />
-        }
-      </div>
-    );
-  }
+  return (
+    <div className="pageWrapper">
+      <h1>
+        Dashboard!
+      </h1>
+      {isLoading
+        ? <ScaleLoader color="#FFF" size={60} />
+        : <ScrobbleTable data={dashboardData} />
+      }
+    </div>
+  );
 }
 
 export default Dashboard;

web/src/Pages/Home.js

@@ -4,16 +4,14 @@ import './Home.css';
 import HomeBanner from '../Components/HomeBanner';
 import React from 'react';
 
-class Home extends React.Component {
-  render() {
-    return (
+const Home = () => {
+  return (
     <div className="pageWrapper">
       <img src={logo} className="App-logo" alt="logo" />
       <p className="homeText">Go-Scrobble is an open source music scrobbling service written in Go and React.</p>
       <HomeBanner />
     </div>
     );
-  }
 }
 
 export default Home;

web/src/Pages/Login.js

@@ -5,10 +5,16 @@ import { Button } from 'reactstrap';
 import { Formik, Form, Field } from 'formik';
 import ScaleLoader from 'react-spinners/ScaleLoader';
 import AuthContext from '../Contexts/AuthContext';
+import { useHistory } from "react-router";
 
 const Login = () => {
+  const history = useHistory();
   let boolTrue = true;
-  let { Login, loading } = useContext(AuthContext);
+  let { Login, loading, user } = useContext(AuthContext);
+
+  if (user) {
+    history.push("/dashboard");
+  }
 
   return (
     <div className="pageWrapper">

web/src/Pages/Profile.js

@@ -1,25 +1,25 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import '../App.css';
 import './Dashboard.css';
+import { useHistory } from "react-router";
+import AuthContext from '../Contexts/AuthContext';
 
-class Profile extends React.Component {
-  componentDidMount() {
-    const { history, isLoggedIn } = this.props;
-    
-    if (!isLoggedIn) {
-      history.push("/login")
-    }
+const Profile = () => {
+  const history = useHistory();
+  const { user } = useContext(AuthContext);
+
+  if (!user) {
+    history.push("/login");
   }
 
-  render() {
-    return (
-      <div className="pageWrapper">
-        <h1>
-          Hai User
-        </h1>
-      </div>
-    );
-  }
+  return (
+    <div className="pageWrapper">
+      <h1>
+        Welcome {user.username}!
+      </h1>
+    </div>
+  );
+
 }
 
 export default Profile;

web/src/Pages/Register.js

@@ -1,117 +1,90 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import '../App.css';
 import './Register.css';
 import { Button } from 'reactstrap';
 import ScaleLoader from "react-spinners/ScaleLoader";
-import register from '../Contexts/AuthContextProvider';
+import AuthContext from '../Contexts/AuthContext';
 import { Formik, Field, Form } from 'formik';
+import { useHistory } from "react-router";
 
-class Register extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {username: '', email: '', password: '', passwordconfirm: '', loading: false};
+const Register = () => {
+  const history = useHistory();
+  let boolTrue = true;
+  let { Register, user, loading } = useContext(AuthContext);
+
+  if (user) {
+    history.push("/dashboard");
   }
 
-  componentDidMount() {
-    const { history, isLoggedIn } = this.props;
-
-    if (isLoggedIn) {
-      history.push("/dashboard")
-    }
-  }
-
-  handleRegister(values) {
-    console.log(values)
-    this.setState({loading: true});
-
-    const { dispatch, history } = this.props;
-
-    dispatch(register(values.username, values.email, values.password))
-      .then(() => {
-        this.setState({
-          loading: false,
-        });
-        history.push("/login");
-      })
-      .catch(() => {
-        this.setState({
-          loading: false
-        });
-      });
-  }
-
-  render() {
-    let trueBool = true;
-    return (
-      <div className="pageWrapper">
-        {
-          // TODO: Move to DB:config REGISTRATION_DISABLED=1|0
-          process.env.REACT_APP_REGISTRATION_DISABLED === "true" ?
-          <p>Registration is temporarily disabled. Please try again soon!</p>
-          :
-          <div>
-            <h1>
-            Register
-            </h1>
-            <div className="registerBody">
-              <Formik
-                initialValues={{ username: '', email: '', password: '', passwordconfirm: '' }}
-                onSubmit={async values => this.handleRegister(values)}
-              >
-                <Form>
-                  <label>
-                    Username*<br/>
-                    <Field
-                      name="username"
-                      type="text"
-                      required={trueBool}
-                      className="registerFields"
-                    />
-                  </label>
-                  <br/>
-                  <label>
-                    Email<br/>
-                    <Field
-                      name="email"
-                      type="email"
-                      className="registerFields"
-                    />
-                  </label>
-                  <br/>
-                  <label>
-                    Password*<br/>
-                    <Field
-                      name="password"
-                      type="password"
-                      required={trueBool}
-                      className="registerFields"
-                    />
-                  </label>
-                  <br/>
-                  <label>
-                    Confirm Password*<br/>
-                    <Field
-                      name="passwordconfirm"
-                      type="password"
-                      required={trueBool}
-                      className="registerFields"
-                    />
-                  </label>
-                  <br/><br/>
-                  <Button
-                    color="primary"
-                    type="submit"
-                    className="registerButton"
-                    disabled={this.state.loading}
-                    >{this.state.loading ? <ScaleLoader color="#FFF" size={35} /> : "Register"}</Button>
-                </Form>
-              </Formik>
-            </div>
+  return (
+    <div className="pageWrapper">
+      {
+        // TODO: Move to DB:config REGISTRATION_DISABLED=1|0 :upsidedownsmile:
+        process.env.REACT_APP_REGISTRATION_DISABLED === "true" ?
+        <p>Registration is temporarily disabled. Please try again soon!</p>
+        :
+        <div>
+          <h1>
+          Register
+          </h1>
+          <div className="registerBody">
+            <Formik
+              initialValues={{ username: '', email: '', password: '', passwordconfirm: '' }}
+              onSubmit={async values => Register(values)}
+            >
+              <Form>
+                <label>
+                  Username*<br/>
+                  <Field
+                    name="username"
+                    type="text"
+                    required={boolTrue}
+                    className="registerFields"
+                  />
+                </label>
+                <br/>
+                <label>
+                  Email<br/>
+                  <Field
+                    name="email"
+                    type="email"
+                    className="registerFields"
+                  />
+                </label>
+                <br/>
+                <label>
+                  Password*<br/>
+                  <Field
+                    name="password"
+                    type="password"
+                    required={boolTrue}
+                    className="registerFields"
+                  />
+                </label>
+                <br/>
+                <label>
+                  Confirm Password*<br/>
+                  <Field
+                    name="passwordconfirm"
+                    type="password"
+                    required={boolTrue}
+                    className="registerFields"
+                  />
+                </label>
+                <br/><br/>
+                <Button
+                  color="primary"
+                  type="submit"
+                  className="registerButton"
+                  disabled={loading}
+                  >{loading ? <ScaleLoader color="#FFF" size={35} /> : "Register"}</Button>
+              </Form>
+            </Formik>
           </div>
-        }
-      </div>
-    );
-  }
+        </div>
+      }
+    </div>
+  );
 }
 
 export default Register;

web/src/Pages/Settings.js

@@ -2,26 +2,19 @@ import React from 'react';
 import '../App.css';
 import './Settings.css';
 
-class Settings extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {username: '', password: '', loading: false};
-  }
-
-  render() {
-    return (
-      <div className="pageWrapper">
-        <h1>
-          Settings
-        </h1>
-        <div className="loginBody">
-        <p>
-          All the settings
-        </p>
-        </div>
+const Settings = () => {
+  return (
+    <div className="pageWrapper">
+      <h1>
+        Settings
+      </h1>
+      <div className="loginBody">
+      <p>
+        All the settings
+      </p>
       </div>
-    );
-  }
+    </div>
+  );
 }
 
 export default Settings;