several media types now accounted for

src/App.js

@@ -8,14 +8,12 @@ function App() {
   return (
     <div className="App">
       <Navbar />
-      <p>Stuff</p>
       <div className="content-container">
 
         <div className="feed">
           {/* To do: import posts from post directory */}
           {/* Map post data onto individual post cards, handle undefined values */}
           <Feed />
-          <Post />
         </div>
         
         <div className="about-the-site">

src/features/posts/Feed.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { fetchBySub, updatePosts, selectPosts } from "./postsSlice";
+import postsSlice, { fetchBySub, updatePosts, selectPosts } from "./postsSlice";
 import { selectAllSubs } from "../reddit/redditSlice";
 import { useSelector, useDispatch } from "react-redux";
 import { v4 } from "uuid";
@@ -15,6 +15,7 @@ export default function Feed() {
         const getPosts = async() => {
             let myPosts = await dispatch(fetchBySub('https://www.reddit.com/r/cats.json'));
             myPosts = myPosts.payload;
+            console.log(myPosts);
 
             if (typeof myPosts === 'object' && isActive) {
                 let newFeed = [];
@@ -29,6 +30,9 @@ export default function Feed() {
                             time={post.data.created_utc}
                             id={v4()}
                             media={post.data.post_hint === 'image' && post.data.url}
+                            permalink={post.data.permalink}
+                            selftext={post.data.selftext}
+                            video={post.data.is_video ? post.data.media.reddit_video.fallback_url : null}
                         />
                     );
                 }
@@ -43,13 +47,9 @@ export default function Feed() {
 
     }, [dispatch])
 
-    useEffect(() => {
-        console.log(feed);
-    }, [feed])
-
     return (
         <>
-        {feed}
+        {feed ? feed : <h1>Loading cats for you...</h1>}
         </>
     );
 }

src/features/posts/Post.css

@@ -14,6 +14,15 @@
     height: 15rem;
 }
 
+a {
+    font-size: 2rem;
+}
+
+img, video {
+    max-height: 45rem;
+    object-fit: contain;
+}
+
 .post-metadata {
     display: inline-flex;
     flex-direction: row;

src/features/posts/Post.js

@@ -1,15 +1,27 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import './Post.css';
 
-export default function Post({title,author,subreddit,ups,comments,time,id,media}) {
+export default function Post({title,author,subreddit,ups,comments,time,id,media,permalink,selftext,video}) {
+    const limit = 300;
+    const [body, setBody] = useState(selftext);
+    
+    useEffect(() => {
+        if (selftext.length > limit) {
+            setBody(selftext.substring(0,limit) + '...');
+        } else {
+            return;
+        }
+    })
     
     return (
         <>
         <div className="post-body">
-            <h1 className="title">{title ? title : 'title'}</h1>
-            <img alt={title} src={media} />
+            <a className="title" href={`https://reddit.com${permalink}`}>{title ? title : 'title'}</a>
+            {media ? <img alt={title} src={media} /> : ''}
+            {video ? <video controls type="video/mp4" src={video}></video> : ''}
+            <p>{body}</p>
             <div className="post-metadata">
-                <p className="user">{author ? author : 'u/username'}</p>
+                <p className="user">{author ? 'u/' + author : 'u/username'}</p>
                 <p className="time-posted">{time ? time : ''}</p>
                 <p className="num-comments">{comments ? comments : 'comments'}</p>
             </div>

src/features/posts/notepad.txt

@@ -0,0 +1,9 @@
+bitrate_kbps: 1200
+dash_url: "https://v.redd.it/5vx109l7x8e81/DASHPlaylist.mpd?a=1645903634%2CZThiNjM5ZTc5MmQ3ZmIxYzg4Y2YzYzc2MDk2MjgzNzU0N2RlOTZjMzhmNWFhN2VjNDI2OWZmNWI0MDY1NDQxOA%3D%3D&v=1&f=hd"
+duration: 23
+fallback_url: "https://v.redd.it/5vx109l7x8e81/DASH_480.mp4?source=fallback"
+height: 480
+hls_url: "https://v.redd.it/5vx109l7x8e81/HLSPlaylist.m3u8?a=1645903634%2COWI5Nzc2MzM0ZTExNTVlMWZiODBhMGJiMjMxYjU4NDk3ZDcwMTEzOGEyN2M4MDA3MmE0YWFlNzMzOTg0MjIzNw%3D%3D&v=1&f=hd"
+is_gif: false
+scrubber_media_url: "https://v.redd.it/5vx109l7x8e81/DASH_96.mp4"
+transcoding_status: "completed"