AcoountList, AccountInsert

accountInsert

import React, { useState } from "react";
import "../style/AccountInsert.scss";
import Button from "@mui/material/Button";
import axios from "axios";
import Radio from "@mui/material/Radio";
import RadioGroup from "@mui/material/RadioGroup";
import FormControlLabel from "@mui/material/FormControlLabel";

const AccountInsert = ({ insertRow }) => {
  const [row, setRow] = useState({});
  const [value, setValue] = useState({
    date: "",
    category: "",
    title: "",
    amount: "",
    tag: "",
  });

  const inputHandler = (e) => {
    setValue({ ...value, [e.target.name]: e.target.value });
  };

  const submitHandler = (e) => {
    e.preventDefault();

    if (
      value.date.trimEnd() === "" ||
      value.category.trimEnd() === "" ||
      value.title.trimEnd() === "" ||
      value.amount.trimEnd() === "" ||
      value.tag.trimEnd() === ""
    ) {
      return alert("모든 정보를 입력해주세요.");
    }

    const newRow = {
      date: value.date,
      title: value.title,
      category: value.category,
      amount: parseInt(value.amount),
      tag: value.tag,
    };
    insertRow(newRow);

    const sendData = async (data) => {
      try {
        const response = await axios.post(
          "http://localhost:4000/wallet/money",
          data,
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        );
        console.log(response.data);
        window.location.reload();
      } catch (err) {
        console.error(err);
      }
    };
    sendData([newRow]); // 데이터를 백엔드로 전송

    setValue({
      date: " ",
      category: " ",
      title: " ",
      amount: " ",
      tag: " ",
    });
  };

  return (
    <form
      className="AccountInsert"
      onSubmit={submitHandler}
      target="insertSubmit"
    >
      <label className="inputDate">
        <h3>Date</h3>
        <input type="date" name="date" onChange={inputHandler} />
      </label>

      <label className="inputSelect">
        <h3>Category</h3>
        <select
          name="category"
          value={value.category}
          onChange={inputHandler}
          required
        >
          <option value="" disabled>
            지출
          </option>
          <option>식비</option>
          <option>생필품</option>
          <option>문화/교육비</option>
          <option>기타</option>
          <option>저축</option>
          <option value="" disabled>
            수입
          </option>
          <option>월급</option>
          <option>기타소득</option>
        </select>
      </label>
      <label className="inputTitle">
        <h3>Title</h3>
        <input
          type="text"
          name="title"
          value={value.title}
          onChange={inputHandler}
        />
      </label>

      <label className="inputNumber">
        <h3>Amount</h3>
        <input
          type="number"
          name="amount"
          value={value.amount}
          onChange={inputHandler}
        />
      </label>

      <label className="radioBtn">
        <RadioGroup
          row
          aria-labelledby="demo-row-radio-buttons-group-label"
          name="tag"
          value={value.tag}
          onChange={inputHandler}
        >
          <FormControlLabel
            value="수입"
            control={<Radio size="small" />}
            label="수입"
            labelPlacement="start"
          />
          <FormControlLabel
            value="지출"
            control={<Radio size="small" />}
            label="지출"
            labelPlacement="start"
          />
        </RadioGroup>
      </label>

      <Button variant="contained" className="submitBtn" type="submit">
        추가
      </Button>
    </form>
  );
};

export default AccountInsert;

accountList

import React, { useEffect, useState } from "react";
import axios from "axios";
import "../style/AccountList.scss";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TablePagination from "@mui/material/TablePagination";
import TableRow from "@mui/material/TableRow";
import FilterListIcon from "@mui/icons-material/FilterList";
import IconButton from "@mui/material/IconButton";
import Tooltip from "@mui/material/Tooltip";
import Typography from "@mui/material/Typography";

const columns = [
  { id: "date", label: "Date", minWidth: 110 },
  { id: "title", label: "Title", minWidth: 110 },
  { id: "category", label: "Category", minWidth: 120 },
  { id: "amount", label: "Amount", minWidth: 100, align: "right" },
];

const AccountList = (props) => {
  const { totalIncome, totalExpense, monthFilter, tagFilter } = props;
  const [rows, setRows] = useState([]);
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(10);
  const [expense, setExpense] = useState(0);
  const [income, setIncome] = useState(0);

  const formatDate = (date) => {
    const options = { year: "numeric", month: "2-digit", day: "2-digit" };
    return new Date(date).toLocaleDateString("en-CA", options);
  };

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get("http://localhost:4000/wallet/money");
        const formattedData = response.data.map((item) => ({
          ...item,
          date: formatDate(item.date),
        }));
        setRows(formattedData);
      } catch (err) {
        console.error(err);
      }
    };
    fetchData();
  }, []);

  useEffect(() => {
    let exp = 0;
    let inc = 0;
    rows.forEach((item) => {
      if (item.tag === "지출") {
        exp += parseInt(item.amount);
      } else if (item.tag === "수입") {
        inc += parseInt(item.amount);
      }
    });
    setExpense(exp);
    setIncome(inc);
    totalExpense(exp);
    totalIncome(inc);
  }, [rows, totalExpense, totalIncome]);

  const handleChangePage = (event, newPage) => {
    setPage(newPage);
  };

  const handleChangeRowsPerPage = (event) => {
    setRowsPerPage(+event.target.value);
    setPage(0);
  };

  return (
    <div className="AccountList">
      <TableContainer sx={{ maxHeight: 440 }}>
        <Typography sx={{ flex: "1 1 100%" }} id="tableTitle" component="div">
          <Tooltip title="Filter list">
            <IconButton>
              <FilterListIcon type="button" onClick={tagFilter} />
            </IconButton>
          </Tooltip>

          <select
            className="monthFilter"
            placeholder="월"
            onChange={monthFilter}
            required
            defaultValue=""
          >
            <option value="" disabled>
              월별 필터
            </option>
            <option value="01">1월</option>
            <option value="02">2월</option>
            <option value="03">3월</option>
            <option value="04">4월</option>
            <option value="05">5월</option>
            <option value="06">6월</option>
            <option value="07">7월</option>
            <option value="08">8월</option>
            <option value="09">9월</option>
            <option value="10">10월</option>
            <option value="11">11월</option>
            <option value="12">12월</option>
          </select>
        </Typography>

        <Table stickyHeader aria-label="sticky table">
          <TableHead>
            <TableRow>
              {columns.map((column) => (
                <TableCell
                  key={column.id}
                  align={column.align}
                  style={{ minWidth: column.minWidth }}
                >
                  {column.label}
                </TableCell>
              ))}
            </TableRow>
          </TableHead>
          <TableBody>
            {rows
              .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
              .map((row) => {
                return (
                  <TableRow hover role="checkbox" tabIndex={-1} key={row.id}>
                    {columns.map((column) => {
                      const value = row[column.id];
                      return (
                        <TableCell key={column.id} align={column.align}>
                          {value}
                        </TableCell>
                      );
                    })}
                  </TableRow>
                );
              })}
          </TableBody>
        </Table>
      </TableContainer>
      <TablePagination
        rowsPerPageOptions={[10, 25, 100]}
        component="div"
        count={rows.length}
        rowsPerPage={rowsPerPage}
        page={page}
        onPageChange={handleChangePage}
        onRowsPerPageChange={handleChangeRowsPerPage}
      />
    </div>
  );
};

export default AccountList;