Merge pull request #2607 from KaelenProctor/feature/dynamo-6

Conversion of Content dynamo model to Typescript
dekkerglen · Feb 13, 2025 · 73ba69b · 73ba69b
2 parents 1e9b741 + a0f0cd1
commit 73ba69b
Show file tree

Hide file tree

Showing 24 changed files with 420 additions and 452 deletions.
diff --git a/src/client/components/content/ArticlePreview.tsx b/src/client/components/content/ArticlePreview.tsx
@@ -5,30 +5,31 @@ import TimeAgo from 'react-timeago';
 import AspectRatioBox from 'components/base/AspectRatioBox';
 import MtgImage from 'components/MtgImage';
 import Article from 'datatypes/Article';
+import { ContentStatus, ContentStatusEnglish } from 'datatypes/Content';
 
 import { Flexbox } from '../base/Layout';
 import Text from '../base/Text';
 import { Tile } from '../base/Tile';
 
-const statusMap: Record<string, string> = {
-  p: 'Published',
-  d: 'Draft',
-  r: 'In Review',
-};
-
 export interface ArticlePreviewProps {
   article: Article;
   showStatus?: boolean;
 }
 
 const ArticlePreview: React.FC<ArticlePreviewProps> = ({ article, showStatus = false }) => {
   return (
-    <Tile href={article.status === 'p' ? `/content/article/${article.id}` : `/content/article/edit/${article.id}`}>
+    <Tile
+      href={
+        article.status === ContentStatus.PUBLISHED
+          ? `/content/article/${article.id}`
+          : `/content/article/edit/${article.id}`
+      }
+    >
       <AspectRatioBox ratio={1.9}>
         {article.image && <MtgImage image={article.image} />}
         <Text bold className="absolute bottom-0 left-0 text-white text-shadow bg-article bg-opacity-50 w-full mb-0 p-1">
           Article
-          {showStatus && ` - Status: ${statusMap[article.status]}`}
+          {showStatus && ` - Status: ${ContentStatusEnglish[article.status]}`}
         </Text>
       </AspectRatioBox>
       <Flexbox direction="col" className="p-1 flex-grow">

diff --git a/src/client/components/content/CreatorArticles.tsx b/src/client/components/content/CreatorArticles.tsx
@@ -6,6 +6,7 @@ import Spinner from 'components/base/Spinner';
 import ArticlePreview from 'components/content/ArticlePreview';
 import { CSRFContext } from 'contexts/CSRFContext';
 import Article from 'datatypes/Article';
+import { ContentType } from 'datatypes/Content';
 
 interface CreatorArticlesProps {
   articles: Article[];
@@ -28,7 +29,7 @@ const CreatorArticles: React.FC<CreatorArticlesProps> = ({ articles, lastKey })
       },
       body: JSON.stringify({
         lastKey: currentLastKey,
-        type: 'a',
+        type: ContentType.ARTICLE,
       }),
     });
 
@@ -40,7 +41,7 @@ const CreatorArticles: React.FC<CreatorArticlesProps> = ({ articles, lastKey })
         setLoading(false);
       }
     }
-  }, [items, currentLastKey]);
+  }, [csrfFetch, currentLastKey, items]);
 
   const loader = (
     <div className="centered py-3 my-4">

diff --git a/src/client/components/content/CreatorPodcasts.tsx b/src/client/components/content/CreatorPodcasts.tsx
@@ -5,6 +5,7 @@ import { Col, Flexbox, Row } from 'components/base/Layout';
 import Spinner from 'components/base/Spinner';
 import PodcastPreview from 'components/content/PodcastPreview';
 import { CSRFContext } from 'contexts/CSRFContext';
+import { ContentType } from 'datatypes/Content';
 import Podcast from 'datatypes/Podcast';
 
 interface CreatorPodcastsProps {
@@ -28,7 +29,7 @@ const CreatorPodcasts: React.FC<CreatorPodcastsProps> = ({ podcasts, lastKey })
       },
       body: JSON.stringify({
         lastKey: currentLastKey,
-        type: 'a',
+        type: ContentType.PODCAST,
       }),
     });
 
@@ -40,7 +41,7 @@ const CreatorPodcasts: React.FC<CreatorPodcastsProps> = ({ podcasts, lastKey })
         setLoading(false);
       }
     }
