Markdwon形式のメモ管理（複数管理　第三回）

データ管理

「Markdwon形式のメモ管理」の第三回目です。

前回は、ホームページでMarkdownのデータを複数取得し、その中から選択したMarkdownのデータを表示するページを作成しました。

今回は表示のページで表示と編集（エディット）を切り替えて画面を表示できるようにします。

前回の内容は以下を参照してください。

Markdwon形式のメモ管理（複数管理　第ニ回）

今回の手順は以下のとおりです。

目次

  1. Page1Page改修
  2. MarkdownTemplate改修
    3. 　
  3. サブナビゲーションの部品化
    1. ファイル作成
    2. SubHeaderNavigationのコーディング
    4. 　
  4. HeaderNavigationの改修
    5. 　
  5. EditTemplatの改修
    6. 　
  6. HomeTemplateの改修
  7. 画面確認
  8. まとめ

Page1Page改修

Page1Pageを改修します。

表示とエディットで分けていたページを一つにします。

Material-UI(MUI)のテーマThemeProviderをテンプレートから移動しました。

このためデータ取得用のAPIをこのファイルに移動します。

また、表示用と編集用のモードの管理と、Markdownのデータを保持をuseStateを使います。

モードによってテンプレートの切り替えを行います。

    
import { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import axios from "axios";

import { createTheme, ThemeProvider } from "@mui/material";

import MarkDownTemplate from "../template/MarkdownTemplate";
import EditTemplate from "../template/EditTemplate";

export default function Page1Page() {

  const darkTheme = createTheme({
    palette: {
      mode: "dark",
      primary: {
        main: "#1976d2"
      }
    }
  });

  const [markdown, setMarkdown] = useState([]);
  const [editMode, setEditMode] = useState(false);

  const location = useLocation();

  useEffect(() => {
    axios.get("http://localhost:5000/markdown" + location.pathname)
      .then(res => {
        setMarkdown(res.data);
      })
  }, [])

  const onClickMode = () => { setEditMode(!editMode) }

  console.log('MODE' + editMode);
  return (
    <ThemeProvider theme={darkTheme}>
      {editMode ?
        <EditTemplate markdown={markdown} setMarkdown={setMarkdown} editMode={editMode} onClickMode={onClickMode} /> :
        <MarkDownTemplate markdown={markdown} setMarkdown={setMarkdown} editMode={editMode} onClickMode={onClickMode} />}
    </ThemeProvider>
  );
}

MarkdownTemplate改修

MarkdownTemplate改修を改修します。

    
import ReactMarkdown from "react-markdown";
import remarkGfm from 'remark-gfm';

import {
  AppBar,
  Box,
  Container,
  Drawer,
} from "@mui/material";

import HeaderNavigation from "../organisms/HeaderNavigation";
import SubHeaderNavigation from "../organisms/SubHeaderNavigation";

export default function MarkDownTemplate(props) {
  const {markdown, setMarkdown, editMode, onClickMode} = props;
  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        height: "100vh"
      }}
    >
      <HeaderNavigation />
      <SubHeaderNavigation markdown={markdown} setMarkdown={setMarkdown} editMode={editMode} onClickMode={onClickMode} />
      <Drawer></Drawer>
      <Box component="main" >
        <Box
          sx={{
            display: "flex",
            flexDirection: "row"
          }}
        >
          <Container maxWidth="xl">
            <ReactMarkdown remarkPlugins={[remarkGfm]} styled={{ width: "100%" }}>{markdown.body}</ReactMarkdown>
          </Container >
        </Box>
      </Box>
    </Box>
  );
}

SubHeaderNavigationの部品を新しく作成しました。

propsを引数で受け取ることで呼出し側（親コンポーネント）から引数を受け取ります。

サブナビゲーションの部品化

サブナビゲーションの部品化します。

ファイル作成

「organisms」配下に「HeaderNavigation」ファイルをを作成します。

    
project/
　┗ web/
　　　┣ Dockerfile
　　　┗ src/
　　　　　┗ react-project/
　　　　　　　┗ src/
　　　　　　　　　┣ organisms/
　　　　　　　　　┃　┣ HeaderNavigation.js
　　　　　　　　　┃　┗ SubHeaderNavigation.js
　　　　　　　　　┣ pages/
　　　　　　　　　┃　┣ HomePage.js
　　　　　　　　　┃　┣ Page1Page.js
　　　　　　　　　┃　┗ P1ge2Page.js
　　　　　　　　　┣ template/
　　　　　　　　　┃　┗ HomeTemplate.js
　　　　　　　　　┃　┗ MarkdownTemplate.js
　　　　　　　　　┃　┗ EditTemplate.js
　　　　　　　　　┣ component/
　　　　　　　　　┗ App.js

