Suggestion

The Content component is the router component essentially, but lacks the separation of routes for authenticated users vs unauthenticated users. I want to suggest we split the component into two: PublicRoutes and ProtectedRoutes.

./src/components/Content.js

/**
 * PublicRoutes - router for landing, login and register routes, redirect user to
 * landing page if any other route.
 */
export const PublicRoutes = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" component={LandingView} />
        <Route exact path="/login" component={LoginView}/>
        <Route exact path="/register" component={RegisterView}/>
        <Redirect to="/"/>
      </Switch>
    </BrowserRouter>
  )
}

/**
 * ProtectedRoutes - router for user's who are authenticated, redirect user's
 * if they try to access login and register pages to the Home page, and
 * redirects any other route not listed to the not found page.
 */
export const ProtectedRoutes = () => {
  return (
    <BrowserRouter>
      <Switch>
        {/* Redirect */}
        <Route exact path="/login" render={() => <Redirect to="/" />} />
        <Route exact path="/register" render={() => <Redirect to="/" />} />
        
        {/* Render */}
        <Route path="/" component={HomeView} />

        <Route exact path="/matches" component={MathesView} />
        <Route exact path="/pending" component={PendingView} />
        <Route exact path="/settings" component={SettingsView} />
        <Route exact path="/auth/logout" component={LogoutView} />

        <Route path="*" component={NotFoundView}/>
      </Switch>
    </BrowserRouter>
  )
}

./App.js
And below could be how the flow of the App component could be. Sorry I cbb coding it fully 🍔

const App = () => {
  if (AppUserStore.isAuthenticated) {
    return <ProtectedRoutes />;
  }
  return <PublicRoutes />;
};

Note: I appended View to page components to be more clear.

Reason

This will simplify routing when dealing with authenticated users vs unauthenticated users.

Alternative

Create a routes.js file at ./src with PublicRoutes and ProtectedRoutes components, and import them into ./src/components/Content.js.

const Content = ({ user }) => {
  if (user) {
    return (
      <main className="Content">
        <ProtectedRoutes />
      </main>
    );
  }
  return (
    <main className="Content">
      <PublicRoutes />
    </main>
  );
};

Facebook Auth requries a secure HTTPS origin which is impossible to test on our development environment.
Discord Auth has unknown issues

https://game-search-match.herokuapp.com/

When the user clicks on the "google login" button it should direct them to a google login form however it just refreshes the page and nothing happens.

Using incognito mode can bypass this problem however

Suggestion

• Rename ./src/components/Content.js to ./src/components/routes.js
• Move ./src/components/Content.js to ./src/routes.js

Reason

routes.js is an important component which having it at the same directory level as App.js will make things easier to reason with and makes more sense

What

When the user clicks on Google Login, the page returns to the Landing Page.

Why?

The server responds with "" rather than the user object (req.user), sometimes.

redux -> actions -> user

const response = await axios.get('/api/auth/current');
const user = response.data; // server response data for user is: ""

./routes/auth.js

// returns the current user object
router.get('/current', (req, res) => res.send(req.user));

Suggestion

Create a 404 page

Reason

Without handling a 404 page, the user experiences no feedback when routing to a page that doesn't exist. Most websites have a 404 page and it makes sense in routing logic. Lastly it's a quick component to make and won't waste much of our time.

Suggestion

Once the logo is finalised, it could be used as the website's favicon as well.

Warning: validateDOMNesting(...): <tr> cannot appear as a child of <table>. Add a <tbody> to your code to match the DOM tree generated by the browser.