Skip to content

Commit

Permalink
feat: display favorite pictures
Browse files Browse the repository at this point in the history
  • Loading branch information
taga3s committed Jul 23, 2024
1 parent 93d4454 commit 618db7f
Show file tree
Hide file tree
Showing 10 changed files with 142 additions and 4 deletions.
34 changes: 33 additions & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@
"prepare": "husky"
},
"dependencies": {
"hono": "^4.3.6"
"hono": "^4.3.6",
"microcms-js-sdk": "^3.1.2"
},
"devDependencies": {
"@biomejs/biome": "1.7.3",
Expand Down
18 changes: 18 additions & 0 deletions src/api/apiClient.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { Context } from "hono";
import { env } from "hono/adapter";
import { createClient } from "microcms-js-sdk";

const getApiClient = (c: Context) => {
const { MICRO_CMS_SERVICE_DOMAIN, MICRO_CMS_API_KEY } = env<{
MICRO_CMS_SERVICE_DOMAIN: string;
MICRO_CMS_API_KEY: string;
}>(c);
const apiClient = createClient({
serviceDomain: MICRO_CMS_SERVICE_DOMAIN,
apiKey: MICRO_CMS_API_KEY,
});

return apiClient;
};

export { getApiClient };
26 changes: 26 additions & 0 deletions src/api/photos/fetch.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { Context } from "hono";
import { getApiClient } from "../apiClient";

type Response = {
contents: {
id: string;
image: {
url: string;
height: number;
width: number;
};
title: string;
}[];
totalCount: number;
offset: number;
limit: number;
};

const fetchPhotos = async (c: Context) => {
const res = await getApiClient(c).get<Response>({ endpoint: "photos" });
return res.contents.map((content) => {
return { title: content.title, ...content.image };
});
};

export { fetchPhotos };
2 changes: 2 additions & 0 deletions src/api/photos/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export * from "./fetch";
export * from "./model";
8 changes: 8 additions & 0 deletions src/api/photos/model.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
type Photo = {
title: string;
url: string;
height: number;
width: number;
};

export type { Photo };
16 changes: 16 additions & 0 deletions src/components/profile/ProfilePhotos.css.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { css } from "hono/css";

const Photo_Container = css`
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 16px;
margin-top: 16px;
`;

const Photo_Image = css`
max-width: 100%;
border-radius: 8px;
`;

export { Photo_Container, Photo_Image };
25 changes: 25 additions & 0 deletions src/components/profile/ProfilePhotos.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { FC } from "hono/jsx";
import { Photo } from "../../api/photos";
import { Header, Layout } from "./common.css";
import { Photo_Container, Photo_Image } from "./ProfilePhotos.css";

type Props = {
photos: Photo[];
};

const ProfilePhotos: FC<Props> = (props) => {
return (
<section class={Layout}>
<h2 class={Header}>Favorites</h2>
<ul class={Photo_Container}>
{props.photos.map((image) => (
<li>
<img key={image.title} src={image.url} alt={image.title} class={Photo_Image} />
</li>
))}
</ul>
</section>
);
};

export { ProfilePhotos };
10 changes: 9 additions & 1 deletion src/components/profile/ProfilePresenter.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,18 @@
import { FC } from "hono/jsx";
import { ProfileLinks } from "./ProfileLinks";
import { ProfileMain } from "./ProfileMain";
import { Photo } from "../../api/photos/model";
import { ProfilePhotos } from "./ProfilePhotos";

const ProfilePresenter = () => (
type Props = {
photos: Photo[];
};

const ProfilePresenter: FC<Props> = (props) => (
<>
<ProfileMain />
<ProfileLinks />
<ProfilePhotos photos={props.photos} />
</>
);

Expand Down
4 changes: 3 additions & 1 deletion src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { ProfilePresenter } from "./components/profile/ProfilePresenter";
import { Style, css } from "hono/css";
import { jsxRenderer } from "hono/jsx-renderer";
import { Footer } from "./components/Footer";
import { fetchPhotos } from "./api/photos";

type Bindings = {
[key in keyof CloudflareBindings]: CloudflareBindings[key];
Expand Down Expand Up @@ -53,7 +54,8 @@ app.use(
);

app.get("/", async (c) => {
return await c.render(<ProfilePresenter />);
const photos = await fetchPhotos(c);
return await c.render(<ProfilePresenter photos={photos} />);
});

export default app;

0 comments on commit 618db7f

Please sign in to comment.