以上でディレクトリとファイルの作成は終了です。

SubHeaderNavigationのコーディング

  1.     
  2. import axios from "axios";
  4. import {
  5.   BottomNavigation,
  6.   BottomNavigationAction,
  7.   Box,
  8.   Toolbar,
  9. } from "@mui/material";
  11. import EditIcon from '@mui/icons-material/Edit';
  12. import PageviewIcon from '@mui/icons-material/Pageview';
  14. export default function SubHeaderNavigation(props) {
  16.   const { markdown, setMarkdown, editMode, onClickMode } = props;
  18.   return (
  19.     <Box>
  20.       <Toolbar sx={{ backgroundColor: "#1976d2", display: "flex", justifyContent: "space-between" }}>
  21.         <BottomNavigation showLabels sx={{ backgroundColor: "#1976d2" }}>
  22.           {editMode ?
  23.             <BottomNavigationAction label="表示" icon={<PageviewIcon />}} />
  24.             :
  25.             <BottomNavigationAction label="編集" icon={<EditIcon />}} />
  26.           }
  27.         </BottomNavigation>
  28.       </Toolbar>
  29.     </Box>
  30.   );
  31. }
  32.     
  33.

HeaderNavigationにあったページ1とページ2のアイコンボタンを移動して、表示と編集ボタンにしました。editMode(表示と編集を管理するモード)のステータスを見ながら切り替えるようにしました。

ボタンはMUIのBottomNavigationとBottomNavigationActionをつかいます。

BottomNavigationについては以下を参照してください。

https://mui.com/material-ui/api/bottom-navigation/

BottomNavigationActionについては以下を参照してください。

https://mui.com/material-ui/api/bottom-navigation-action/

以上がSubHeaderNavigationのコーディングです。

HeaderNavigationの改修

ヘッダーナビゲーションの改修内容です。

不要な記述の削除とページ2とページ2のリンクとアイコンを削除しました。

  1.     
  2. import { useNavigate } from "react-router-dom"
  4. import {
  5.   AppBar,
  6.   BottomNavigation,
  7.   BottomNavigationAction,
  8.   Toolbar,
  9.   Typography
  10. } from "@mui/material";
  12. import HomeIcon from '@mui/icons-material/Home';
  14. export default function HeaderNavigation() {
  16.   const navigate = useNavigate();
  18.   const onClickHome = () => { navigate('/') };
  20.   return (
  21.     <AppBar position="relative" >
  22.       <Toolbar sx={{ display: "flex", justifyContent: "space-between" }}>
  23.         <Typography component="div" >Markdown</Typography>
  24.         <BottomNavigation showLabels>
  25.           <BottomNavigationAction label="ホーム" icon={<HomeIcon />} onClick={onClickHome} />
  26.         </BottomNavigation>
  27.       </Toolbar>
  28.     </AppBar>
  29.   );
  30. }
  31.     
  32.

EditTemplateの改修

EditTemplateの改修内容です。

親コンポーネントで渡されるporpsの追加をします。

