canvasを使わない（useImage->getImageUrl, Separator）

tmikada · Mar 26, 2024 · 0618fc6 · 0618fc6
1 parent 5a21760
commit 0618fc6
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 48 deletions.
diff --git a/workspaces/app/src/features/book/components/BookCard.tsx b/workspaces/app/src/features/book/components/BookCard.tsx
@@ -5,7 +5,8 @@ import { Flex } from '../../../foundation/components/Flex';
 import { Image } from '../../../foundation/components/Image';
 import { Link } from 'react-router-dom';
 import { Text } from '../../../foundation/components/Text';
-import { useImage } from '../../../foundation/hooks/useImage';
+// import { useImage } from '../../../foundation/hooks/useImage';
+import { getImageUrl } from '../../../lib/image/getImageUrl';
 import { Color, Radius, Space, Typography } from '../../../foundation/styles/variables';
 // import { useBook } from '../hooks/useBook';
 
@@ -54,8 +55,8 @@ type Props = {
 
 const BookCard: React.FC<Props> = ({ book }) => {
 
-  const imageUrl = useImage({ height: 128, imageId: book.image.id, width: 192 });
-  const authorImageUrl = useImage({ height: 32, imageId: book.author.image.id, width: 32 });
+  const imageUrl = getImageUrl({ format: 'jpg', height: 128, imageId: book.image.id, width: 192 });
+  const authorImageUrl = getImageUrl({ format: 'jpg',height: 32, imageId: book.author.image.id, width: 32 });
 
   return (
     <_Wrapper to={`/books/${book.id}`}>

diff --git a/workspaces/app/src/features/book/components/BookListItem.tsx b/workspaces/app/src/features/book/components/BookListItem.tsx
@@ -7,9 +7,10 @@ import { Link } from 'react-router-dom';
 import { Separator } from '../../../foundation/components/Separator';
 import { Spacer } from '../../../foundation/components/Spacer';
 import { Text } from '../../../foundation/components/Text';
-import { useImage } from '../../../foundation/hooks/useImage';
+// import { useImage } from '../../../foundation/hooks/useImage';
 import { Color, Radius, Space, Typography } from '../../../foundation/styles/variables';
-import { useBook } from '../hooks/useBook';
+// import { useBook } from '../hooks/useBook';
+import { getImageUrl } from '../../../lib/image/getImageUrl';
 
 const _Wrapper = styled.li`
   width: 100%;
@@ -48,7 +49,7 @@ type Props = {
 export const BookListItem: React.FC<Props> = ({ book }) => {
   // const { data: book } = useBook({ params: { bookId } });
 
-  const imageUrl = useImage({ height: 64, imageId: book.image.id, width: 64 });
+  const imageUrl = getImageUrl({ format: 'jpg', height: 64, imageId: book.image.id, width: 64 });
 
   return (
     <_Wrapper>

diff --git a/workspaces/app/src/features/episode/components/EpisodeListItem.tsx b/workspaces/app/src/features/episode/components/EpisodeListItem.tsx
@@ -7,7 +7,8 @@ import { Link } from 'react-router-dom';
 import { Separator } from '../../../foundation/components/Separator';
 import { Spacer } from '../../../foundation/components/Spacer';
 import { Text } from '../../../foundation/components/Text';
-import { useImage } from '../../../foundation/hooks/useImage';
+// import { useImage } from '../../../foundation/hooks/useImage';
+import { getImageUrl } from '../../../lib/image/getImageUrl';
 import { Color, Radius, Space, Typography } from '../../../foundation/styles/variables';
 import { useEpisode } from '../hooks/useEpisode';
 
@@ -35,7 +36,7 @@ type Props = {
 export const EpisodeListItem: React.FC<Props> = ({ bookId, episodeId }) => {
   const { data: episode } = useEpisode({ params: { episodeId } });
 
-  const imageUrl = useImage({ height: 96, imageId: episode.image.id, width: 96 });
+  const imageUrl = getImageUrl({ format: 'jpg', height: 96, imageId: episode.image.id, width: 96 });
 
   return (
     <_Wrapper>

diff --git a/workspaces/app/src/features/feature/components/FeatureCard.tsx b/workspaces/app/src/features/feature/components/FeatureCard.tsx
@@ -5,7 +5,8 @@ import { Flex } from '../../../foundation/components/Flex';
 import { Image } from '../../../foundation/components/Image';
 import { Link } from 'react-router-dom';
 import { Text } from '../../../foundation/components/Text';
-import { useImage } from '../../../foundation/hooks/useImage';
+// import { useImage } from '../../../foundation/hooks/useImage';
+import { getImageUrl } from '../../../lib/image/getImageUrl';
 import { Color, Radius, Space, Typography } from '../../../foundation/styles/variables';
 
 const _Wrapper = styled(Link)`
@@ -63,8 +64,8 @@ type Props = {
 
 const FeatureCard: React.FC<Props> = ({ book }) => {
 
-  const imageUrl = useImage({ height: 96, imageId: book.image.id, width: 96 });
-  const authorImageUrl = useImage({ height: 32, imageId: book.author.image.id, width: 32 });
+  const imageUrl = getImageUrl({ format:'jpg', height: 96, imageId: book.image.id, width: 96 });
+  const authorImageUrl = getImageUrl({ format: 'jpg', height: 32, imageId: book.author.image.id, width: 32 });
 
   return (
     <_Wrapper to={`/books/${book.id}`}>

diff --git a/workspaces/app/src/features/ranking/components/RankingCard.tsx b/workspaces/app/src/features/ranking/components/RankingCard.tsx
@@ -10,7 +10,8 @@ import { Link } from 'react-router-dom';
 import { Separator } from '../../../foundation/components/Separator';
 import { Spacer } from '../../../foundation/components/Spacer';
 import { Text } from '../../../foundation/components/Text';
-import { useImage } from '../../../foundation/hooks/useImage';
+// import { useImage } from '../../../foundation/hooks/useImage';
+import { getImageUrl } from '../../../lib/image/getImageUrl';
 import { Color, Radius, Space, Typography } from '../../../foundation/styles/variables';
 // import { useBook } from '../../book/hooks/useBook';
 
@@ -59,8 +60,8 @@ type Props = {
 
 const RankingCard: React.FC<Props> = ({ book }) => {
 
-  const imageUrl = useImage({ height: 96, imageId: book.image.id, width: 96 });
-  const authorImageUrl = useImage({ height: 32, imageId: book.author.image.id, width: 32 });
+  const imageUrl = getImageUrl({ format: 'jpg', height: 96, imageId: book.image.id, width: 96 });
+  const authorImageUrl = getImageUrl({ format: 'jpg', height: 32, imageId: book.author.image.id, width: 32 });
 
   return (
     <_Wrapper>

diff --git a/workspaces/app/src/foundation/components/Separator.tsx b/workspaces/app/src/foundation/components/Separator.tsx
@@ -1,4 +1,3 @@
-import { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 
 import { Color } from '../styles/variables';
@@ -11,39 +10,14 @@ const _Separator = styled.img`
   display: block;
   width: 100%;
   height: 1px;
+  background-color: ${Color.MONO_30};
 `;
 
 export const Separator: React.FC = () => {
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const [imgUrl, setImgUrl] = useState<string | null>(null);
-
-  useEffect(() => {
-    const width = wrapperRef.current?.clientWidth;
-
-    const canvas = document.createElement('canvas');
-    canvas.width = width ?? 0;
-    canvas.height = 1;
-
-    const ctx = canvas.getContext('2d');
-
-    if (ctx == null) {
-      return;
-    }
-
-    ctx.moveTo(0, 0);
-    ctx.lineTo(width ?? 0, 0);
-
-    ctx.strokeStyle = Color.MONO_30;
-    ctx.lineWidth = 1;
-
-    ctx.stroke();
-
-    setImgUrl(canvas.toDataURL('image/png'));
-  }, []);
 
   return (
-    <_Wrapper ref={wrapperRef}>
-      {imgUrl != null ? <_Separator aria-hidden={true} height={1} src={imgUrl} width="100%" /> : null}
+    <_Wrapper>
+       <_Separator aria-hidden={true} />
     </_Wrapper>
   );
 };
diff --git a/workspaces/app/src/pages/AuthorDetailPage/index.tsx b/workspaces/app/src/pages/AuthorDetailPage/index.tsx
@@ -12,7 +12,8 @@ import { Image } from '../../foundation/components/Image';
 import { Separator } from '../../foundation/components/Separator';
 import { Spacer } from '../../foundation/components/Spacer';
 import { Text } from '../../foundation/components/Text';
-import { useImage } from '../../foundation/hooks/useImage';
+// import { useImage } from '../../foundation/hooks/useImage';
+import { getImageUrl } from '../../lib/image/getImageUrl';
 import { Color, Space, Typography } from '../../foundation/styles/variables';
 
 const _HeadingWrapper = styled.section`
@@ -37,7 +38,7 @@ const AuthorDetailPage: React.FC = () => {
 
   const { data: author, isLoading } = useAuthor({ params: { authorId } });
 
-  const imageUrl = useImage({ height: 128, imageId: author.image.id, width: 128 });
+  const imageUrl = getImageUrl({ format: 'jpg', height: 128, imageId: author.image.id, width: 128 });
   const bookListA11yId = useId();
 
   if(isLoading) {

diff --git a/workspaces/app/src/pages/BookDetailPage/index.tsx b/workspaces/app/src/pages/BookDetailPage/index.tsx
@@ -16,7 +16,8 @@ import { Link } from 'react-router-dom';
 import { Separator } from '../../foundation/components/Separator';
 import { Spacer } from '../../foundation/components/Spacer';
 import { Text } from '../../foundation/components/Text';
-import { useImage } from '../../foundation/hooks/useImage';
+// import { useImage } from '../../foundation/hooks/useImage';
+import { getImageUrl } from '../../lib/image/getImageUrl';
 import { Color, Space, Typography } from '../../foundation/styles/variables';
 
 import { BottomNavigator } from './internal/BottomNavigator';
@@ -54,8 +55,8 @@ const BookDetailPage: React.FC = () => {
 
   const [isFavorite, toggleFavorite] = useAtom(FavoriteBookAtomFamily(bookId));
 
-  const bookImageUrl = useImage({ height: 256, imageId: book.image.id, width: 192 });
-  const auhtorImageUrl = useImage({ height: 32, imageId: book.author.image.id, width: 32 });
+  const bookImageUrl = getImageUrl({ format: 'jpg', height: 256, imageId: book.image.id, width: 192 });
+  const auhtorImageUrl = getImageUrl({ format: 'jpg', height: 32, imageId: book.author.image.id, width: 32 });
 
   const handleFavClick = useCallback(() => {
     toggleFavorite();