Masaki/feature/schedule7

langdemy-app/src/components/pages/LessonReady/index.jsx

@@ -87,7 +87,6 @@ class LessonReady extends React.Component {
             this.state.count === 0 ? styles.mainBox : styles.mainBoxUnder600
           }
         >
-
           <div
             className={
               this.state.user === true
@@ -98,7 +97,11 @@ class LessonReady extends React.Component {
             <Grid container spacing={0}>
               <Grid item xs={12} container justify="center">
                 <Grid item container justify={justify1} xs={12} sm={6}>
-                  <ZoomBox count={this.state.count} isStartTime={this.props.isStartTime} joinUrl = {this.props.joinUrl}/>
+                  <ZoomBox
+                    count={this.state.count}
+                    isStartTime={this.props.isStartTime}
+                    joinUrl={this.props.joinUrl}
+                  />
                 </Grid>
                 <Grid item container justify={justify2} xs={12} sm={6}>
                   <ScheduleBox count={this.state.count} />

langdemy-app/src/components/pages/Schedule/index.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Calender1 } from "../../parts/schedule/Calender1";
+import Calender1 from "../../parts/schedule/Calender1";
 
 class Schedule extends React.Component {
   render() {

langdemy-app/src/components/parts/schedule/Body.jsx

@@ -15,14 +15,14 @@ class Body extends React.Component {
     super(props);
     this.state = {
       classTime: 40,
-      name: "",
+      title: "",
       startTime: moment().format("YYYY-MM-DDTHH:mm"),
       endTime: null,
     };
 
     this.classTimeHandleChange = this.classTimeHandleChange.bind(this);
     this.datepickerHandleChange = this.datepickerHandleChange.bind(this);
-    this.nameHandleChange = this.nameHandleChange.bind(this);
+    this.titleHandleChange = this.titleHandleChange.bind(this);
     this.clickDoAction = this.clickDoAction.bind(this);
   }
 
@@ -33,12 +33,13 @@ class Body extends React.Component {
     console.log(e.target.value);
   }
 
-  nameHandleChange(e) {
+  titleHandleChange(e) {
     this.setState(() => ({
-      name: e.target.value,
+      title: e.target.value,
+      endTime: moment(this.state.startTime)
+        .add(this.state.classTime, "m")
+        .format("YYYY-MM-DD-HH:mm"),
     }));
-    console.log(this.state.name);
-    this.props.appointmentAction();
   }
 
   datepickerHandleChange(e) {
@@ -50,17 +51,8 @@ class Body extends React.Component {
   clickDoAction() {
     const { appointmentAction } = this.props;
     const appointment = this.state;
-    this.setState(() => ({
-      endTime: moment(this.state.startTime)
-        .add(this.state.classTime, "m")
-        .format("YYYY-MM-DD-HH:mm"),
-    }));
+    console.log(this.state);
     appointmentAction(appointment);
-    console.log(this.props.state);
-  }
-
-  componentWillMount() {
-    this.props.appointmentAction();
   }
 
   render() {
@@ -95,7 +87,7 @@ class Body extends React.Component {
           <TextField
             label="名前"
             style={{ marginLeft: "10px" }}
-            onChange={this.nameHandleChange}
+            onChange={this.titleHandleChange}
           />
           <Button
             variant="outlined"
@@ -112,7 +104,7 @@ class Body extends React.Component {
 
 const mapStateToProps = (state) => {
   return {
-    state: state.schedule.classTime,
+    state: state.schedule.endTime,
   };
 };
 

langdemy-app/src/components/parts/schedule/Calender1.jsx

@@ -22,18 +22,7 @@ class Calender1 extends React.Component {
     this.test = this.test.bind(this);
     this.state = {
       isOpen: false,
-      events: [
-        {
-          start: moment().toDate(),
-          end: moment().add(1, "days").toDate(),
-          title: "Some title",
-        },
-        {
-          start: moment().toDate(),
-          end: moment().add(1, "days").toDate(),
-          title: "Some title",
-        },
-      ],
+      events: this.props.state,
     };
   }
 
@@ -52,10 +41,23 @@ class Calender1 extends React.Component {
   test() {
     const { appointmentAction } = this.props;
     appointmentAction();
-    console.log(this.props);
+    console.log(moment("2021-02-20T07:07").utc().format());
+    console.log(moment("2021-02-22T07:07").utc().format());
+    console.log(this.props.state);
   }
 
   render() {
+    console.log("bbbbbbbbbbbbbbbbbb");
+    console.log(this.props.state);
+    const eventlist = this.props.state
+      .filter((event) => event)
+      .map((event) => ({
+        ...event,
+        start: new Date(event.startTime),
+        end: moment(event.endTime).utc().format(),
+      }));
+    console.log(eventlist);
+    // console.log(eventlist[0].end);
     return (
       <div>
         <div className={styles.wrapperBox}>
@@ -76,6 +78,7 @@ class Calender1 extends React.Component {
           <Button variant="outlined" className={styles.button}>
             キャンセル
           </Button>
+          <p></p>
           <Modal
             open={this.state.isOpen}
             onClose={this.handleClose}
@@ -89,7 +92,7 @@ class Calender1 extends React.Component {
           localizer={localizer}
           defaultDate={new Date()}
           defaultView="month"
-          events={this.state.events}
+          events={eventlist}
           style={{ height: "90vh" }}
         />
       </div>
@@ -99,7 +102,7 @@ class Calender1 extends React.Component {
 
 const mapStateToProps = (state) => {
   return {
-    state: state,
+    state: state.schedule.reserveList,
   };
 };
 
@@ -111,5 +114,3 @@ const mapDispatchToProps = (dispatch) => {
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Calender1);
-
-export { Calender1 };

langdemy-app/src/components/parts/schedule/test.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const test = () => {
+  return <div></div>;
+};
+
+export default test;

langdemy-app/src/reducks/schedule/schedule.module.js

@@ -13,8 +13,8 @@ const reducer = (state = initialState.schedule, action) => {
     case SCHEDULE_APPOINTMENT:
       console.log(state);
       return {
-        ...state,
-        ...action.payload,
+        state,
+        reserveList: state.reserveList.concat([action.payload]),
       };
     default:
       return state;

langdemy-app/src/reducks/store/initialState.js

@@ -7,15 +7,12 @@ const initialState = {
     email: "",
     password: "",
   },
+  lessonReady: {
+    isStartTime: false,
+    joinUrl: "",
+  },
   schedule: {
-    classTime: null,
-    name: "",
-    startTime: null,
-    endTime: null,
-    lessonReady: {
-      isStartTime: false,
-      joinUrl: "",
-    },
+    reserveList: [],
   },
 };