Convert Media Methods to ES5

src/build-constants.js

@@ -3,3 +3,6 @@ module.exports.DOCUMENTS_COLLECTION = 'documents';
 module.exports.ASSETS_COLLECTION = 'assets';
 module.exports.METADATA_COLLECTION = 'metadata';
 module.exports.SNOOTY_STITCH_ID = 'snooty-koueq';
+
+// Devhub Stitch App
+module.exports.STITCH_AUTH_APP_ID = 'devhubauthentication-lidpq';

src/components/dev-hub/card-list.js

@@ -26,7 +26,6 @@ const ArticleCard = styled(Card)`
 
 const VideoCard = styled(Card)`
     flex: 1 1 360px;
-    cursor: pointer;
 `;
 
 const HasMoreButtonContainer = styled('div')`
@@ -62,7 +61,7 @@ const renderArticle = article => (
 
 const renderVideo = video => (
     <VideoCard
-        key={video.title}
+        key={video.mediaType + video.title}
         image={getThumbnailUrl(video)}
         videoModalThumbnail={getThumbnailUrl(video)}
         title={video.title}
@@ -74,7 +73,7 @@ const renderVideo = video => (
 
 const renderPodcast = (podcast, openAudio) => (
     <Card
-        key={podcast.title}
+        key={podcast.mediaType + podcast.title}
         image={getThumbnailUrl(podcast)}
         title={podcast.title}
         badge={podcast.mediaType}
@@ -138,9 +137,9 @@ export default React.memo(({ videos, articles, podcasts, limit = 9 }) => {
                     </Button>
                 </HasMoreButtonContainer>
             )}
-            {podcasts.length && (
+            {podcasts.length ? (
                 <Audio onClose={closeAudio} podcast={activePodcast} />
-            )}
+            ) : null}
         </>
     );
 });

src/components/dev-hub/card.js

@@ -116,7 +116,7 @@ const Card = ({
               href,
               target,
           };
-    const isClickable = onClick || isLink;
+    const isClickable = onClick || isLink || video;
     return (
         <ContentWrapper
             data-test="card"

src/components/dev-hub/filter-bar.js

@@ -27,7 +27,6 @@ const zipFilterObjects = (filterObject, findCount = x => x.count) => {
 const ResponsiveFlexContainer = styled('div')`
     align-items: center;
     display: flex;
-    justify-content: space-between;
     @media ${screenSize.upToLarge} {
         display: block;
     }
@@ -36,6 +35,7 @@ const ResponsiveFlexContainer = styled('div')`
 const FilterBar = styled('div')`
     align-items: center;
     display: flex;
+    justify-content: flex-end;
     h3 {
         flex: 2;
     }
@@ -56,20 +56,8 @@ const SelectWrapper = styled('div')`
     }
 `;
 
-const HeadingText = styled(H3)`
-    @media ${screenSize.upToLarge} {
-        margin-bottom: ${size.default};
-    }
-`;
-
 export default React.memo(
-    ({
-        heading = 'All Articles',
-        filters,
-        filterValue,
-        setFilterValue,
-        ...props
-    }) => {
+    ({ filters, filterValue, setFilterValue, ...props }) => {
         const initialLanguages = useMemo(
             () => zipFilterObjects(filters.languages),
             [filters.languages]
@@ -135,7 +123,6 @@ export default React.memo(
         };
         return (
             <FilterBar {...props}>
-                <HeadingText collapse>{heading}</HeadingText>
                 <ResponsiveFlexContainer>
                     <FilterLabel>Filter By</FilterLabel>
                     <SelectWrapper>

src/components/dev-hub/tab.js

@@ -56,8 +56,14 @@ const mapTabTextToButton = (textList, activeItem, handleClick) =>
         );
     });
 
-export default ({ handleClick, leftTabs, rightTabs, activeItem }) => (
-    <Tab>
+export default ({
+    activeItem,
+    className,
+    handleClick,
+    leftTabs,
+    rightTabs,
+}) => (
+    <Tab className={className}>
         <div>{mapTabTextToButton(leftTabs, activeItem, handleClick)}</div>
         <div>{mapTabTextToButton(rightTabs, activeItem, handleClick)}</div>
     </Tab>

src/constants.js

@@ -29,5 +29,3 @@ export const ADMONITIONS = [
     'tip',
     'warning',
 ];
-
-export const STITCH_AUTH_APP_ID = 'devhubauthentication-lidpq';

src/pages/learn.js

@@ -12,6 +12,9 @@ import { useSiteMetadata } from '../hooks/use-site-metadata';
 import { buildQueryString, parseQueryString } from '../utils/query-string';
 import { getFeaturedCardFields } from '../utils/get-featured-card-fields';
 import { getTagLinksFromMeta } from '../utils/get-tag-links-from-meta';
+import useAllVideos from '../hooks/use-all-videos';
+import usePodcasts from '../hooks/use-podcasts';
+import Tab from '../components/dev-hub/tab';
 
 const FEATURED_ARTICLE_MAX_WIDTH = '1200px';
 const FEATURED_ARTICLE_CARD_WIDTH = '410px';
@@ -70,7 +73,12 @@ const Article = styled('article')`
 `;
 
 const StyledFilterBar = styled(FilterBar)`
-    padding-bottom: ${size.medium};
+    margin: 0 ${size.large};
+    padding-bottom: ${size.large};
+`;
+
+const TabBar = styled(Tab)`
+    margin: 0 ${size.large};
 `;
 
 const parseArticles = arr =>
@@ -134,8 +142,9 @@ const SecondaryFeaturedArticle = ({ article, Wrapper }) => {
 const FeaturedArticles = ({ articles }) => {
     if (articles.length < 3) {
         console.error(
-            `Expected three articles for featured section, got ${articles &&
-                articles.length}`
+            `Expected three articles for featured section, got ${
+                articles && articles.length
+            }`
         );
         return null;
     }
@@ -200,6 +209,22 @@ export default ({
         setArticles(filteredArticles);
     }, [metadata, filterValue, pathname, filterActiveArticles]);
     const updateFilter = useCallback(filter => setFilterValue(filter), []);
+    // filterValue could be {} on a page load, or values can be "all" if toggled back
+    const hasNoFilter = useMemo(
+        () =>
+            (!filterValue.languages || filterValue.languages === 'all') &&
+            (!filterValue.products || filterValue.products === 'all'),
+        [filterValue]
+    );
+    const { videos } = useAllVideos();
+
+    const { podcasts } = usePodcasts();
+
+    const [activeItem, setActiveItem] = useState('All');
+
+    const leftTabs = ['All'];
+    const rightTabs = ['Articles', 'Videos', 'Podcasts'];
+
     return (
         <Layout>
             <Helmet>
@@ -211,13 +236,33 @@ export default ({
                     <FeaturedArticles articles={featuredArticles} />
                 </HeaderContent>
             </Header>
+
+            <TabBar
+                handleClick={setActiveItem}
+                leftTabs={leftTabs}
+                rightTabs={rightTabs}
+                activeItem={activeItem}
+            />
+
             <Article>
-                <StyledFilterBar
-                    filters={filters}
-                    filterValue={filterValue}
-                    setFilterValue={updateFilter}
-                />
-                <CardList articles={articles} />
+                {(activeItem === 'All' || activeItem === 'Articles') && (
+                    <StyledFilterBar
+                        filters={filters}
+                        filterValue={filterValue}
+                        setFilterValue={updateFilter}
+                    />
+                )}
+
+                {activeItem === 'All' && (
+                    <CardList
+                        articles={articles}
+                        videos={hasNoFilter ? videos : []}
+                        podcasts={hasNoFilter ? podcasts : []}
+                    />
+                )}
+                {activeItem === 'Articles' && <CardList articles={articles} />}
+                {activeItem === 'Videos' && <CardList videos={videos} />}
+                {activeItem === 'Podcasts' && <CardList podcasts={podcasts} />}
             </Article>
         </Layout>
     );

src/utils/devhub-api-stitch.js

@@ -1,5 +1,5 @@
-import { STITCH_AUTH_APP_ID } from '../constants';
-import { callStitchFunction } from './stitch-common';
+const { STITCH_AUTH_APP_ID } = require('../build-constants');
+const { callStitchFunction } = require('./stitch-common');
 
 const callDevhubAPIStitchFunction = async (fnName, ...fnArgs) => {
     try {
@@ -9,31 +9,38 @@ const callDevhubAPIStitchFunction = async (fnName, ...fnArgs) => {
     }
 };
 
-export const requestMDBTwitchStream = async () => {
+const requestMDBTwitchStream = async () => {
     const result = await callDevhubAPIStitchFunction('fetchMDBTwitchStream');
     return result;
 };
 
-export const requestMDBTwitchVideos = async videoLimit => {
+const requestMDBTwitchVideos = async videoLimit => {
     const result = await callDevhubAPIStitchFunction(
         'fetchMDBTwitchVideos',
         videoLimit
     );
     return result;
 };
 
-export const requestYoutubePlaylist = async maxResults => {
+const requestYoutubePlaylist = async maxResults => {
     const result = await callDevhubAPIStitchFunction(
         'fetchYoutubeData',
         maxResults
     );
     return result;
 };
 
-export const submitAcademiaForm = async academiaData => {
+const submitAcademiaForm = async academiaData => {
     const result = await callDevhubAPIStitchFunction(
         'submitAcademiaRegistration',
         academiaData
     );
     return result;
 };
+
+module.exports = {
+    requestMDBTwitchStream,
+    requestMDBTwitchVideos,
+    requestYoutubePlaylist,
+    submitAcademiaForm,
+};

src/utils/fetch-lybsin-podcasts.js

@@ -1,5 +1,5 @@
-import parser from 'fast-xml-parser';
-import dlv from 'dlv';
+const parser = require('fast-xml-parser');
+const dlv = require('dlv');
 
 // Fetches and parses podcast info from https://mongodb.libsyn.com/rss
 
@@ -51,4 +51,4 @@ const fetchLybsinPodcasts = async () => {
     return [];
 };
 
-export default fetchLybsinPodcasts;
+module.exports = fetchLybsinPodcasts;

src/utils/fetch-twitch-videos.js

@@ -1,4 +1,4 @@
-import { requestMDBTwitchVideos } from './devhub-api-stitch';
+const { requestMDBTwitchVideos } = require('./devhub-api-stitch');
 
 // Fetches videos from twitch api
 
@@ -28,4 +28,4 @@ const fetchTwitchVideos = async videoLimit => {
     return [];
 };
 
-export default fetchTwitchVideos;
+module.exports = fetchTwitchVideos;

src/utils/fetch-youtube-data.js

@@ -1,13 +1,20 @@
-import dlv from 'dlv';
-import { requestYoutubePlaylist } from './devhub-api-stitch';
+const dlv = require('dlv');
+const { requestYoutubePlaylist } = require('./devhub-api-stitch');
 // Fetches data from youtube api
 
 const simplifyResponse = responseData => {
     const video = responseData.snippet;
+    // Video publish date is stored in "contentDetails", publish date in "snippet"
+    // is for when this video was added to the playlist
+    const publishedDate = dlv(
+        responseData,
+        'contentDetails.videoPublishedAt',
+        null
+    );
     const youtubeJSON = {
         mediaType: 'youtube',
         title: video['title'],
-        publishDate: video['publishedAt'],
+        publishDate: publishedDate,
         description: video['description'],
         videoId: dlv(video, 'resourceId.videoId', []),
         playlistId: video['playlistId'],
@@ -30,4 +37,4 @@ const fetchYoutubeData = async (maxResults = 5) => {
     return [];
 };
 
-export default fetchYoutubeData;
+module.exports = fetchYoutubeData;

src/utils/stitch-common.js

@@ -1,5 +1,5 @@
-import { AnonymousCredential, Stitch } from 'mongodb-stitch-browser-sdk';
-import { isBrowser } from './is-browser';
+const { AnonymousCredential, Stitch } = require('mongodb-stitch-browser-sdk');
+const { isBrowser } = require('./is-browser');
 
 const initializeApp = appId =>
     Stitch.hasAppClient(appId)
@@ -8,7 +8,7 @@ const initializeApp = appId =>
 
 const stitchClient = appId => (isBrowser() ? initializeApp(appId) : {});
 
-export const authenticate = async appId => {
+const authenticate = async appId => {
     try {
         await stitchClient(appId).auth.loginWithCredential(
             new AnonymousCredential()
@@ -30,11 +30,13 @@ export const authenticate = async appId => {
  * @param {<any>} fnArgs - indefinite number of arguments used in function call
  * @returns {array} array of MongoDB documents
  */
-export const callStitchFunction = async (fnName, appId, fnArgs) => {
+const callStitchFunction = async (fnName, appId, fnArgs) => {
     try {
         await authenticate(appId);
         return stitchClient(appId).callFunction(fnName, fnArgs);
     } catch (error) {
         console.error(error);
     }
 };
+
+module.exports = { authenticate, callStitchFunction };