Home.jsx

import React, { useContext } from "react";

//styles
import * as S from "./styles";
import * as A from "styles/shared-components";

//components
import Header from "components/Header";
import { AuthContext } from "components/Auth";
import SpinnerComponent from "components/Spinner";

import { getAllUnlockedModules, getAllUserModules } from "utils/get-courses";

function DoMe({ user }) {
  const coursesForUser = getAllUserModules(user);
  const unlockedModules = getAllUnlockedModules(user);
  const noCourses = coursesForUser.length === 0;

  if (noCourses) {
    return <div>No courses available, please try again in a second.</div>;
  } else {
    return (
      <S.List>
        {coursesForUser.map(course => {
          let disabled = !unlockedModules.includes(course.title);
          return (
            <S.Item
              key={course}
              disabled={disabled}
              to={disabled ? "" : `/lab/${course}.slug`}
            >
              {course.title}
            </S.Item>
          );
        })}
      </S.List>
    );
  }
}

function UserContent({ user }) {
  if (!(user && user.createdAt)) {
    return <SpinnerComponent />;
  } else if (!user.enabled) {
    return (
      <div>Your account is not enabled yet, please take a break 🍵️😎️</div>
    );
  } else {
    return <DoMe user={user} />;
  }
}

function Home() {
  const { user } = useContext(AuthContext);

  return (
    <S.Home>
      <Header />
      <S.Content>
        <UserContent user={user} />
      </S.Content>
    </S.Home>
  );
}

export default Home;