feat: 差分を表示するようにしました (#10)

* feat: pdf を表示するコンポーネントを作成しました

* chore: pdf を見やすくしました

* feat: 差分を表示するようにしました

---------

Co-authored-by: Keisuke Ishigami <[email protected]>

next.config.js

@@ -2,6 +2,11 @@
 const nextConfig = {
   reactStrictMode: true,
   transpilePackages: ['@recordex/smartcontract'],
+  // 参考: https://github.com/wojtekmaj/react-pdf?tab=readme-ov-file#nextjs
+  webpack: (config) => {
+    config.resolve.alias.canvas = false;
+    return config;
+  },
 };
 
 module.exports = nextConfig;

package.json

@@ -30,11 +30,13 @@
     "jotai": "^2.5.0",
     "next": "14.0.3",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-pdf": "^7.7.0"
   },
   "devDependencies": {
     "@types/google.maps": "^3.54.5",
     "@types/node": "^20",
+    "@types/pdfjs-dist": "^2.10.378",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@typescript-eslint/eslint-plugin": "^6.9.0",
@@ -45,8 +47,10 @@
     "eslint-plugin-unused-imports": "^3.0.0",
     "husky": "^8.0.3",
     "lint-staged": "^15.0.2",
+    "pdfjs-dist": "^4.0.379",
     "prettier": "^3.0.3",
-    "typescript": "^5"
+    "typescript": "^5",
+    "webpack": "^5.90.1"
   },
   "lint-staged": {
     "src/**/*": "npm run fix"

public/cmaps/CNS2-V.bcmap

@@ -0,0 +1,3 @@
+�RCopyright 1990-2009 Adobe Systems Incorporated.
+All rights reserved.
+See ./LICENSE�CNS2-H

public/cmaps/ETenms-B5-H.bcmap

@@ -0,0 +1,3 @@
+�RCopyright 1990-2009 Adobe Systems Incorporated.
+All rights reserved.
+See ./LICENSE�	ETen-B5-H`
 ^

public/cmaps/GB-H.bcmap

@@ -0,0 +1,4 @@
+�RCopyright 1990-2009 Adobe Systems Incorporated.
+All rights reserved.
+See ./LICENSE

!!��]aX!!]`�21�>	�p�z�$]��"R�d�-U�7�*�4�%�+ �Z �{�/�%�<�9K�b�1]�.�"��`]�,�"]�
+�"]�h�"]�F�"]�$�"]��"]�`�"]�>�"]��"]�z�"]�X�"]�6�"]��"]�r�"]�P�"]�.�"]��"]�j�"]�H�"]�&�"]��"]�b�"]�@�"]��"]�|�"]�Z�"]�8�"]��"]�t�"]�R�"]�0�"]��"]�l�"]�J�"]�(�"]��"]�d�"]�B�"]� �"X�~�']�W�"]�5�"]��"]�q�"]�O�"]�-�"]��"]�i�"]�G�"]�%�"]��"]�a�"]�?�"]��"]�{�"]�Y�"]�7�"]��"]�s�"]�Q�"]�/�"]��"]�k�"]�I�"]�'�"]��"]�c�"]�A�"]��"]�}�"]�[�"]�9

public/cmaps/LICENSE

@@ -0,0 +1,36 @@
+%%Copyright: -----------------------------------------------------------
+%%Copyright: Copyright 1990-2009 Adobe Systems Incorporated.
+%%Copyright: All rights reserved.
+%%Copyright:
+%%Copyright: Redistribution and use in source and binary forms, with or
+%%Copyright: without modification, are permitted provided that the
+%%Copyright: following conditions are met:
+%%Copyright:
+%%Copyright: Redistributions of source code must retain the above
+%%Copyright: copyright notice, this list of conditions and the following
+%%Copyright: disclaimer.
+%%Copyright:
+%%Copyright: Redistributions in binary form must reproduce the above
+%%Copyright: copyright notice, this list of conditions and the following
+%%Copyright: disclaimer in the documentation and/or other materials
+%%Copyright: provided with the distribution. 
+%%Copyright:
+%%Copyright: Neither the name of Adobe Systems Incorporated nor the names
+%%Copyright: of its contributors may be used to endorse or promote
+%%Copyright: products derived from this software without specific prior
+%%Copyright: written permission. 
+%%Copyright:
+%%Copyright: THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND
+%%Copyright: CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES,
+%%Copyright: INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+%%Copyright: MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+%%Copyright: DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR
+%%Copyright: CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+%%Copyright: SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT
+%%Copyright: NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+%%Copyright: LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
+%%Copyright: HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+%%Copyright: CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
+%%Copyright: OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+%%Copyright: SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+%%Copyright: -----------------------------------------------------------

