React + material-ui(MUI)でFloating action buttonコンポーネントをつかってみる

22:34

ReactでMarkdownアプリを作っています。

今回はFloating action buttonコンポーネントをつかった新規登録機能を実装します。

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

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

トップテンプレートの変更

トップテンプレートの右下に、Floating action buttonを追加します。

トップテンプレートの変更(TopTemplate.tsx)の内容は以下のとおりです。

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

import { Box, Container, Fab, ThemeProvider, Toolbar } from "@mui/material";
import AddIcon from '@mui/icons-material/Add';

import { Theme } from "../uilibs/theme/Theme";
import { MarkdownType } from "../../types/MarkdownType.type"
import { HeaderNavigation } from "../uilibs/organisms/HeaderNavigation";
import { MarkdownCardList } from "../uilibs/organisms/MarkdownCardList";

interface Props {
  markdowns: Array<MarkdownType>
};

export const TopTemplate: FC<Props> = (props) => {

  const { markdowns } = props;

  const navigate = useNavigate();
  const onClickNewPage = () => { navigate('careate_new_page') };

  const theme = Theme;
  const styleContainer = { display: "flex", flexDirection: "row", paddingTop: "10px" };

  return (
    <ThemeProvider theme={theme}>
      <Box>
        <HeaderNavigation />
        <Toolbar />
        <Container maxWidth="xl" sx={styleContainer}>
          <MarkdownCardList markdowns={markdowns} />
        </Container>
      </Box>
      <Fab sx={{ position: "absolute", right: "16px", bottom: "16px" }} color="secondary" aria-label="add" onClick={onClickNewPage}>
        <AddIcon />
      </Fab>
    </ThemeProvider>
  );
};

Fabコンポーネントを配置します。FabはFloating action buttonの略です。

ボタンをクリックすると、careate_new_pageに遷移するように設定します。画面遷移はnavigateを使います。

マークダウンページの変更

Floating action buttonのボタンが押されたときに新規画面に遷移するように修正を行います。

マークダウンページの変更(Markdown.tsx)の内容は以下のとおりです。

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

import { MarkdownType } from "../../types/MarkdownType.type";

import { EditTemplate } from "../templates/EditTemplate";
import { ViewTemplate } from "../templates/ViewTemplate";

export const Markdown: FC = () => {

  const [editMode, setEditMode] = useState<boolean>(false);
  const [markdown, setMarkdown] = useState<MarkdownType>({ url: '', title: '', body: '' });
  const [insertMode, setInsertMode] = useState<boolean>(false);
  const [urlLocation, setUrlLocation] = useState<string>("");

  const location = useLocation();

  useEffect(() => {
    if (location.pathname === 'careate_new_page') {
      // 新規登録
      setMarkdown({ url: '', title: '', body: '' });
      setEditMode(true);
      setInsertMode(true);
    } else {
      // 新規/更新の判定
      axios.get<MarkdownType>("http://localhost:5000/markdown" + location.pathname)
        .then(res => {
          if (!Object.keys(res.data).length) {
            // 新規登録(データ無し)
            setMarkdown({ url: decodeURI(location.pathname), title: '', body: '' });
            setEditMode(true);
            setInsertMode(true);
          } else {
            // 表示(データあり)
            setMarkdown(res.data);
            setUrlLocation(res.data.url);
          }
        });
    }
  }, [urlLocation])

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

  return (
    <>
      {editMode ?
        <EditTemplate markdown={markdown} setMarkdown={setMarkdown} editMode={editMode} insertMode={insertMode} setInsertMode={setInsertMode} onClickSwitchMode={onClickSwitchMode} /> :
        <ViewTemplate markdown={markdown} setMarkdown={setMarkdown} editMode={editMode} insertMode={insertMode} setInsertMode={setInsertMode} onClickSwitchMode={onClickSwitchMode} setUrlLocation={setUrlLocation} />
      }
    </>
  );
};

useEffectを変更しています。

location.pathnameが'careate_new_page'の場合、編集モードをtrue、新規作成モードをtrueにします。