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

14:18

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

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

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

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

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

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のコーディング

    
import axios from "axios";

import {
  BottomNavigation,
  BottomNavigationAction,
  Box,
  Toolbar,
} from "@mui/material";

import EditIcon from '@mui/icons-material/Edit';
import PageviewIcon from '@mui/icons-material/Pageview';

export default function SubHeaderNavigation(props) {

  const { markdown, setMarkdown, editMode, onClickMode } = props;

  return (
    <Box>
      <Toolbar sx={{ backgroundColor: "#1976d2", display: "flex", justifyContent: "space-between" }}>
        <BottomNavigation showLabels sx={{ backgroundColor: "#1976d2" }}>
          {editMode ?
            <BottomNavigationAction label="表示" icon={<PageviewIcon />}} />
            :
            <BottomNavigationAction label="編集" icon={<EditIcon />}} />
          }
        </BottomNavigation>
      </Toolbar>
    </Box>
  );
}

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のリンクとアイコンを削除しました。

    
import { useNavigate } from "react-router-dom"

import {
  AppBar,
  BottomNavigation,
  BottomNavigationAction,
  Toolbar,
  Typography
} from "@mui/material";

import HomeIcon from '@mui/icons-material/Home';

export default function HeaderNavigation() {

  const navigate = useNavigate();

  const onClickHome = () => { navigate('/') };

  return (
    <AppBar position="relative" >
      <Toolbar sx={{ display: "flex", justifyContent: "space-between" }}>
        <Typography component="div" >Markdown</Typography>
        <BottomNavigation showLabels>
          <BottomNavigationAction label="ホーム" icon={<HomeIcon />} onClick={onClickHome} />
        </BottomNavigation>
      </Toolbar>
    </AppBar>
  );
}

EditTemplateの改修

EditTemplateの改修内容です。

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

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

    
  
import {
  AppBar,
  Box,
  createTheme,
  ThemeProvider,
  Toolbar,
  Container,
  Button
} from "@mui/material";

import { useState, useEffect } from "react";

import ReactMarkdown from "react-markdown";
import remarkGfm from 'remark-gfm';
import axios from 'axios';
import HeaderNavigation from "../organisms/HeaderNavigation";
import EditMarkdown from "../organisms/EditMarkdown";

import SaveIcon from '@mui/icons-material/Save';

export default function EditTemplate(props) {
  const { markdown, setMarkdown, editMode, onClickMode } = props;

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

  const [text, setText] = useState("");

  const onChangeText = (event) => setText(event.target.value);

  useEffect(() => {
    axios.get('http://localhost:5000/markdown')
      .then(res => {
        setText(res.data.body)
      })
  }, [])

  const onClickText = () => {
    const markdown = {
      body: text
    };
    axios.post(`http://localhost:5000/markdown`, markdown)
      .then(res => {
        console.log(res.data);
      })
  };


  return (
    <ThemeProvider theme={darkTheme}>
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          height: "100vh"
        }}
      >
        <AppBar position="relative" >
          <HeaderNavigation />
        </AppBar>
        <Box >
          <Toolbar sx={{ backgroundColor: "#1976d2" }}>サブヘッダ</Toolbar>
        </Box>
        <Box component="main" >
          <Box
            sx={{
              display: "flex",
              flexDirection: "row"
            }}
          >
            <Box
              sx={{
                height: "100vh",
                width: "50%",
                backgroundColor: "#121212"
              }}
            >
              <Container >
              <Button variant="contained" onClick={onClickText} startIcon={<SaveIcon />}>保存</Button>
                <br />
                <EditMarkdown text={text} onChangeText={onChangeText} />
              </Container >
            </Box>

            <Box sx={{ width: "50%" }}>
              <Container >
                <ReactMarkdown remarkPlugins={[remarkGfm]}>{text}</ReactMarkdown>
              </Container >
            </Box>
          </Box>
        </Box>
      </Box>
    </ThemeProvider>
  );
*/
  return (<>TEST</>)
}

HomeTemplateの改修

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

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

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

    
import { useState, useEffect } from "react";

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


import axios from 'axios';

import HeaderNavigation from "../organisms/HeaderNavigation";
import { Link } from "react-router-dom";

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

  const [text, setText] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:5000/markdown')
      .then(res => setText(res.data))
  }, [])


  return (
    <ThemeProvider theme={darkTheme}>
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          height: "100vh"
        }}
      >
        <HeaderNavigation />
        <Box component="main" >
          <Container maxWidth="xl" sx={{ display: "flex", flexDirection: "column" }}>
            {text.map((markdown) => {
              return (
                <Link key={markdown.url} to={markdown.url}>
                  {markdown.title}
                </Link>
              )
            })}
          </Container >
        </Box>
      </Box>
    </ThemeProvider>
  );
}