src/app/_components/PDFViewer.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { useState } from 'react';
+import { pdfjs, Document, Page } from 'react-pdf';
+import { Button } from '@mui/material';
+import 'react-pdf/dist/Page/AnnotationLayer.css';
+import 'react-pdf/dist/Page/TextLayer.css';
+
+// PDF.jsのワーカーの設定
+pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;
+
+interface PDFViewerProps {
+  file: string;
+}
+
+const options = {
+  cMapUrl: '/cmaps/',
+  cMapPacked: true,
+};
+
+const PDFViewer: React.FC<PDFViewerProps> = ({ file }) => {
+  const [numPages, setNumPages] = useState<number | null>(null);
+  const [pageNumber, setPageNumber] = useState(1); // 現在のページ番号
+
+  const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => {
+    setNumPages(numPages);
+  };
+
+  const nextPage = () => {
+    if (numPages === null) return; // numPagesがnullなら何もしない
+    setPageNumber((prevPageNumber) =>
+      prevPageNumber < numPages ? prevPageNumber + 1 : prevPageNumber,
+    );
+  };
+
+  const previousPage = () => {
+    if (numPages === null) return; // numPagesがnullなら何もしない
+    setPageNumber((prevPageNumber) =>
+      prevPageNumber > 1 ? prevPageNumber - 1 : prevPageNumber,
+    );
+  };
+
+  return (
+    <>
+      <Button
+        onClick={previousPage}
+        disabled={pageNumber <= 1}
+        variant='outlined'
+        sx={{ mr: 4 }}
+      >
+        前のページ
+      </Button>
+      ページ {pageNumber} / {numPages}
+      <Button
+        onClick={nextPage}
+        disabled={pageNumber >= (numPages ?? 0)}
+        variant='outlined'
+        sx={{ ml: 4 }}
+      >
+        次のページ
+      </Button>
+      <Document
+        file={file}
+        onLoadSuccess={onDocumentLoadSuccess}
+        options={options}
+      >
+        <Page pageNumber={pageNumber} />
+      </Document>
+    </>
+  );
+};
+
+export default PDFViewer;

src/app/_components/RecordFileInput.tsx

@@ -11,9 +11,16 @@ import FileUploadButton from '@/app/_components/FileUpload';
 import { useState } from 'react';
 import useUser from '@/app/_hooks/useUser';
 import { useRouter } from 'next/navigation';
