Updated frontend to always show newest Soundcloud track as iframe

haslo · Aug 17, 2024 · 4dd01b3 · 4dd01b3
1 parent 24b4308
commit 4dd01b3
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 85 deletions.
diff --git a/src/App.js b/src/App.js
@@ -14,11 +14,13 @@ import SearchAppBar from "./SearchAppBar";
 import NewsPosts from "./NewsPosts";
 import SoundCloudIFrame from "./SoundCloudIFrame";
 import BottomBar from "./BottomBar";
+import useFetchNewsPostsAndNewestContent from './useFetchNewsPostsAndNewestContent';
 
 function App() {
 
   const [searchQuery, setSearchQuery] = useState('');
   const [searchEventSent, setSearchEventSent] = useState(false);
+  const { newsPosts, newestContentId } = useFetchNewsPostsAndNewestContent();
 
   const theme = createTheme({
     palette: {
@@ -39,8 +41,14 @@ function App() {
           searchEventSent={searchEventSent}
           setSearchEventSent={setSearchEventSent}
         />
-        <SoundCloudIFrame/>
-        <NewsPosts searchQuery={searchQuery} style={{marginTop: '50px'}}/>
+        <SoundCloudIFrame
+          newestContentId={newestContentId}
+        />
+        <NewsPosts
+          searchQuery={searchQuery}
+          newsPosts={newsPosts}
+          style={{marginTop: '50px'}}
+        />
         <BottomBar/>
       </ThemeProvider>
     </div>

diff --git a/src/NewsPosts.js b/src/NewsPosts.js
@@ -6,80 +6,10 @@ import Typography from "@mui/material/Typography";
 
 import NewsPostCard from "./NewsPostCard";
 
-function NewsPosts({searchQuery, isFiltering}) {
+function NewsPosts({searchQuery, newsPosts}) {
 
-  const [newsPosts, setNewsPosts] = useState(null);
   const [maxScroll, setMaxScroll] = useState(9);
 
-  useEffect(() => {
-    const query = `
-    {
-      newsPostCollection(order: [publicationDate_DESC, title_ASC], limit: 1000) {
-        items {
-          title
-          shortTitle
-          description
-          originalUrl
-          remoteId
-          publicationDate
-          isVideo
-          isAudio
-          thumbnailImage {
-            contentType
-            url
-          }
-          type {
-            title
-            channelDescription
-            channelTitle
-            channelUrl
-            icon {
-              contentType
-              url
-            }
-            sys {
-              id
-            }
-          }
-          sys {
-            id
-          }
-        }
-      }
-    }
-    `
-    const fetchGraphQlData = (query, retries) => {
-      // Is this a token in the repository?
-      // yes, it is - it's a read-only token for published CMS content,
-      // which the client also uses to make a request from the browser the SPA is running in.
-      // So go ahead and steal it, it's yours anyway :)
-      window
-        .fetch(`https://graphql.contentful.com/content/v1/spaces/wehngbocf979/`, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            Authorization: "Bearer ck9CqB4ydwUdbKGF6quZzIqVS0JvmlMhWQJnFSnODrA",
-          },
-          body: JSON.stringify({query}),
-        })
-        .then((response) => response.json())
-        .then(({data, errors}) => {
-          if (errors) {
-            console.error(errors);
-            console.log(`retries ${retries}, retrying? ${retries < 5}`);
-            if (retries < 5) {
-              setTimeout(() => {
-                fetchGraphQlData(query, retries + 1);
-              }, 1000)
-            }
-          } else {
-            setNewsPosts(data.newsPostCollection.items);
-          }
-        });
-    }
-    fetchGraphQlData(query, 0);
-  }, []);
-
   if (!newsPosts) {
     return (
       <Container fixed style={{marginTop: '100px'}}>

diff --git a/src/SoundCloudIFrame.js b/src/SoundCloudIFrame.js
@@ -1,17 +1,20 @@
 import {Container} from "@mui/material";
 
-function SoundCloudIFrame() {
-  const iframeHtml = '<iframe title="Featured Track" ' +
-    'width="100%" height="200" scrolling="no" frameborder="no" allow="autoplay" ' +
-    'src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' +
-    '1892746719' +
-    '&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true">' +
-    '</iframe>'
-  return (
-    <Container fixed style={{marginTop: '100px'}}>
-      <div dangerouslySetInnerHTML={{__html: iframeHtml}}/>
-    </Container>
-  );
+function SoundCloudIFrame({newestContentId}) {
+  if (newestContentId !== null && newestContentId !== undefined) {
+    const iframeHtml = '<iframe title="Featured Track" ' +
+      'width="100%" height="200" scrolling="no" frameborder="no" allow="autoplay" ' +
+      'src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' +
+      newestContentId +
+      '&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true">' +
+      '</iframe>'
+
+    return (
+      <Container fixed style={{marginTop: '100px'}}>
+        <div dangerouslySetInnerHTML={{__html: iframeHtml}}/>
+      </Container>
+    );
+  }
 }
 
 export default SoundCloudIFrame;
diff --git a/src/useFetchNewsPostsAndNewestContent.js b/src/useFetchNewsPostsAndNewestContent.js
@@ -0,0 +1,85 @@
+import { useState, useEffect } from 'react';
+
+const useFetchNewsPostsAndNewestContent = () => {
+  const [newsPosts, setNewsPosts] = useState(null);
+  const [newestContentId, setNewestContentId] = useState(null);
+
+  useEffect(() => {
+    const query = `
+    {
+      newsPostCollection(order: [publicationDate_DESC, title_ASC], limit: 1000) {
+        items {
+          title
+          shortTitle
+          description
+          originalUrl
+          remoteId
+          publicationDate
+          isVideo
+          isAudio
+          thumbnailImage {
+            contentType
+            url
+          }
+          type {
+            title
+            channelDescription
+            channelTitle
+            channelUrl
+            icon {
+              contentType
+              url
+            }
+            sys {
+              id
+            }
+          }
+          sys {
+            id
+          }
+        }
+      }
+    }
+    `;
+
+    const fetchGraphQlData = (query, retries) => {
+      window
+        .fetch(`https://graphql.contentful.com/content/v1/spaces/wehngbocf979/`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: "Bearer ck9CqB4ydwUdbKGF6quZzIqVS0JvmlMhWQJnFSnODrA",
+          },
+          body: JSON.stringify({query}),
+        })
+        .then((response) => response.json())
+        .then(({data, errors}) => {
+          if (errors) {
+            console.error(errors);
+            console.log(`retries ${retries}, retrying? ${retries < 5}`);
+            if (retries < 5) {
+              setTimeout(() => {
+                fetchGraphQlData(query, retries + 1);
+              }, 1000)
+            }
+          } else {
+            setNewsPosts(data.newsPostCollection.items);
+
+            // Find the first SoundCloud post and set its remoteId as the newest content ID
+            const soundCloudPost = data.newsPostCollection.items.find(
+              item => item.type && item.type.title === "SoundCloud Track"
+            );
+            if (soundCloudPost) {
+              setNewestContentId(soundCloudPost.remoteId);
+            }
+          }
+        });
+    }
+
+    fetchGraphQlData(query, 0);
+  }, []);
+
+  return { newsPosts, newestContentId };
+};
+
+export default useFetchNewsPostsAndNewestContent;