Render captions on posts

Author: lyncasterc

frontend/src/features/posts/PostComponent/PostComponent.styles.ts

@@ -14,7 +14,20 @@ export default createStyles((theme) => ({
     height: '100%',
   },
   likeCommentContainer: {
-    padding: '14px',
+    position: 'relative',
+    left: -5,
+  },
+  captionText: {
+    lineHeight: 1.2,
+  },
+  captionCreatorLink: {
+    lineHeight: 0,
+  },
+  postBottomSection: {
+    padding: 14,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 5,
   },
   activeOpacityLight: {
     '&:active': {
@@ -25,9 +38,6 @@ export default createStyles((theme) => ({
     color: '#737373',
     fontWeight: 400,
   },
-  createdContainer: {
-    padding: '0 14px',
-  },
   modal: {
     borderRadius: 10,
     width: '83%',

frontend/src/features/posts/PostComponent/PostComponent.tsx

@@ -32,7 +32,7 @@ function PostComponent({ post, setAlertText }: PostProps) {
   const isCurrentUserPostCreator = currentUsername === postCreator;
   const [isDeleteModalOpen, setDeleteModalOpen] = useState(false);
   const [isDeleteConfirmModalOpen, setDeleteConfirmModalOpen] = useState(false);
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
   const goBack = useGoBack();
   const [deletePost] = useDeletePostByIdMutation();
 
@@ -168,28 +168,51 @@ function PostComponent({ post, setAlertText }: PostProps) {
         src={post.image.url}
         data-cy="post-image"
       />
-      <Group
-        position="left"
-        className={classes.likeCommentContainer}
-        spacing="sm"
-      >
-        <IconHeart
-          size={28}
-          strokeWidth={1.5}
-          color="black"
-          className={classes.activeOpacityLight}
-        />
-        <IconMessageCircle
-          size={28}
-          strokeWidth={1.5}
-          color="black"
-          className={classes.activeOpacityLight}
-        />
-      </Group>
-      <div className={classes.createdContainer}>
-        <Text size="xs" className={classes.createdAt}>
-          {getTimeSinceDate(new Date(post.createdAt))}
-        </Text>
+      <div className={classes.postBottomSection}>
+        <Group
+          position="left"
+          className={classes.likeCommentContainer}
+          spacing="sm"
+        >
+          <IconHeart
+            size={28}
+            strokeWidth={1.5}
+            color="black"
+            className={classes.activeOpacityLight}
+          />
+          <IconMessageCircle
+            size={28}
+            strokeWidth={1.5}
+            color="black"
+            className={classes.activeOpacityLight}
+          />
+        </Group>
+        {
+        post.caption && (
+          <div>
+            <Text
+              weight={700}
+              size="sm"
+              className={cx(classes.activeOpacityLight, classes.captionCreatorLink)}
+              component={Link}
+              to={`/${postCreator}`}
+            >
+              {postCreator}
+            </Text>
+            <Text
+              size="sm"
+              className={classes.captionText}
+            >
+              {post.caption}
+            </Text>
+          </div>
+        )
+      }
+        <div>
+          <Text size="xs" className={classes.createdAt}>
+            {getTimeSinceDate(new Date(post.createdAt))}
+          </Text>
+        </div>
       </div>
     </>
   );

frontend/src/test/int/viewingposts.test.tsx

@@ -161,3 +161,50 @@ test.only('post is viewable in the post view page', async () => {
     expect(postedImage).toBeVisible();
   });
 });
+
+test.only('when a post has a caption, it is viewable in the post view page', async () => {
+  await store.dispatch(apiSlice.endpoints.getUsers.initiate());
+  const history = createBrowserHistory();
+  history.push('/create/details', { croppedImage: testImage });
+
+  render(
+    <HistoryRouter history={history}>
+      <Providers>
+        <App />
+      </Providers>
+    </HistoryRouter>,
+  );
+
+  const user = userEvent.setup();
+  const shareBtns = await screen.findAllByText(/share/i);
+  const shareBtn = shareBtns[0];
+  const textarea = screen.getByRole('textbox');
+
+  await user.type(textarea, 'This is a caption');
+  await user.click(shareBtn);
+
+  await waitFor(() => {
+    expect(history.location.pathname).toBe('/');
+  });
+
+  // Navigate to user profile
+  act(() => {
+    history.push(`/${fakeUser.username}`);
+  });
+
+  // simulating a page refresh
+  await store.dispatch(apiSlice.endpoints.getUsers.initiate(undefined, { forceRefetch: true }));
+
+  await waitFor(async () => {
+    const images = screen.getAllByRole('img');
+    const postedImage = images.find((img) => img.getAttribute('src') === testImage);
+    expect(postedImage).toBeDefined();
+
+    // going to the post view page
+    await user.click(postedImage!);
+  });
+
+  await waitFor(() => {
+    expect(screen.getByText(/this is a caption/i)).toBeVisible();
+  });
+});