-import { createRecord } from '@/app/files/record/_hooks/createRecord';
+import {
+  createRecord,
+  PostRecordResponse,
+} from '@/app/files/record/_hooks/createRecord';
+import PDFViewer from '@/app/_components/PDFViewer';
+import Carousel from '@/app/_components/Carousel';
 
 const RecordFileInput = () => {
+  const [activeStep, setActiveStep] = useState(0);
+
   const [isLoading, setIsLoading] = useState(false);
 
   const [blob, setBlob] = useState<File>();
@@ -22,14 +29,32 @@ const RecordFileInput = () => {
 
   const router = useRouter();
 
+  const onCheckDiffPDF = async () => {
+    if (!token || !blob) {
+      return;
+    }
+    setIsLoading(true);
+    setTimeout(() => {
+      setIsLoading(false);
+      setActiveStep(activeStep + 1);
+    }, 2000);
+  };
+
   const onRecordClick = async () => {
     if (!token || !blob) {
       return;
     }
     console.log(blob);
     setIsLoading(true);
-    const response = await createRecord(token, blob);
-    console.log(response);
+    let response: PostRecordResponse;
+    try {
+      response = await createRecord(token, blob);
+      console.log(response);
+    } catch (e) {
+      setIsLoading(false);
+      console.error(e);
+      return;
+    }
     setIsLoading(false);
     router.push('/');
   };
@@ -45,39 +70,67 @@ const RecordFileInput = () => {
         <Typography variant='h2' sx={{ mb: 4 }}>
           記録の作成
         </Typography>
-        <Box sx={{ width: '100%', p: 1, boxSizing: 'border-box' }}>
-          <Typography variant='h3' gutterBottom>
-            ファイルの選択
-          </Typography>
-          <Stack
-            sx={{
-              background: mainTheme.palette.primary.light,
-              height: 400,
-              justifyContent: 'center',
-            }}
-          >
-            <FileUploadButton
-              label='ここからファイルを選択してください'
-              file={blob}
-              setFile={(blob) => setBlob(blob)}
-            />
-          </Stack>
-          <Box m={1}>
-            <Typography>・1度に記録できるファイルは1つのみです</Typography>
-          </Box>
-        </Box>
-        <Stack direction='row' justifyContent='space-between'>
-          <Button
-            variant='contained'
-            color='secondary'
-            sx={{ mt: 4 }}
-            onClick={onRecordClick}
-            disabled={!blob}
-          >
-            {/*TODO ここを差分を表示する。にする*/}
-            記録する
-          </Button>
+        <Stack direction='row' justifyContent='space-between' mb={4}>
+          <div>
+            {activeStep !== 0 && (
+              <Button
+                variant='contained'
+                sx={{ mt: 4 }}
+                onClick={() => setActiveStep(activeStep - 1)}
+              >
+                前へ
+              </Button>
+            )}
+          </div>
+          <div>
+            {activeStep !== 1 && (
+              <Button
+                variant='contained'
+                sx={{ mt: 4 }}
+                onClick={onCheckDiffPDF}
+                disabled={!blob}
+              >
+                差分を確認する
+              </Button>
+            )}
+            {activeStep === 1 && (
+              <Button
+                variant='contained'
+                color='secondary'
+                sx={{ mt: 4 }}
+                onClick={onRecordClick}
+              >
+                記録する
+              </Button>
+            )}
+          </div>
         </Stack>
+        <Carousel pageIndex={activeStep}>
+          <Box sx={{ width: '100%', p: 1, boxSizing: 'border-box' }}>
+            <Typography variant='h3' gutterBottom>
+              ファイルの選択
+            </Typography>
+            <Stack
+              sx={{
+                background: mainTheme.palette.primary.light,
+                height: 400,
+                justifyContent: 'center',
+              }}
+            >
+              <FileUploadButton
+                label='ここからファイルを選択してください'
+                file={blob}
+                setFile={(blob) => setBlob(blob)}
+              />
+            </Stack>
+            <Box m={1}>
+              <Typography>・1度に記録できるファイルは1つのみです</Typography>
+            </Box>
+          </Box>
+          <Box sx={{ width: '100%', p: 1, boxSizing: 'border-box' }}>
+            <PDFViewer file='https://storage.googleapis.com/recordex/diff.pdf' />
+          </Box>
+        </Carousel>
       </Box>
     </Paper>
   );

src/app/files/record/_hooks/createRecord.ts

@@ -47,15 +47,24 @@ export const createRecord = async (
       ),
     );
   }
-  // ブロックチェーンにファイルのハッシュ値を記録
-  const addFile = await recordContract.addFile(
-    file.name,
-    fileHash,
-    recordedNewestFileHash,
-  );
-  console.log(
-    `トランザクションの送信に成功しました。network -> ${signer.provider._network.name}, transactionHash -> ${addFile.hash})`,
-  );
+  let addFile: ethers.ContractTransactionResponse;
+  try {
+    // ブロックチェーンにファイルのハッシュ値を記録
+    addFile = await recordContract.addFile(
+      file.name,
+      fileHash,
+      recordedNewestFileHash,
+    );
+    console.log(
+      `recordContract へのトランザクションの送信に成功しました。network -> ${signer.provider._network.name}, transactionHash -> ${addFile.hash})`,
+    );
+  } catch (e) {
+    return Promise.reject(
+      new Error(
+        `recordContract.addFile 関数を実行中にエラーが発生しました。: ${e}`,
+      ),
+    );
+  }
   const formData = new FormData();
   // ファイルとトランザクションハッシュを FormData に追加
   formData.append('file', file);
@@ -71,7 +80,7 @@ export const createRecord = async (
 
 type PostRecordRequest = FormData;
 
-type PostRecordResponse = {
+export type PostRecordResponse = {
   file_name: string;
   transaction_hash: string;
 };