-  }, [items, currentLastKey]);
+  }, [csrfFetch, currentLastKey, items]);
 
   const loader = (
     <div className="centered py-3 my-4">

diff --git a/src/client/components/content/CreatorVideos.tsx b/src/client/components/content/CreatorVideos.tsx
@@ -5,6 +5,7 @@ import { Col, Flexbox, Row } from 'components/base/Layout';
 import Spinner from 'components/base/Spinner';
 import VideoPreview from 'components/content/VideoPreview';
 import { CSRFContext } from 'contexts/CSRFContext';
+import { ContentType } from 'datatypes/Content';
 import Video from 'datatypes/Video';
 
 interface CreatorVideosProps {
@@ -28,7 +29,7 @@ const CreatorVideos: React.FC<CreatorVideosProps> = ({ videos, lastKey }) => {
       },
       body: JSON.stringify({
         lastKey: currentLastKey,
-        type: 'a',
+        type: ContentType.VIDEO,
       }),
     });
 
@@ -40,7 +41,7 @@ const CreatorVideos: React.FC<CreatorVideosProps> = ({ videos, lastKey }) => {
         setLoading(false);
       }
     }
-  }, [items, currentLastKey]);
+  }, [csrfFetch, currentLastKey, items]);
 
   const loader = (
     <div className="centered py-3 my-4">

diff --git a/src/client/components/content/EditArticle.tsx b/src/client/components/content/EditArticle.tsx
@@ -9,12 +9,7 @@ import Text from 'components/base/Text';
 import TextArea from 'components/base/TextArea';
 import ArticlePreview from 'components/content/ArticlePreview';
 import ArticleType from 'datatypes/Article';
-
-const CONVERT_STATUS = {
-  p: 'Published',
-  r: 'In Review',
-  d: 'Draft',
-};
+import { ContentStatusEnglish } from 'datatypes/Content';
 interface EditArticleProps {
   article: ArticleType;
   title: string;
@@ -72,7 +67,7 @@ const EditArticle: React.FC<EditArticleProps> = ({
         <Col xs={12} md={6} lg={8} xxl={9}>
           <Flexbox direction="col" gap="2" className="m-2">
             <Text semibold md>
-              {`Status: ${CONVERT_STATUS[article.status]}`}
+              {`Status: ${ContentStatusEnglish[article.status]}`}
             </Text>
             <Input label="Title" maxLength={200} value={title} onChange={(e) => setTitle(e.target.value)} />
             <TextArea

diff --git a/src/client/components/content/EditPodcast.tsx b/src/client/components/content/EditPodcast.tsx
@@ -3,15 +3,10 @@ import React from 'react';
 import Input from 'components/base/Input';
 import { Col, Flexbox, Row } from 'components/base/Layout';
 import Text from 'components/base/Text';
+import { ContentStatusEnglish } from 'datatypes/Content';
 import PodcastType from 'datatypes/Podcast';
 
 import PodcastPreview from './PodcastPreview';
-
-const CONVERT_STATUS = {
-  p: 'Published',
-  r: 'In Review',
-  d: 'Draft',
-};
 interface EditPodcastProps {
   podcast: PodcastType;
   url: string;
@@ -31,7 +26,7 @@ const EditPodcast: React.FC<EditPodcastProps> = ({ podcast, url, setUrl }) => {
         <Col xs={12} md={6} lg={8} xxl={9}>
           <Flexbox direction="col" gap="2" className="m-2">
             <Text semibold md>
-              {`Status: ${CONVERT_STATUS[podcast.status]}`}
+              {`Status: ${ContentStatusEnglish[podcast.status]}`}
             </Text>
             <Input label="RSS Link" maxLength={200} value={url} onChange={(e) => setUrl(e.target.value)} />
           </Flexbox>

diff --git a/src/client/components/content/EditVideo.tsx b/src/client/components/content/EditVideo.tsx
@@ -7,16 +7,11 @@ import Link from 'components/base/Link';
 import Spinner from 'components/base/Spinner';
 import Text from 'components/base/Text';
 import TextArea from 'components/base/TextArea';
+import { ContentStatusEnglish } from 'datatypes/Content';
 import VideoType from 'datatypes/Video';
 
 import VideoPreview from './VideoPreview';
 
-const CONVERT_STATUS = {
-  p: 'Published',
-  r: 'In Review',
-  d: 'Draft',
-};
-
 interface EditVideoProps {
   video: VideoType;
   title: string;
@@ -79,7 +74,7 @@ const EditVideo: React.FC<EditVideoProps> = ({
         <Col xs={12} md={6} lg={8} xxl={9}>
           <Flexbox direction="col" gap="2" className="m-2">
             <Text semibold md>
-              {`Status: ${CONVERT_STATUS[video.status]}`}
+              {`Status: ${ContentStatusEnglish[video.status]}`}
             </Text>
             <Input label="Title" maxLength={200} value={title} onChange={(e) => setTitle(e.target.value)} />
             <Input label="Video URL" maxLength={200} value={url} onChange={(e) => setUrl(e.target.value)} />

diff --git a/src/client/components/content/VideoPreview.tsx b/src/client/components/content/VideoPreview.tsx
@@ -5,6 +5,7 @@ import TimeAgo from 'react-timeago';
 import AspectRatioBox from 'components/base/AspectRatioBox';
 import MtgImage from 'components/MtgImage';
 import Username from 'components/Username';
+import { ContentStatus } from 'datatypes/Content';
 import Video from 'datatypes/Video';
 
 import { Flexbox } from '../base/Layout';
@@ -17,7 +18,9 @@ export interface VideoPreviewProps {
 
 const VideoPreview: React.FC<VideoPreviewProps> = ({ video }) => {
   return (
-    <Tile href={video.status === 'p' ? `/content/video/${video.id}` : `/content/video/edit/${video.id}`}>
+    <Tile
+      href={video.status === ContentStatus.PUBLISHED ? `/content/video/${video.id}` : `/content/video/edit/${video.id}`}
+    >
       <AspectRatioBox ratio={1.9}>
         {video.image && <MtgImage image={video.image} />}
         <Text bold className="absolute bottom-0 left-0 text-white text-shadow bg-video bg-opacity-50 w-full mb-0 p-1">

diff --git a/src/client/pages/ArticlePage.tsx b/src/client/pages/ArticlePage.tsx
@@ -8,6 +8,7 @@ import DynamicFlash from 'components/DynamicFlash';
 import RenderToRoot from 'components/RenderToRoot';
 import UserContext from 'contexts/UserContext';
 import ArticleType from 'datatypes/Article';
+import { ContentStatus } from 'datatypes/Content';
 import MainLayout from 'layouts/MainLayout';
 
 interface ArticlePageProps {
@@ -23,7 +24,7 @@ const ArticlePage: React.FC<ArticlePageProps> = ({ loginCallback = '/', article
       <Banner />
       <DynamicFlash />
       <Card className="my-2">
-        {user && user.id === article.owner.id && article.status !== 'p' && (
+        {user && user.id === article.owner.id && article.status !== ContentStatus.PUBLISHED && (
           <CardHeader>
             <Text semibold lg>
               <em className="pe-3">*Draft*</em>

diff --git a/src/client/pages/BrowseContentPage.tsx b/src/client/pages/BrowseContentPage.tsx
@@ -9,7 +9,7 @@ import DynamicFlash from 'components/DynamicFlash';
 import IndefinitePaginatedList from 'components/IndefinitePaginatedList';
 import RenderToRoot from 'components/RenderToRoot';
 import Article from 'datatypes/Article';
-import Content from 'datatypes/Content';
+import Content, { ContentType } from 'datatypes/Content';
 import Episode from 'datatypes/Episode';
 import Video from 'datatypes/Video';
 import MainLayout from 'layouts/MainLayout';
@@ -39,9 +39,9 @@ const BrowseContentPage: React.FC<BrowseContentPageProps> = ({ loginCallback = '
           fetchMoreRoute={`/content/getmore`}
           renderItem={(item) => (
             <>
-              {item.type === 'a' && <ArticlePreview article={item as Article} />}
-              {item.type === 'v' && <VideoPreview video={item as Video} />}
-              {item.type === 'e' && <PodcastEpisodePreview episode={item as Episode} />}
+              {item.type === ContentType.ARTICLE && <ArticlePreview article={item as Article} />}
+              {item.type === ContentType.VIDEO && <VideoPreview video={item as Video} />}
+              {item.type === ContentType.EPISODE && <PodcastEpisodePreview episode={item as Episode} />}
             </>
           )}
           noneMessage="No content found."

diff --git a/src/client/pages/DashboardPage.tsx b/src/client/pages/DashboardPage.tsx
@@ -21,6 +21,7 @@ import RenderToRoot from 'components/RenderToRoot';
 import withModal from 'components/WithModal';
 import UserContext from 'contexts/UserContext';
 import BlogPost from 'datatypes/BlogPost';
+import { ContentType } from 'datatypes/Content';
 import Cube from 'datatypes/Cube';
 import Draft from 'datatypes/Draft';
 import MainLayout from 'layouts/MainLayout';
@@ -124,9 +125,9 @@ const DashboardPage: React.FC<DashboardPageProps> = ({
               <Row>
                 {content.map((item) => (
                   <Col key={item.id} className="mb-3" xs={6}>
-                    {item.type === 'a' && <ArticlePreview article={item} />}
-                    {item.type === 'v' && <VideoPreview video={item} />}
-                    {item.type === 'e' && <PodcastEpisodePreview episode={item} />}
+                    {item.type === ContentType.ARTICLE && <ArticlePreview article={item} />}
+                    {item.type === ContentType.VIDEO && <VideoPreview video={item} />}
+                    {item.type === ContentType.EPISODE && <PodcastEpisodePreview episode={item} />}
                   </Col>
                 ))}
               </Row>

diff --git a/src/client/pages/LandingPage.tsx b/src/client/pages/LandingPage.tsx
@@ -13,6 +13,7 @@ import DeckPreview from 'components/DeckPreview';
 import DynamicFlash from 'components/DynamicFlash';
 import RenderToRoot from 'components/RenderToRoot';
 import Article from 'datatypes/Article';
+import { ContentType } from 'datatypes/Content';
 import Cube from 'datatypes/Cube';
 import Draft from 'datatypes/Draft';
 import Episode from 'datatypes/Episode';
@@ -89,9 +90,9 @@ const LandingPage: React.FC<LandingPageProps> = ({ featured, recentDecks, conten
             <Row>
               {content.map((item: Article) => (
                 <Col key={item.id} xxl={3} lg={4} sm={6} className="mb-4">
-                  {item.type === 'a' && <ArticlePreview article={item as Article} />}
-                  {item.type === 'v' && <VideoPreview video={item as Video} />}
-                  {item.type === 'e' && <PodcastEpisodePreview episode={item as any as Episode} />}
+                  {item.type === ContentType.ARTICLE && <ArticlePreview article={item as Article} />}
+                  {item.type === ContentType.VIDEO && <VideoPreview video={item as Video} />}
+                  {item.type === ContentType.EPISODE && <PodcastEpisodePreview episode={item as any as Episode} />}
                 </Col>
               ))}
               <Col xxl={3} lg={4} sm={6} className="mb-4">

diff --git a/src/client/pages/ReviewContentPage.tsx b/src/client/pages/ReviewContentPage.tsx
@@ -7,11 +7,12 @@ import Link from 'components/base/Link';
 import Text from 'components/base/Text';
 import DynamicFlash from 'components/DynamicFlash';
 import RenderToRoot from 'components/RenderToRoot';
+import { ContentType } from 'datatypes/Content';
 import MainLayout from 'layouts/MainLayout';
 
 interface Document {
   id: string;
-  type: 'a' | 'v' | 'p';
+  type: ContentType.ARTICLE | ContentType.VIDEO | ContentType.PODCAST;
   title: string;
 }
 

diff --git a/src/datatypes/Content.ts b/src/datatypes/Content.ts
@@ -1,22 +1,41 @@
 import User from './User';
 
-export const CONVERT_STATUS = {
-  p: 'Published',
-  r: 'In Review',
-  d: 'Draft',
-};
+export enum ContentType {
+  VIDEO = 'v',
+  ARTICLE = 'a',
+  EPISODE = 'e',
+  PODCAST = 'p',
+}
+
+export enum ContentStatus {
+  IN_REVIEW = 'r',
+  DRAFT = 'd',
+  PUBLISHED = 'p',
+}
 
-export default interface Content {
+export const ContentStatusEnglish = {
+  [ContentStatus.DRAFT]: 'Draft',
+  [ContentStatus.IN_REVIEW]: 'In Review',
+  [ContentStatus.PUBLISHED]: 'Published',
+};
+export interface UnhydratedContent {
   id: string;
-  date: number;
-  status: 'p' | 'r' | 'd';
-  owner: User;
   type: string;
   typeStatusComp: string;
   typeOwnerComp: string;
+  date: number;
+  status: ContentStatus;
+  owner: string;
   title?: string;
   body?: string;
   short?: string;
   url?: string;
   username?: string;
+  imageName?: string;
+}
+
+export interface Content extends Omit<UnhydratedContent, 'owner' | 'image'> {
+  owner: User;
 }
+
+export default Content;
diff --git a/src/datatypes/Episode.ts b/src/datatypes/Episode.ts
@@ -5,6 +5,7 @@ interface Episode extends Content {
   image?: string;
   imageName?: string;
   podcast: string;
+  podcastGuid: string;
 }
 
 export default Episode;