閲覧モードを作りました

package.json

@@ -15,6 +15,7 @@
     "@mui/icons-material": "^5.14.11",
     "@mui/material": "^5.14.10",
     "create-vite": "^5.0.0",
+    "dompurify": "^3.0.8",
     "firebase": "^10.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -26,6 +27,7 @@
     "vite-plugin-svgr": "^4.2.0"
   },
   "devDependencies": {
+    "@types/dompurify": "^3.0.5",
     "@types/jest": "^29.5.11",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",

src/App.tsx

@@ -10,6 +10,7 @@ import Sidebar from "./pages/Sidebar";
 import MenuIcon from "@mui/icons-material/Menu";
 import { IconButton } from "@mui/material";
 import { useState } from "react";
+import { ViewMemo } from "./services/ViewMemo";
 
 
 function App() {
@@ -31,6 +32,7 @@ function App() {
             <Route path="/" element={<Home />} />
             <Route path="/memolist" element={<MemoList />} />
             <Route path="/memo/:id?" element={<Memo />} />
+            <Route path="/view/:id" element={<ViewMemo />} />
           </Routes>
         </div>
         <IconButton className="fixedIconButton" onClick={handleSidebarOpen}>

src/pages/Memo.tsx

@@ -2,15 +2,14 @@ import { Box, Button, Grid, TextField, Typography } from "@mui/material";
 import { userAtom } from "../states/userAtom";
 import { useRecoilState, useSetRecoilState } from "recoil";
 import { saveMemo } from "../services/saveMemo";
-
 import { messageAtom } from "../states/messageAtom";
 import { useNavigate, useParams } from "react-router-dom";
 import { searchMemoById } from "../services/searchMemo";
 import { exceptionMessage, successMessage } from "../utils/messages";
 import ReactQuill from 'react-quill';
 import 'react-quill/dist/quill.snow.css';
 import './toolbar.css';
-import React, { useEffect, useState } from 'react';//suzu
+import { useEffect, useState } from 'react';//suzu
 import { WithContext as ReactTags } from 'react-tag-input';//suzu
 
 
@@ -117,8 +116,6 @@ export function Memo(): JSX.Element {
     get();
   }, [id, loginUser, setMessageAtom]);
 
-
-
   return (
     <>
     <Box sx={{ display: "flex" }}>
@@ -144,7 +141,7 @@ export function Memo(): JSX.Element {
               <Typography variant="subtitle1" gutterBottom>
                 Content
               </Typography>
-              <ReactQuill //リッチテキストエディタQuillに変更
+              <ReactQuill //TextFieldからリッチテキストエディタQuillに変更
                 className="react-quill-toolbar"
                 value={content}
                 onChange={setContent}

src/pages/MemoList.tsx

@@ -29,8 +29,7 @@ import { messageAtom } from "../states/messageAtom";
 import { SimpleDialog } from "../components/SimpleDialog";
 import { exceptionMessage, successMessage } from "../utils/messages";
 import infoxLogoset from "/infox_logo_typo.svg";
-
-
+import VisibilityIcon from '@mui/icons-material/Visibility';
 
 export function MemoList(): JSX.Element {
   const [loginUser] = useRecoilState(userAtom);
@@ -243,15 +242,24 @@ export function MemoList(): JSX.Element {
             key={memo.id}
             sx={{ cursor: "pointer" }}
             secondaryAction={
-              <IconButton
-                aria-label="delete"
-                onClick={() => {
-                  setSelectedMemoId(memo.id);
-                  setOpenDialog(true);
-                }}
-              >
-                <Delete />
-              </IconButton>
+              <>
+                {/* 新しい閲覧アイコンボタン */}
+                <IconButton
+                  aria-label="view"
+                  onClick={() => memo.id && navigate(`/view/${memo.id}`)}
+                >
+                  <VisibilityIcon />
+                </IconButton>
+                <IconButton
+                  aria-label="delete"
+                  onClick={() => {
+                    setSelectedMemoId(memo.id);
+                    setOpenDialog(true);
+                  }}
+                >
+                  <Delete />
+                </IconButton>
+              </>
             }
           >
             <ListItemText
@@ -287,7 +295,7 @@ export function MemoList(): JSX.Element {
             />
           </ListItem>
         );})}
-      </Box>
+      </Box>      
       <SimpleDialog
         open={openDialog}
         handleClose={() => setOpenDialog(false)}

src/services/ViewMemo.tsx

@@ -0,0 +1,51 @@
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { Box, Typography } from "@mui/material";
+import { searchMemoById } from "../services/searchMemo";
+import { useRecoilValue } from 'recoil';
+import { userAtom } from '../states/userAtom';
+import { Memo } from "../services/memoType";
+import DOMPurify from 'dompurify';
+import 'react-quill/dist/quill.snow.css';
+import './check.css';
+
+export function ViewMemo(): JSX.Element {
+  const { id } = useParams();
+  const loginUser = useRecoilValue(userAtom);
+  const [memo, setMemo] = useState<Memo | null>(null);
+  const safeContent = memo ? DOMPurify.sanitize(memo.content) : "";
+
+  useEffect(() => {
+    const fetchMemo = async () => {
+      if (id && loginUser.userId) {
+        try {
+          const fetchedMemo = await searchMemoById(id, loginUser);
+          if (fetchedMemo) {
+            setMemo(fetchedMemo);
+          } else {
+            setMemo(null);
+          }
+        } catch (error) {
+          console.error("Error fetching memo:", error);
+          setMemo(null);
+        }
+      }
+    };
+
+    fetchMemo();
+  }, [id, loginUser]);
+
+  if (!memo) {
+    return <Typography>Loading...</Typography>;
+  }
+
+  return (
+    <Box sx={{ padding: "20px" }}>
+      <Typography variant="h2">{memo.title}</Typography>
+      <Box sx={{ marginTop: "20px" }}>
+        <div dangerouslySetInnerHTML={{ __html: safeContent }} />
+        {/* タグや作成日時など、他の情報もここに表示できるよ */}
+      </Box>
+    </Box>
+  );
+}

src/services/check.css

@@ -0,0 +1,15 @@
+ul[data-checked="true"] li::before {
+	content: '✔'; /* チェックマーク */
+	color: green; /* 色を緑に */
+	margin-right: 0.5em; /* 右にマージンを設定 */
+  }
+
+  ul[data-checked="false"] li::before {
+	content: '✘'; /* バツマーク */
+	color: red; /* 色を赤に */
+	margin-right: 0.5em; /* 右にマージンを設定 */
+  }
+
+
+
+

tsconfig.json

@@ -6,6 +6,8 @@
     "module": "ESNext",
     "skipLibCheck": true,
     "types": [ "node", "jest", "@testing-library/jest-dom", "vite-plugin-svgr/client"],
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
 
     /* Bundler mode */
     "moduleResolution": "node",