Step 3: API layer & data transformations

src/api/feed.ts

@@ -1,10 +1,17 @@
-import { FeedResponse } from "@/types";
+import { FeedResponse, Image, User } from "@/types";
 
 import { apiClient } from "./client";
 
 async function getFeed() {
   const response = await apiClient.get<FeedResponse>("/feed");
-  return response.data;
+  const shouts = response.data.data;
+  const users = response.data.included.filter(
+    (u): u is User => u.type === "user"
+  );
+  const images = response.data.included.filter(
+    (i): i is Image => i.type === "image"
+  );
+  return { shouts, users, images };
 }
 
 export default { getFeed };

src/api/media.ts

@@ -2,9 +2,13 @@ import { Image } from "@/types";
 
 import { apiClient } from "./client";
 
-async function uploadImage(formData: FormData) {
+async function uploadImage(file: File) {
+  const formData = new FormData();
+  formData.append("image", file);
+
   const response = await apiClient.post<{ data: Image }>("/image", formData);
-  return response.data;
+  const image = response.data.data;
+  return image;
 }
 
 export default { uploadImage };

src/api/shout.ts

@@ -4,15 +4,17 @@ import { apiClient } from "./client";
 
 async function createShout(input: CreateShoutInput) {
   const response = await apiClient.post<{ data: Shout }>(`/shout`, input);
-  return response.data;
+  const shout = response.data.data;
+  return shout;
 }
 
 async function createReply({ shoutId, replyId }: CreateShoutReplyInput) {
   const response = await apiClient.post<{ data: Shout }>(
     `/shout/${shoutId}/reply`,
     { replyId }
   );
-  return response.data;
+  const reply = response.data.data;
+  return reply;
 }
 
 export default { createShout, createReply };

src/api/user.ts

@@ -4,19 +4,23 @@ import { apiClient } from "./client";
 
 async function getMe() {
   const response = await apiClient.get<{ data: Me }>("/me");
-  return response.data;
+  const me = response.data.data;
+  return me;
 }
 
 async function getUser(handle: string) {
   const response = await apiClient.get<{ data: User }>(`/user/${handle}`);
-  return response.data;
+  const user = response.data.data;
+  return user;
 }
 
 async function getUserShouts(handle: string) {
   const response = await apiClient.get<UserShoutsResponse>(
     `/user/${handle}/shouts`
   );
-  return response.data;
+  const shouts = response.data.data;
+  const images = response.data.included;
+  return { shouts, images };
 }
 
 export default { getMe, getUser, getUserShouts };

src/components/header/header.tsx

@@ -15,7 +15,7 @@ export function Header() {
 
   useEffect(() => {
     UserApi.getMe()
-      .then((response) => setMe(response.data))
+      .then((me) => setMe(me))
       .catch(() => setHasError(true))
       .finally(() => setIsLoadingMe(false));
   }, []);

src/components/shout/reply-dialog.tsx

@@ -40,7 +40,7 @@ export function ReplyDialog({ children, shoutId }: ReplyDialogProps) {
 
   useEffect(() => {
     UserApi.getMe()
-      .then((response) => setIsAuthenticated(Boolean(response.data)))
+      .then((me) => setIsAuthenticated(Boolean(me)))
       .catch(() => setHasError(true))
       .finally(() => setIsLoading(false));
   }, []);
@@ -55,21 +55,22 @@ export function ReplyDialog({ children, shoutId }: ReplyDialogProps) {
     try {
       const message = event.currentTarget.elements.message.value;
       const files = event.currentTarget.elements.image.files;
-      let imageId = undefined;
+
+      let image;
       if (files?.length) {
-        const formData = new FormData();
-        formData.append("image", files[0]);
-        const image = await MediaApi.uploadImage(formData);
-        imageId = image.data.id;
+        image = await MediaApi.uploadImage(files[0]);
       }
+
       const newShout = await ShoutApi.createShout({
         message,
-        imageId,
+        imageId: image?.id,
       });
+
       await ShoutApi.createReply({
         shoutId,
-        replyId: newShout.data.id,
+        replyId: newShout.id,
       });
+
       setOpen(false);
     } catch (error) {
       console.error(error);

src/pages/feed/feed.tsx

@@ -3,10 +3,14 @@ import { useEffect, useState } from "react";
 import FeedApi from "@/api/feed";
 import { LoadingView } from "@/components/loading";
 import { ShoutList } from "@/components/shout-list";
-import { FeedResponse, Image, User } from "@/types";
+import { Image, Shout, User } from "@/types";
 
 export function Feed() {
-  const [feed, setFeed] = useState<FeedResponse>();
+  const [feed, setFeed] = useState<{
+    shouts: Shout[];
+    images: Image[];
+    users: User[];
+  }>();
   const [hasError, setHasError] = useState(false);
 
   useEffect(() => {
@@ -22,12 +26,9 @@ export function Feed() {
   if (!feed) {
     return <LoadingView />;
   }
-
-  const users = feed.included.filter((u): u is User => u.type === "user");
-  const images = feed.included.filter((i): i is Image => i.type === "image");
   return (
     <div className="w-full max-w-2xl mx-auto flex flex-col justify-center p-6 gap-6">
-      <ShoutList shouts={feed.data} users={users} images={images} />
+      <ShoutList shouts={feed.shouts} users={feed.users} images={feed.images} />
     </div>
   );
 }

src/pages/user-profile/user-profile.tsx

@@ -4,15 +4,16 @@ import { Navigate, useParams } from "react-router";
 import UserApi from "@/api/user";
 import { LoadingSpinner } from "@/components/loading";
 import { ShoutList } from "@/components/shout-list";
-import { UserResponse, UserShoutsResponse } from "@/types";
+import { Image, Shout, User } from "@/types";
 
 import { UserInfo } from "./user-info";
 
 export function UserProfile() {
   const { handle } = useParams<{ handle: string }>();
 
-  const [user, setUser] = useState<UserResponse>();
-  const [userShouts, setUserShouts] = useState<UserShoutsResponse>();
+  const [user, setUser] = useState<User>();
+  const [shouts, setShouts] = useState<Shout[]>();
+  const [images, setImages] = useState<Image[]>([]);
   const [hasError, setHasError] = useState(false);
 
   useEffect(() => {
@@ -21,11 +22,14 @@ export function UserProfile() {
     }
 
     UserApi.getUser(handle)
-      .then((response) => setUser(response))
+      .then((user) => setUser(user))
       .catch(() => setHasError(true));
 
     UserApi.getUserShouts(handle)
-      .then((response) => setUserShouts(response))
+      .then(({ shouts, images }) => {
+        setShouts(shouts);
+        setImages(images);
+      })
       .catch(() => setHasError(true));
   }, [handle]);
 
@@ -36,18 +40,14 @@ export function UserProfile() {
   if (hasError) {
     return <div>An error occurred</div>;
   }
-  if (!user || !userShouts) {
+  if (!user || !shouts) {
     return <LoadingSpinner />;
   }
 
   return (
     <div className="max-w-2xl w-full mx-auto flex flex-col p-6 gap-6">
-      <UserInfo user={user.data} />
-      <ShoutList
-        users={[user.data]}
-        shouts={userShouts.data}
-        images={userShouts.included}
-      />
+      <UserInfo user={user} />
+      <ShoutList users={[user]} shouts={shouts} images={images} />
     </div>
   );
 }