Feature

.gitignore

@@ -1,4 +1,6 @@
 node_modules
 bundle.js
 db/volume
-.env
+.env
+package-lock.json
+server/package-lock.json

db/conf.d/my.cnf

@@ -1,6 +1,7 @@
 [mysqld]
 character-set-server=utf8
 collation-server=utf8_general_ci
+default_authentication_plugin=mysql_native_password
 
 [client]
 default-character-set=utf8

front/package.json

@@ -10,10 +10,16 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@date-io/dayjs": "^1.3.13",
+    "@material-ui/core": "^4.12.4",
+    "@material-ui/icons": "^4.11.3",
+    "@material-ui/pickers": "^3.3.10",
+    "dayjs": "^1.11.7",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-redux": "^7.1.3",
-    "redux": "^4.0.4"
+    "redux": "^4.0.4",
+    "redux-thunk": "^2.4.2"
   },
   "devDependencies": {
     "@babel/core": "^7.4.5",

front/src/components/AddScheduleDialog/container.jsx

@@ -0,0 +1,54 @@
+import { connect } from "react-redux"
+import { addScheduleCloseDialog, addScheduleSetValue, addScheduleStartEdit } from "../../redux/addSchedule/actions"
+import { currentScheduleCloseDialog } from "../../redux/currentSchedule/actions"
+import { asyncSchedulesAddItem, asyncSchedulesDeleteItem } from "../../redux/schedules/effects"
+import { isCloseDialog } from "../../services/schedule"
+import { AddScheduleDialog } from "./presentation"
+
+const mapStateToProps = state => ({ schedule: state.addSchedule })
+
+const mapDispatchToProps = dispatch => ({
+  closeDialog: () => {
+    dispatch(addScheduleCloseDialog())
+  },
+  setSchedule: value => {
+    dispatch(addScheduleSetValue(value))
+  },
+  saveSchedule: schedule => {
+    dispatch(asyncSchedulesAddItem(schedule))
+    dispatch(addScheduleCloseDialog())
+  },
+  deleteItem: id => {
+    dispatch(asyncSchedulesDeleteItem(id))
+    dispatch(currentScheduleCloseDialog())
+  },
+  setIsEditStart: () => {
+    dispatch(addScheduleStartEdit())
+  }
+})
+
+const mergeProps = (stateProps, dispatchProps) => {
+  const {
+    schedule: { form: schedule }
+  } = stateProps
+  const { saveSchedule, closeDialog } = dispatchProps
+
+  return {
+    ...stateProps,
+    ...dispatchProps,
+    saveSchedule: () => {
+      saveSchedule(schedule)
+    },
+    closeDialog: () => {
+      if (isCloseDialog(schedule)) {
+        closeDialog()
+      }
+    }
+  }
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+  mergeProps
+)(AddScheduleDialog)

front/src/components/AddScheduleDialog/presentation.jsx

@@ -0,0 +1,115 @@
+import React from 'react'
+import { Button, Dialog, DialogActions, DialogContent, Grid, IconButton, Input, TextField, Tooltip, Typography } from "@material-ui/core"
+import { LocationOnOutlined, NotesOutlined, AccessTime, Close } from "@material-ui/icons"
+import { DatePicker } from '@material-ui/pickers'
+import { withStyles } from '@material-ui/styles'
+import * as styles from "./style.css"
+
+const spacer = { margin: "4px 0" }
+
+const Title = withStyles({
+  root: {
+    fontSize: 22
+  }
+})(Input)
+
+export const AddScheduleDialog = ({
+  schedule: {
+    form: { title, location, description, date },
+    isDialogOpen,
+    isStartEdit
+  },
+  closeDialog,
+  setSchedule,
+  saveSchedule,
+  setIsEditStart
+}) => {
+  const isTitleInvalid = !title && isStartEdit
+  return (
+    <Dialog open={isDialogOpen} onClose={closeDialog} maxWidth="xs" fullWidth>
+      <DialogActions>
+        <div className={styles.closeButton}>
+          <Tooltip title="閉じる" placement='bottom'>
+            <IconButton onClick={closeDialog} size="small">
+              <Close />
+            </IconButton>
+          </Tooltip>
+        </div>
+      </DialogActions>
+      <DialogContent>
+        <Title autoFocus
+          fullWidth
+          placeholder='タイトルと日時を追加'
+          value={title}
+          onChange={e => setSchedule({ title: e.target.value })}
+          onBlur={setIsEditStart}
+          error={isTitleInvalid}
+        />
+        <div className={styles.validation}>
+          {isTitleInvalid && (
+            <Typography variant="caption" component="div" color="error">
+              タイトルは必須です。
+            </Typography>
+          )}
+        </div>
+        <Grid container spacing={1} alignItems="center" justifyContent='space-between'>
+          <Grid item>
+            <AccessTime />
+          </Grid>
+          <Grid item xs={10}>
+            <DatePicker
+              value={date}
+              onChange={d => setSchedule({ date: d })}
+              variant="inline"
+              format="YYYY年M月D日"
+              animateYearScrolling
+              disableToolbar
+              fullWidth
+              style={spacer}
+            />
+          </Grid>
+        </Grid>
+        <Grid container spacing={1} alignItems="center" justifyContent='space-between'>
+          <Grid item>
+            <LocationOnOutlined />
+          </Grid>
+          <Grid item xs={10}>
+            <TextField
+              style={spacer}
+              fullWidth
+              placeholder='場所を追加'
+              value={location}
+              onChange={e => setSchedule({ location: e.target.value })}
+            />
+          </Grid>
+        </Grid>
+        <Grid container spacing={1} alignItems="center" justifyContent='space-between'>
+          <Grid item >
+            <NotesOutlined />
+          </Grid>
+          <Grid item xs={10}>
+            <TextField
+              style={spacer}
+              fullWidth
+              placeholder='説明を追加'
+              value={description}
+              onChange={e => setSchedule({ description: e.target.value })}
+            />
+          </Grid>
+        </Grid>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          color='primary'
+          variant="outlined"
+          onClick={saveSchedule}
+          disabled={!title}
+        >
+          保存
+        </Button>
+      </DialogActions>
+    </Dialog >
+  )
+}
+
+export default AddScheduleDialog

front/src/components/AddScheduleDialog/style.css

@@ -0,0 +1,6 @@
+.closeButton{
+  text-align: right;
+}
+.validation{
+  height:32px;
+}

front/src/components/CalendarBoard/container.jsx

@@ -0,0 +1,49 @@
+import { connect } from "react-redux"
+import { addScheduleOpenDialog, addScheduleSetValue } from "../../redux/addSchedule/actions"
+import { currentScheduleOpenDialog, currentScheduleSetItem } from "../../redux/currentSchedule/actions"
+import { asyncSchedulesFetchItem } from "../../redux/schedules/effects"
+import { createCalendar } from "../../services/calendar"
+import { setSchedules } from "../../services/schedule"
+import CalendarBoard from "./presentation"
+
+const mapStateToProps = state => ({
+  calendar: state.calendar,
+  schedules: state.schedules
+})
+
+const mapDispatchToProps = dispatch => ({
+  openAddScheduleDialog: d => {
+    dispatch(addScheduleOpenDialog())
+    dispatch(addScheduleSetValue({ date: d }))
+  },
+
+  openCurrentScheduleDialog: (schedule, e) => {
+    // 日付の箱に登録している新しい予定を作成するためのdialogを開くeventを抑制して、今回のeventのみを発火するため。
+    e.stopPropagation()
+
+    dispatch(currentScheduleSetItem(schedule))
+    dispatch(currentScheduleOpenDialog())
+  },
+
+  fetchSchedule: month => {
+    dispatch(asyncSchedulesFetchItem(month))
+  }
+})
+
+const mergeProps = (stateProps, dispatchProps) => {
+  const {
+    calendar: month,
+    schedules: { items: schedules }
+  } = stateProps
+
+  const calendar = setSchedules(createCalendar(month), schedules)
+  return {
+    ...stateProps,
+    ...dispatchProps,
+    fetchSchedule: () => dispatchProps.fetchSchedule(month),
+    calendar,
+    month
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(CalendarBoard)

front/src/components/CalendarBoard/presentation.jsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import { ImageList, ImageListItem, Typography } from "@material-ui/core"
+
+import CalendarElement from '../CalendarElement'
+
+import * as styles from "./style.css"
+import { useEffect } from 'react'
+
+const days = ["日", "月", "火", "水", "木", "金", "土"]
+
+const CalendarBoard = ({
+  calendar,
+  month,
+  openAddScheduleDialog,
+  openCurrentScheduleDialog,
+  fetchSchedule
+}) => {
+  useEffect(() => {
+    fetchSchedule()
+  }, [])
+  return (
+    <div className={styles.container}>
+      <ImageList className={styles.grid} cols={7} rowHeight="auto">
+        {days.map((d, i) => (
+          <ImageListItem key={i}>
+            <Typography
+              className={styles.days}
+              color="textSecondary"
+              align="center"
+              variant="caption"
+              component="div"
+            >
+              {d}
+            </Typography>
+          </ImageListItem>
+        ))}
+        {calendar.map(({ date, schedules }) => (
+          <ImageListItem
+            key={date.toISOString()}
+            onClick={() => openAddScheduleDialog(date)}
+          >
+            <CalendarElement
+              day={date}
+              month={month}
+              schedules={schedules}
+              onClickSchedule={openCurrentScheduleDialog}
+            />
+          </ImageListItem>
+        ))}
+      </ImageList>
+    </div >
+  )
+}
+
+
+export default CalendarBoard

front/src/components/CalendarBoard/style.css

@@ -0,0 +1,11 @@
+.container {
+  height: 90vh;
+}
+.grid {
+  border-left: 1px solid #ccc;
+  border-top: 1px solid #ccc;
+}
+.days {
+  border-right: 1px solid #ccc;
+  padding-top: 10px;
+}

front/src/components/CalendarElement/index.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { Typography } from '@material-ui/core'
+import dayjs from 'dayjs'
+
+import * as style from "./style.css"
+import { getMonth, isFirstDay, isSameDay, isSameMonth } from '../../services/calendar'
+import Schedule from '../Schedule'
+
+
+const CalendarElement = ({ day, month, schedules, ...props }) => {
+  // 今月以外をグレーダウン
+  const currentMonth = getMonth(month)
+  const isCurrentMonth = isSameMonth(day, currentMonth)
+  const textColor = isCurrentMonth ? "textPrimary" : "textSecondary"
+
+  // 月の最初だけ月情報をつける
+  const format = isFirstDay(day) ? "M月D日" : "D"
+
+  // 当日かを判断
+  const today = dayjs()
+  const isToday = isSameDay(day, today)
+
+  return (
+    <div className={style.element}>
+      <Typography
+        className={style.date}
+        color={textColor}
+        align="center"
+        variant='caption'
+        component="div"
+      >
+        <span className={isToday ? style.today : ""}>
+          {day.format(format)}
+        </span>
+      </Typography>
+      <div className={style.schedules}>
+        {schedules.map(e => (
+          <Schedule key={e.id} schedule={e} {...props} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default CalendarElement