Step 4: domain entities & DTOs

src/api/auth.ts → src/api/auth/api.ts

@@ -1,6 +1,6 @@
-import { Credentials } from "@/types";
+import { apiClient } from "../client";
 
-import { apiClient } from "./client";
+import { Credentials } from "./dto";
 
 async function login(credentials: Credentials) {
   await apiClient.post("/login", credentials);

src/api/auth/dto.ts

@@ -0,0 +1,4 @@
+export interface Credentials {
+  username: string;
+  password: string;
+}

src/api/auth/index.ts

@@ -0,0 +1 @@
+export { default } from "./api";

src/api/feed/api.ts

@@ -0,0 +1,22 @@
+import { apiClient } from "../client";
+import { ImageDto } from "../media/dto";
+import { dtoToImage } from "../media/transform";
+import { dtoToShout } from "../shout/transform";
+import { UserDto } from "../user/dto";
+import { dtoToUser } from "../user/transform";
+
+import { FeedResponse } from "./dto";
+
+async function getFeed() {
+  const response = await apiClient.get<FeedResponse>("/feed");
+  const shouts = response.data.data.map(dtoToShout);
+  const users = response.data.included
+    .filter((u): u is UserDto => u.type === "user")
+    .map(dtoToUser);
+  const images = response.data.included
+    .filter((i): i is ImageDto => i.type === "image")
+    .map(dtoToImage);
+  return { shouts, users, images };
+}
+
+export default { getFeed };

src/api/feed/dto.ts

@@ -0,0 +1,8 @@
+import { ImageDto } from "../media/dto";
+import { ShoutDto } from "../shout/dto";
+import { UserDto } from "../user/dto";
+
+export interface FeedResponse {
+  data: ShoutDto[];
+  included: (UserDto | ImageDto)[];
+}

src/api/feed/index.ts

@@ -0,0 +1 @@
+export { default } from "./api";

src/api/media/api.ts

@@ -0,0 +1,15 @@
+import { apiClient } from "../client";
+
+import { ImageDto } from "./dto";
+import { dtoToImage } from "./transform";
+
+async function uploadImage(file: File) {
+  const formData = new FormData();
+  formData.append("image", file);
+
+  const response = await apiClient.post<{ data: ImageDto }>("/image", formData);
+  const imageDto = response.data.data;
+  return dtoToImage(imageDto);
+}
+
+export default { uploadImage };

src/api/media/dto.ts

@@ -0,0 +1,7 @@
+export interface ImageDto {
+  id: string;
+  type: "image";
+  attributes: {
+    url: string;
+  };
+}

src/api/media/index.ts

@@ -0,0 +1 @@
+export { default } from "./api";

src/api/media/transform.ts

@@ -0,0 +1,10 @@
+import { Image } from "@/domain";
+
+import { ImageDto } from "./dto";
+
+export function dtoToImage(dto: ImageDto): Image {
+  return {
+    id: dto.id,
+    url: dto.attributes.url,
+  };
+}

src/api/shout/api.ts

@@ -0,0 +1,21 @@
+import { apiClient } from "../client";
+
+import { CreateShoutInput, CreateShoutReplyInput, ShoutDto } from "./dto";
+import { dtoToShout } from "./transform";
+
+async function createShout(input: CreateShoutInput) {
+  const response = await apiClient.post<{ data: ShoutDto }>(`/shout`, input);
+  const shoutDto = response.data.data;
+  return dtoToShout(shoutDto);
+}
+
+async function createReply({ shoutId, replyId }: CreateShoutReplyInput) {
+  const response = await apiClient.post<{ data: ShoutDto }>(
+    `/shout/${shoutId}/reply`,
+    { replyId }
+  );
+  const replyDto = response.data.data;
+  return dtoToShout(replyDto);
+}
+
+export default { createShout, createReply };

src/api/shout/dto.ts

@@ -0,0 +1,25 @@
+export interface ShoutDto {
+  id: string;
+  type: "shout";
+  createdAt: number;
+  attributes: {
+    authorId: string;
+    text: string;
+    likes: number;
+    reshouts: number;
+    imageId?: string;
+  };
+  relationships: {
+    replies: string[];
+    replyTo?: string;
+  };
+}
+export interface CreateShoutInput {
+  message: string;
+  imageId?: string;
+}
+
+export interface CreateShoutReplyInput {
+  shoutId: string;
+  replyId: string;
+}

src/api/shout/index.ts

@@ -0,0 +1 @@
+export { default } from "./api";

src/api/shout/transform.ts

@@ -0,0 +1,16 @@
+import { Shout } from "@/domain";
+
+import { ShoutDto } from "./dto";
+
+export function dtoToShout(shoutDto: ShoutDto): Shout {
+  return {
+    id: shoutDto.id,
+    createdAt: shoutDto.createdAt,
+    authorId: shoutDto.attributes.authorId,
+    imageId: shoutDto.attributes.imageId,
+    likes: shoutDto.attributes.likes,
+    reshouts: shoutDto.attributes.reshouts,
+    text: shoutDto.attributes.text,
+    replies: shoutDto.relationships.replies,
+  };
+}

src/api/user/api.ts

@@ -0,0 +1,29 @@
+import { apiClient } from "../client";
+import { dtoToImage } from "../media/transform";
+import { dtoToShout } from "../shout/transform";
+
+import { MeDto, UserDto, UserShoutsResponse } from "./dto";
+import { dtoToMe, dtoToUser } from "./transform";
+
+async function getMe() {
+  const response = await apiClient.get<{ data: MeDto }>("/me");
+  const meDto = response.data.data;
+  return dtoToMe(meDto);
+}
+
+async function getUser(handle: string) {
+  const response = await apiClient.get<{ data: UserDto }>(`/user/${handle}`);
+  const userDto = response.data.data;
+  return dtoToUser(userDto);
+}
+
+async function getUserShouts(handle: string) {
+  const response = await apiClient.get<UserShoutsResponse>(
+    `/user/${handle}/shouts`
+  );
+  const shouts = response.data.data.map(dtoToShout);
+  const images = response.data.included.map(dtoToImage);
+  return { shouts, images };
+}
+
+export default { getMe, getUser, getUserShouts };

src/api/user/dto.ts

@@ -0,0 +1,22 @@
+import { ImageDto } from "../media/dto";
+import { ShoutDto } from "../shout/dto";
+
+export interface UserDto {
+  id: string;
+  type: "user";
+  attributes: {
+    handle: string;
+    avatar: string;
+    info?: string;
+  };
+  relationships: {
+    followerIds: string[];
+  };
+}
+
+export interface MeDto extends UserDto {}
+
+export interface UserShoutsResponse {
+  data: ShoutDto[];
+  included: ImageDto[];
+}

src/api/user/index.ts

@@ -0,0 +1 @@
+export { default } from "./api";

src/api/user/transform.ts

@@ -0,0 +1,17 @@
+import { Me, User } from "@/domain";
+
+import { MeDto, UserDto } from "./dto";
+
+export function dtoToUser(dto: UserDto): User {
+  return {
+    id: dto.id,
+    avatar: dto.attributes.avatar,
+    handle: dto.attributes.handle,
+    info: dto.attributes.info,
+    followerIds: dto.relationships.followerIds,
+  };
+}
+
+export function dtoToMe(dto: MeDto): Me {
+  return dtoToUser(dto);
+}

src/components/header/header.tsx

@@ -5,7 +5,7 @@ import AuthApi from "@/api/auth";
 import UserApi from "@/api/user";
 import { LoginDialog } from "@/components/login-dialog";
 import { Button } from "@/components/ui/button";
-import { Me } from "@/types";
+import { Me } from "@/domain";
 
 export function Header() {
   const [isLoadingMe, setIsLoadingMe] = useState(true);
@@ -41,16 +41,9 @@ export function Header() {
 
   return (
     <div className="w-full flex justify-between p-2">
-      <Link
-        className="flex items-center gap-2"
-        to={`/user/${me.attributes.handle}`}
-      >
-        <img
-          className="w-8 h-8 rounded-full"
-          src={me.attributes.avatar}
-          alt={me.attributes.handle}
-        />
-        <span className="font-semibold">{`@${me.attributes.handle}`}</span>
+      <Link className="flex items-center gap-2" to={`/user/${me.handle}`}>
+        <img className="w-8 h-8 rounded-full" src={me.avatar} alt={me.handle} />
+        <span className="font-semibold">{`@${me.handle}`}</span>
       </Link>
       <Button size="sm" onClick={logout} disabled={isLoadingLogout}>
         Logout

src/components/shout-list/shout-list.tsx

@@ -1,8 +1,8 @@
 import { Shout } from "@/components/shout";
-import { User, Shout as TShout, Image } from "@/types";
+import { Image, Shout as IShout, User } from "@/domain";
 
 interface ShoutListProps {
-  shouts: TShout[];
+  shouts: IShout[];
   images: Image[];
   users: User[];
 }
@@ -11,9 +11,9 @@ export function ShoutList({ shouts, users, images }: ShoutListProps) {
   return (
     <ul className="flex flex-col gap-4 items-center">
       {shouts.map((shout) => {
-        const author = users.find((u) => u.id === shout.attributes.authorId);
-        const image = shout.attributes.imageId
-          ? images.find((i) => i.id === shout.attributes.imageId)
+        const author = users.find((u) => u.id === shout.authorId);
+        const image = shout.imageId
+          ? images.find((i) => i.id === shout.imageId)
           : undefined;
         return (
           <li key={shout.id} className="max-w-sm w-full">