Skip to content

Commit

Permalink
feat: remove live courses support (#1271)
Browse files Browse the repository at this point in the history 
Co-authored-by: Kylee Fields <[email protected]>
  • Loading branch information
@strawHat121 @kyleecodes
strawHat121 and kyleecodes authored Jan 19, 2025
1 parent 21a5f1d commit a975e2f
Show file tree
Hide file tree
Showing 12 changed files with 74 additions and 281 deletions.
10 changes: 0 additions & 10 deletions components/cards/CourseCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
import PendingOutlined from '@mui/icons-material/PendingOutlined';
import {
Box,
Card,
Expand Down Expand Up @@ -78,8 +77,6 @@ const CourseCard = (props: CourseCardProps) => {
const [expanded, setExpanded] = useState<boolean>(false);
const t = useTranslations('Courses');

const courseComingSoon: boolean = course.content.coming_soon;

const handleExpandClick = () => {
setExpanded(!expanded);
};
Expand Down Expand Up @@ -136,13 +133,6 @@ const CourseCard = (props: CourseCardProps) => {
</CardContent>
)}
<CardActions sx={cardActionsStyle}>
{courseComingSoon && (
<Box sx={statusRowStyle}>
<PendingOutlined color="error" />
<Typography>{t('comingSoon')}</Typography>
</Box>
)}

{!!courseProgress && courseProgress !== PROGRESS_STATUS.NOT_STARTED && (
<ProgressStatus status={courseProgress} />
)}
Expand Down
36 changes: 2 additions & 34 deletions components/course/CourseIntroduction.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,14 @@ import { Box, Link as MuiLink, Typography } from '@mui/material';
import { ISbRichtext } from '@storyblok/react';
import { useTranslations } from 'next-intl';
import { useEffect, useState } from 'react';
import { render } from 'storyblok-rich-text-react-renderer';
import {
COURSE_INTRO_VIDEO_TRANSCRIPT_CLOSED,
COURSE_INTRO_VIDEO_TRANSCRIPT_OPENED,
} from '../../constants/events';
import { rowStyle } from '../../styles/common';
import { EventUserData, logEvent } from '../../utils/logEvent';
import { RichTextOptions } from '../../utils/richText';
import Video from '../video/Video';
import VideoTranscriptModal from '../video/VideoTranscriptModal';
import CourseStatusHeader from './CourseStatusHeader';

const containerStyle = {
...rowStyle,
Expand All @@ -28,26 +25,11 @@ interface CourseIntroductionProps {
video: { url: string };
name: string;
video_transcript: ISbRichtext;
live_soon_content: ISbRichtext;
live_now_content: ISbRichtext;
courseLiveSoon?: boolean;
courseLiveNow?: boolean;
liveCourseAccess?: boolean;
eventData: EventUserData;
}

const CourseIntroduction = (props: CourseIntroductionProps) => {
const {
video,
name,
video_transcript,
live_soon_content,
live_now_content,
courseLiveSoon = false,
courseLiveNow = false,
liveCourseAccess = false,
eventData,
} = props;
const { video, name, video_transcript, eventData } = props;
const [openTranscriptModal, setOpenTranscriptModal] = useState<boolean | null>(null);

const t = useTranslations('Courses');
Expand Down Expand Up @@ -102,22 +84,8 @@ const CourseIntroduction = (props: CourseIntroductionProps) => {
setOpenTranscriptModal={setOpenTranscriptModal}
openTranscriptModal={openTranscriptModal}
/>
{/* Video position switches column depending on if live content shown */}
{liveCourseAccess && (courseLiveSoon || courseLiveNow) && <IntroductionVideo />}
</Box>
{liveCourseAccess && courseLiveSoon ? (
<Box flex={1}>
<CourseStatusHeader status="liveSoon" />
{render(live_soon_content, RichTextOptions)}
</Box>
) : liveCourseAccess && courseLiveNow ? (
<Box flex={1}>
<CourseStatusHeader status="liveNow" />
{render(live_now_content, RichTextOptions)}
</Box>
) : (
<IntroductionVideo />
)}
<IntroductionVideo />
</Box>
);
};
Expand Down
36 changes: 0 additions & 36 deletions components/course/CourseStatusHeader.tsx
View file

This file was deleted.

132 changes: 35 additions & 97 deletions components/storyblok/StoryblokCoursePage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,18 @@ import Cookies from 'js-cookie';
import { useTranslations } from 'next-intl';
import Head from 'next/head';
import { useEffect, useState } from 'react';
import { render } from 'storyblok-rich-text-react-renderer';
import SessionCard from '../../components/cards/SessionCard';
import { ContentUnavailable } from '../../components/common/ContentUnavailable';
import Link from '../../components/common/Link';
import CourseHeader from '../../components/course/CourseHeader';
import CourseIntroduction from '../../components/course/CourseIntroduction';
import CourseStatusHeader from '../../components/course/CourseStatusHeader';
import { PROGRESS_STATUS } from '../../constants/enums';
import { COURSE_OVERVIEW_VIEWED } from '../../constants/events';
import { useTypedSelector } from '../../hooks/store';
import { rowStyle } from '../../styles/common';
import { courseIsLiveNow, courseIsLiveSoon } from '../../utils/courseLiveStatus';
import { determineCourseProgress } from '../../utils/courseProgress';
import hasAccessToPage from '../../utils/hasAccessToPage';
import { getEventUserData, logEvent } from '../../utils/logEvent';
import { RichTextOptions } from '../../utils/richText';
import { SignUpBanner } from '../banner/SignUpBanner';

const containerStyle = {
Expand Down Expand Up @@ -49,12 +45,6 @@ export interface StoryblokCoursePageProps {
video_transcript: ISbRichtext;
weeks: { name: string; sessions: any }[]; // TODO: replace type with StoryblokSessionPageProps
included_for_partners: string[];
coming_soon: boolean;
coming_soon_content: ISbRichtext;
live_start_date: string;
live_end_date: string;
live_soon_content: ISbRichtext;
live_now_content: ISbRichtext;
languages: string[]; // TODO: implement this field - currently uses FF_DISABLED_COURSES env var
component: 'Course';
}
Expand All @@ -73,12 +63,6 @@ const StoryblokCoursePage = (props: StoryblokCoursePageProps) => {
video_transcript,
weeks,
included_for_partners,
coming_soon,
coming_soon_content,
live_start_date,
live_end_date,
live_soon_content,
live_now_content,
} = props;

const t = useTranslations('Courses');
Expand Down Expand Up @@ -119,29 +103,10 @@ const StoryblokCoursePage = (props: StoryblokCoursePageProps) => {

const eventUserData = getEventUserData(userCreatedAt, partnerAccesses, partnerAdmin);

const courseComingSoon: boolean = coming_soon;
const courseLiveSoon: boolean = courseIsLiveSoon({
live_start_date,
live_end_date,
coming_soon,
live_soon_content,
});
const courseLiveNow: boolean = courseIsLiveNow({
live_start_date,
live_end_date,
coming_soon,
live_now_content,
});
// only show live content to public users
const liveCourseAccess = partnerAccesses.length === 0 && !partnerAdmin.id;

const eventData = {
...eventUserData,
course_name: name,
course_storyblok_id: storyId,
course_coming_soon: courseComingSoon,
course_live_soon: courseLiveSoon,
course_live_now: courseLiveNow,
course_progress: courseProgress,
};

Expand Down Expand Up @@ -170,12 +135,6 @@ const StoryblokCoursePage = (props: StoryblokCoursePageProps) => {
video_transcript,
weeks,
included_for_partners,
coming_soon,
coming_soon_content,
live_start_date,
live_end_date,
live_soon_content,
live_now_content,
})}
>
<Head>
Expand All @@ -196,63 +155,42 @@ const StoryblokCoursePage = (props: StoryblokCoursePageProps) => {
courseProgress={courseProgress}
/>
<Container sx={containerStyle}>
{courseComingSoon ? (
<>
{liveCourseAccess && courseLiveSoon ? (
<Box maxWidth={700}>
<CourseStatusHeader status="liveSoon" />
{render(live_soon_content, RichTextOptions)}
</Box>
) : (
<Box maxWidth={700}>
<CourseStatusHeader status="comingSoon" />
{render(coming_soon_content, RichTextOptions)}
</Box>
)}
</>
) : (
<>
{video && (
<CourseIntroduction
video={video}
name={name}
video_transcript={video_transcript}
live_soon_content={live_soon_content}
live_now_content={live_now_content}
eventData={eventData}
courseLiveSoon={courseLiveSoon}
courseLiveNow={courseLiveNow}
liveCourseAccess={liveCourseAccess}
/>
)}
<Box sx={sessionsContainerStyle}>
{weeks.map((week: any) => {
return (
<Box mb={6} key={week.name.split(':')[0]}>
<Typography mb={{ xs: 0, md: 3.5 }} key={week.name} component="h2" variant="h2">
{week.name}
</Typography>
<Box sx={cardsContainerStyle}>
{week.sessions.map((session: any) => {
const position = `${t('session')} ${session.position / 10 - 1}`;

return (
<SessionCard
key={session.id}
session={session}
sessionSubtitle={position}
storyblokCourseId={storyId}
isLoggedIn={isLoggedIn}
/>
);
})}
</Box>
<>
{video && (
<CourseIntroduction
video={video}
name={name}
video_transcript={video_transcript}
eventData={eventData}
/>
)}
<Box sx={sessionsContainerStyle}>
{weeks.map((week: any) => {
return (
<Box mb={6} key={week.name.split(':')[0]}>
<Typography mb={{ xs: 0, md: 3.5 }} key={week.name} component="h2" variant="h2">
{week.name}
</Typography>
<Box sx={cardsContainerStyle}>
{week.sessions.map((session: any) => {
const position = `${t('session')} ${session.position / 10 - 1}`;

return (
<SessionCard
key={session.id}
session={session}
sessionSubtitle={position}
storyblokCourseId={storyId}
isLoggedIn={isLoggedIn}
/>
);
})}
</Box>
);
})}
</Box>
</>
)}
</Box>
);
})}
</Box>
</>
</Container>
{!isLoggedIn && <SignUpBanner />}
</Box>
Expand Down
Loading

0 comments on commit a975e2f

Please sign in to comment.