今回は表示画面を中心に説明するため一時的にエディット部分はコメントアウトをします。

  1.     
  2.   
  3. import {
  4.   AppBar,
  5.   Box,
  6.   createTheme,
  7.   ThemeProvider,
  8.   Toolbar,
  9.   Container,
  10.   Button
  11. } from "@mui/material";
  13. import { useState, useEffect } from "react";
  15. import ReactMarkdown from "react-markdown";
  16. import remarkGfm from 'remark-gfm';
  17. import axios from 'axios';
  18. import HeaderNavigation from "../organisms/HeaderNavigation";
  19. import EditMarkdown from "../organisms/EditMarkdown";
  21. import SaveIcon from '@mui/icons-material/Save';
  23. export default function EditTemplate(props) {
  24.   const { markdown, setMarkdown, editMode, onClickMode } = props;
  26. /*
  27.   const darkTheme = createTheme({
  28.     palette: {
  29.       mode: "dark",
  30.       primary: {
  31.         main: "#1976d2"
  32.       }
  33.     }
  34.   });
  36.   const [text, setText] = useState("");
  38.   const onChangeText = (event) => setText(event.target.value);
  40.   useEffect(() => {
  41.     axios.get('http://localhost:5000/markdown')
  42.       .then(res => {
  43.         setText(res.data.body)
  44.       })
  45.   }, [])
  47.   const onClickText = () => {
  48.     const markdown = {
  49.       body: text
  50.     };
  51.     axios.post(`http://localhost:5000/markdown`, markdown)
  52.       .then(res => {
  53.         console.log(res.data);
  54.       })
  55.   };
  58.   return (
  59.     <ThemeProvider theme={darkTheme}>
  60.       <Box
  61.         sx={{
  62.           display: "flex",
  63.           flexDirection: "column",
  64.           height: "100vh"
  65.         }}
  66.       >
  67.         <AppBar position="relative" >
  68.           <HeaderNavigation />
  69.         </AppBar>
  70.         <Box >
  71.           <Toolbar sx={{ backgroundColor: "#1976d2" }}>サブヘッダ</Toolbar>
  72.         </Box>
  73.         <Box component="main" >
  74.           <Box
  75.             sx={{
  76.               display: "flex",
  77.               flexDirection: "row"
  78.             }}
  79.           >
  80.             <Box
  81.               sx={{
  82.                 height: "100vh",
  83.                 width: "50%",
  84.                 backgroundColor: "#121212"
  85.               }}
  86.             >
  87.               <Container >
  88.               <Button variant="contained" onClick={onClickText} startIcon={<SaveIcon />}>保存</Button>
  89.                 <br />
  90.                 <EditMarkdown text={text} onChangeText={onChangeText} />
  91.               </Container >
  92.             </Box>
  94.             <Box sx={{ width: "50%" }}>
  95.               <Container >
  96.                 <ReactMarkdown remarkPlugins={[remarkGfm]}>{text}</ReactMarkdown>
  97.               </Container >
  98.             </Box>
  99.           </Box>
  100.         </Box>
  101.       </Box>
  102.     </ThemeProvider>
  103.   );
  104. */
  105.   return (<>TEST</>)
  106. }
  107.     
  108.

HomeTemplateの改修

Homeテンプレートの改修内容です。

直接コーディングしていたサブナビゲーション部分を削除します。

最初はホーム画面にもサブナビゲーションを配置することを考えていましたが不要になり削除しました。

  1.     
  2. import { useState, useEffect } from "react";
  4. import {
  5.   Box,
  6.   Container,
  7.   createTheme,
  8.   ThemeProvider,
  9. } from "@mui/material";
  12. import axios from 'axios';
  14. import HeaderNavigation from "../organisms/HeaderNavigation";
  15. import { Link } from "react-router-dom";
  17. export default function HomeTemplate() {
  18.   const darkTheme = createTheme({
  19.     palette: {
  20.       mode: "dark",
  21.       primary: {
  22.         main: "#1976d2"
  23.       }
  24.     }
  25.   });
  27.   const [text, setText] = useState([]);
  29.   useEffect(() => {
  30.     axios.get('http://localhost:5000/markdown')
  31.       .then(res => setText(res.data))
  32.   }, [])
  35.   return (
  36.     <ThemeProvider theme={darkTheme}>
  37.       <Box
  38.         sx={{
  39.           display: "flex",
  40.           flexDirection: "column",
  41.           height: "100vh"
  42.         }}
  43.       >
  44.         <HeaderNavigation />
  45.         <Box component="main" >
  46.           <Container maxWidth="xl" sx={{ display: "flex", flexDirection: "column" }}>
  47.             {text.map((markdown) => {
  48.               return (
  49.                 <Link key={markdown.url} to={markdown.url}>
  50.                   {markdown.title}
  51.                 </Link>
  52.               )
  53.             })}
  54.           </Container >
  55.         </Box>
  56.       </Box>
  57.     </ThemeProvider>
  58.   );
  59. }
  60.     
  61.

画面確認

docker-compose upを使って各コンテナを起動します。

docker-compose.ymlファイルがある場所で以下のコマンドを実行します。

  1.     
  2. docker-compose up
  3.     
  4.

起動したら以下のURLをブラウザに入力します。

http://localhost:3000

以下ブラウザの表示です。

ホームページの画面です。ページ1とページ2のアイコンを削除しました。

また、サブナビゲーションを削除しています。

markdown-homepage

表示画面

編集ボタンを表示するようにしています。

markdown-view

まとめ

表示のページで表示と編集（エディット）を切り替える対応を行いました。

次回は編集画面について紹介します。

コメント

0 件のコメント:

コメントを投稿

コメントをお待ちしています。

ブログ アーカイブ

このブログを検索