feat: display courses when not signed in

chaynHQ · Apr 2, 2024 · 1d79e79 · 1d79e79
1 parent ae1a1d7
commit 1d79e79
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 9 deletions.
diff --git a/components/cards/CourseCard.tsx b/components/cards/CourseCard.tsx
@@ -72,10 +72,11 @@ interface CourseCardProps {
  course: ISbStoryData;
  courseProgress: PROGRESS_STATUS | null;
  liveCourseAccess: boolean;
+ clickable?: boolean;
 }
 
 const CourseCard = (props: CourseCardProps) => {
- const { course, courseProgress, liveCourseAccess } = props;
+ const { course, courseProgress, liveCourseAccess, clickable = true } = props;
  const [expanded, setExpanded] = useState<boolean>(false);
  const t = useTranslations('Courses');
  const router = useRouter();
@@ -91,12 +92,33 @@ const CourseCard = (props: CourseCardProps) => {
 
  return (
  <Card sx={cardStyle}>
- <CardActionArea
- sx={cardActionStyle}
- component={Link}
- href={`/${course.full_slug}`}
- aria-label={`${t('navigateToCourse')} ${course.content.name}`}
- >
+ {clickable ? (
+ <CardActionArea
+ sx={cardActionStyle}
+ component={Link}
+ href={`/${course.full_slug}`}
+ aria-label={`${t('navigateToCourse')} ${course.content.name}`}
+ >
+ <CardContent sx={cardContentStyle}>
+ <Box sx={imageContainerStyle}>
+ <Image
+ alt={course.content.image.alt}
+ src={course.content.image.filename}
+ layout="fill"
+ objectFit="contain"
+ />
+ </Box>
+ <Box flex={1}>
+ <Typography component="h3" variant="h3">
+ {course.content.name}
+ </Typography>
+ {!!courseProgress && courseProgress !== PROGRESS_STATUS.NOT_STARTED && (
+ <ProgressStatus status={courseProgress} />
+ )}
+ </Box>
+ </CardContent>
+ </CardActionArea>
+ ) : (
  <CardContent sx={cardContentStyle}>
  <Box sx={imageContainerStyle}>
  <Image
@@ -115,7 +137,7 @@ const CourseCard = (props: CourseCardProps) => {
  )}
  </Box>
  </CardContent>
- </CardActionArea>
+ )}
  <CardActions sx={cardActionsStyle}>
  {courseComingSoon && (!courseLiveSoon || !liveCourseAccess) && (
  <Box sx={statusRowStyle}>

diff --git a/pages/courses/index.tsx b/pages/courses/index.tsx
@@ -61,13 +61,15 @@ const CourseList: NextPage<Props> = ({ stories }) => {
  }, []);
 
  useEffect(() => {
+ const referralPartner = window.localStorage.getItem('referralPartner');
+
  if (partnerAdmin && partnerAdmin.partner) {
  const partnerName = partnerAdmin.partner.name;
  const coursesWithAccess = stories.filter((course) =>
  course.content.included_for_partners.includes(partnerName),
  );
  setLoadedCourses(coursesWithAccess);
- } else if (partnerAccesses.length > 0) {
+ } else if (partnerAccesses && partnerAccesses.length > 0) {
  let userPartners: Array<string> = [];
 
  partnerAccesses.map((partnerAccess) => {
@@ -80,6 +82,13 @@ const CourseList: NextPage<Props> = ({ stories }) => {
  userPartners.some((partner) => story.content.included_for_partners.includes(partner)),
  );
  setLoadedCourses(coursesWithAccess);
+ } else if (referralPartner) {
+ const coursesWithAccess = stories.filter((story) =>
+ story.content.included_for_partners.includes(
+ referralPartner.charAt(0).toUpperCase() + referralPartner.slice(1),
+ ),
+ );
+ setLoadedCourses(coursesWithAccess);
  } else {
  const coursesWithAccess = stories.filter((story) =>
  story.content.included_for_partners.includes('Public'),
@@ -114,6 +123,45 @@ const CourseList: NextPage<Props> = ({ stories }) => {
  imageSrc={headerProps.imageSrc}
  imageAlt={headerProps.imageAlt}
  />
+ <Container sx={containerStyle}>
+ {loadedCourses === null ? (
+ <LoadingContainer />
+ ) : loadedCourses.length === 0 ? (
+ // Leaving blank instead of saying no courses are available
+ <Box></Box>
+ ) : (
+ <Box sx={rowStyle}>
+ <Box sx={cardColumnStyle}>
+ {loadedCourses?.map((course, index) => {
+ if (index % 2 === 1) return;
+ return (
+ <CourseCard
+ key={course.id}
+ clickable={false}
+ course={course}
+ courseProgress={null}
+ liveCourseAccess={false}
+ />
+ );
+ })}
+ </Box>
+ <Box sx={cardColumnStyle}>
+ {loadedCourses?.map((course, index) => {
+ if (index % 2 === 0) return;
+ return (
+ <CourseCard
+ key={course.id}
+ clickable={false}
+ course={course}
+ courseProgress={null}
+ liveCourseAccess={false}
+ />
+ );
+ })}
+ </Box>
+ </Box>
+ )}
+ </Container>
  <SignUpBanner />
  </Box>
  );