Merge pull request #51 from 001elijah/create-edit-forms

Create edit forms
001elijah · Jun 28, 2023 · 059ff7b · 059ff7b
2 parents af30654 + 691d790
commit 059ff7b
Show file tree

Hide file tree

Showing 13 changed files with 162 additions and 100 deletions.
diff --git a/src/components/BoardModalWindow/BoardModalWindow.jsx b/src/components/BoardModalWindow/BoardModalWindow.jsx
@@ -20,16 +20,23 @@ export const BoardModalWindow = ({
   const [title, setTitle] = useState(inputTitle);
   const [background, setBackground] = useState('dark');
   const [icon, setIcon] = useState('');
+  const [isValid, setIsValid] = useState(false);
 
   const handleSubmit = e => {
     e.preventDefault();
-    const newCard = {
-      title: title,
-      icon,
-      background,
-    };
-    onSubmit(newCard);
-    handleToggleModal();
+
+    if (title === '') {
+      setIsValid(true);
+      setTimeout(() => setIsValid(false), 2500);
+    } else {
+      const newCard = {
+        title: title,
+        icon,
+        background,
+      };
+      onSubmit(newCard);
+      handleToggleModal();
+    }
   };
 
   return (
@@ -41,6 +48,8 @@ export const BoardModalWindow = ({
           placeholder={'Title'}
           onChange={e => setTitle(e.target.value)}
         />
+        {isValid && <p className={s.errorTitle}>required field</p>}
+
         <BoxRadioIconGroup valueChange={setIcon} activeIcon={activeIcon} />
         <BoxRadioBackgroundGroup valueChange={setBackground} />
         <button className={`${s.buttonModal} ${s[theme]}`} type="submit">

diff --git a/src/components/BoardModalWindow/BoardModalWindow.module.scss b/src/components/BoardModalWindow/BoardModalWindow.module.scss
@@ -1,6 +1,18 @@
 @import '../../assets/styles/vars';
 @import '../../assets/styles/mixins';
 
+.errorTitle {
+  position: absolute;
+  top: 150px;
+  left: 30px;
+  font-size: 10px;
+  font-family: Poppins-Regular;
+  font-weight: 400;
+  letter-spacing: -0.24px;
+
+  color: red;
+}
+
 .inputModal {
   width: 287px;
   height: 49px;

diff --git a/src/components/BoxRadioColorGroup/BoxRadioColorGroup.jsx b/src/components/BoxRadioColorGroup/BoxRadioColorGroup.jsx
@@ -4,8 +4,8 @@ import { useSelector } from 'react-redux';
 import { selectorTheme } from 'redux/Auth/authSelectors';
 import s from './BoxRadioColorGroup.module.scss';
 
-export const BoxRadioColorGroup = ({ valueChange }) => {
-  const [color, setColor] = useState('dark');
+export const BoxRadioColorGroup = ({ valueChange, deadline }) => {
+  const [color, setColor] = useState(deadline);
   const theme = useSelector(selectorTheme);
 
   const handleCheked = e => {
@@ -88,4 +88,5 @@ export const BoxRadioColorGroup = ({ valueChange }) => {
 
 BoxRadioColorGroup.propTypes = {
   valueChange: PropTypes.func.isRequired,
+  deadline: PropTypes.string,
 };
diff --git a/src/components/CalendarButton/CalendarButton.jsx b/src/components/CalendarButton/CalendarButton.jsx
@@ -3,15 +3,19 @@ import PropTypes from 'prop-types';
 import { selectorTheme } from 'redux/Auth/authSelectors';
 import { useSelector } from 'react-redux';
 import s from './CalendarButton.module.scss';
-import moment from 'moment/moment';
+
 import IconCalendar from 'components/IconCalendar/IconCalendar';
 
 export const CalendarButton = forwardRef(({ value, onClick }, ref) => {
   const theme = useSelector(selectorTheme);
-
-  const curentDays = moment(value).format('LLLL');
+  const curentDays = new Date(value).toLocaleDateString('en-us', {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  });
   const valueDay = curentDays.split(',');
-  const result = valueDay[0] + ',' + valueDay[1];
+  const result = valueDay[0] + ',' + value.split(',')[1] + value.split(',')[2];
 
   return (
     <div className={s.container}>
@@ -29,7 +33,7 @@ export const CalendarButton = forwardRef(({ value, onClick }, ref) => {
   );
 });
 
-CalendarButton.displayName = 'CustomsButton';
+CalendarButton.displayName = 'CalendarButton';
 
 CalendarButton.propTypes = {
   value: PropTypes.string,

diff --git a/src/components/CalendarColorful/CalendarColorful.jsx b/src/components/CalendarColorful/CalendarColorful.jsx
@@ -7,8 +7,8 @@ import PropTypes from 'prop-types';
 import { CalendarButton } from '../CalendarButton/CalendarButton';
 import 'react-datepicker/dist/react-datepicker-cssmodules.css';
 
-export const CalendarColorful = ({ onDate }) => {
-  const [startDate, setStartDate] = useState(new Date());
+export const CalendarColorful = ({ onDate, deadline = String(new Date()) }) => {
+  const [startDate, setStartDate] = useState(deadline);
   const months = [
     'January',
     'February',
@@ -29,19 +29,20 @@ export const CalendarColorful = ({ onDate }) => {
 
   return (
     <DatePicker
-      dateFormat=", yy, MMMM d"
-      selected={startDate}
+      dateFormat="yyyy, MMMM ,d"
+      selected={Date.parse(startDate)}
       calendarClassName={s.calendarConatiner}
       popperClassName={s.popperCustomClass}
       // formatWeekDay={day => day.substr(0, 2)}
       customInput={
         <CalendarButton
+          value={String(startDate)}
           onClick={e => {
             console.log(e.target);
           }}
         />
       }
-      onChange={date => setStartDate(date)}
+      onChange={date => setStartDate(String(date))}
       minDate={new Date()}
       wrapperClassName={s.calendar}
       weekNumber={5}
@@ -80,4 +81,5 @@ export const CalendarColorful = ({ onDate }) => {
 
 CalendarColorful.propTypes = {
   onDate: PropTypes.func,
+  deadline: PropTypes.string,
 };
diff --git a/src/components/CalendarDark/CalendarDark.jsx b/src/components/CalendarDark/CalendarDark.jsx
@@ -1,15 +1,14 @@
-/* eslint-disable react/display-name */
 import { useEffect, useState } from 'react';
 import DatePicker from 'react-datepicker';
 import { getMonth, getYear } from 'date-fns';
 import 'react-datepicker/dist/react-datepicker.css';
 import s from './CalendarDark.module.scss';
 import PropTypes from 'prop-types';
-import { CalendarButton } from '../CalendarButton/CalendarButton';
+import { CalendarButton } from '../../components/CalendarButton/CalendarButton';
 import 'react-datepicker/dist/react-datepicker-cssmodules.css';
 
-export const CalendarDark = ({ onDate }) => {
-  const [startDate, setStartDate] = useState(new Date());
+export const CalendarDark = ({ onDate, deadline = String(new Date()) }) => {
+  const [startDate, setStartDate] = useState(deadline);
   const months = [
     'January',
     'February',
@@ -30,19 +29,20 @@ export const CalendarDark = ({ onDate }) => {
 
   return (
     <DatePicker
-      dateFormat=", yy, MMMM d"
-      selected={startDate}
+      dateFormat="yyyy, MMMM ,d"
+      selected={Date.parse(startDate)}
       calendarClassName={s.calendarConatiner}
       popperClassName={s.popperCustomClass}
       // formatWeekDay={day => day.substr(0, 2)}
       customInput={
         <CalendarButton
+          value={String(startDate)}
           onClick={e => {
             console.log(e.target);
           }}
         />
       }
-      onChange={date => setStartDate(date)}
+      onChange={date => setStartDate(String(date))}
       minDate={new Date()}
       wrapperClassName={s.calendar}
       weekNumber={5}
@@ -81,4 +81,5 @@ export const CalendarDark = ({ onDate }) => {
 
 CalendarDark.propTypes = {
   onDate: PropTypes.func,
+  deadline: PropTypes.string,
 };
diff --git a/src/components/CalendarLight/CalendarLight.jsx b/src/components/CalendarLight/CalendarLight.jsx
@@ -7,8 +7,8 @@ import PropTypes from 'prop-types';
 import { CalendarButton } from '../CalendarButton/CalendarButton';
 import 'react-datepicker/dist/react-datepicker-cssmodules.css';
 
-export const CalendarLight = ({ onDate }) => {
-  const [startDate, setStartDate] = useState(new Date());
+export const CalendarLight = ({ onDate, deadline = String(new Date()) }) => {
+  const [startDate, setStartDate] = useState(deadline);
   const months = [
     'January',
     'February',
@@ -29,19 +29,20 @@ export const CalendarLight = ({ onDate }) => {
 
   return (
     <DatePicker
-      dateFormat=", yy, MMMM d"
-      selected={startDate}
+      dateFormat="yyyy, MMMM ,d"
+      selected={Date.parse(startDate)}
       calendarClassName={s.calendarConatiner}
       popperClassName={s.popperCustomClass}
       // formatWeekDay={day => day.substr(0, 2)}
       customInput={
         <CalendarButton
+          value={String(startDate)}
           onClick={e => {
             console.log(e.target);
           }}
         />
       }
-      onChange={date => setStartDate(date)}
+      onChange={date => setStartDate(String(date))}
       minDate={new Date()}
       wrapperClassName={s.calendar}
       weekNumber={5}
@@ -80,4 +81,5 @@ export const CalendarLight = ({ onDate }) => {
 
 CalendarLight.propTypes = {
   onDate: PropTypes.func,
+  deadline: PropTypes.string,
 };
diff --git a/src/components/CardModalWindow/CardModalWindow.jsx b/src/components/CardModalWindow/CardModalWindow.jsx
@@ -17,50 +17,39 @@ export const CardModalWindow = ({
   titleModalButton,
   onSubmit,
   handleToggleModal,
+  date,
+  color,
 }) => {
   const theme = useSelector(selectorTheme);
 
+  const [isValid, setIsValid] = useState(false);
   const [value, setValue] = useState(inputTitle);
   const [coment, setComent] = useState(description);
-  const [color, setColor] = useState('dark');
-  const [date, setDate] = useState('');
+  const [priorityColor, setPriorityColorColor] = useState(color);
+  const [deadline, setDeadline] = useState(date);
 
   const handleChangeColor = value => {
-    setColor(value);
+    setPriorityColorColor(value);
   };
 
   const handleSubmit = e => {
     e.preventDefault();
-    const newCard = {
-      value,
-      coment,
-      color,
-      date,
-    };
-
-    onSubmit(newCard);
-    handleToggleModal();
+    if (value === '') {
+      setIsValid(true);
+      setTimeout(() => setIsValid(false), 2500);
+    } else {
+      const newCard = {
+        value,
+        coment,
+        color: priorityColor,
+        date: new Date(deadline).toISOString(),
+      };
+      onSubmit(newCard);
+      handleToggleModal();
+    }
   };
 
   return (
-    // <ReusableColumnModalWindow
-    //   modalTitle={modalTitle}
-    //   inputTitle={inputTitle}
-    //   titleModalButton={titleModalButton}
-    //   onClick={handleAddCard}
-    // >
-    //   <textarea
-    //     onChange={e => setComent(e.target.value)}
-    //     className={`${s.textAreaStyle} ${s[theme]}`}
-    //     name="coments"
-    //     id="coments"
-    //     placeholder="Description"
-    //     value={coment}
-    //   ></textarea>
-    //   <BoxRadioColorGroup valueChange={handleChangeColor} />
-    //   <CalendarDark onDate={setDate} />
-    // </ReusableColumnModalWindow>
-
     <Modal title={modalTitle} onClose={handleToggleModal}>
       <form onSubmit={handleSubmit}>
         <input
@@ -69,6 +58,7 @@ export const CardModalWindow = ({
           placeholder={'Title'}
           onChange={e => setValue(e.target.value)}
         />
+        {isValid && <p className={s.errorTitle}>required field</p>}
         <textarea
           onChange={e => setComent(e.target.value)}
           className={`${s.textAreaStyle} ${s[theme]}`}
@@ -77,10 +67,19 @@ export const CardModalWindow = ({
           placeholder="Description"
           value={coment}
         ></textarea>
-        {theme === 'dark' && <CalendarDark onDate={setDate} />}
-        {theme === 'light' && <CalendarLight onDate={setDate} />}
-        {theme === 'colorful' && <CalendarColorful onDate={setDate} />}
-        <BoxRadioColorGroup valueChange={handleChangeColor} />
+        {theme === 'dark' && (
+          <CalendarDark onDate={setDeadline} deadline={deadline} />
+        )}
+        {theme === 'light' && (
+          <CalendarLight onDate={setDeadline} deadline={deadline} />
+        )}
+        {theme === 'colorful' && (
+          <CalendarColorful onDate={setDeadline} deadline={deadline} />
+        )}
+        <BoxRadioColorGroup
+          valueChange={handleChangeColor}
+          deadline={priorityColor}
+        />
         <button className={`${s.buttonModal} ${s[theme]}`} type="submit">
           <span className={`${s.iconButtonModalWrapper} ${s[theme]}`}>
             <svg
@@ -100,10 +99,12 @@ export const CardModalWindow = ({
 
 CardModalWindow.propTypes = {
   modalTitle: PropTypes.string.isRequired,
-  inputTitle: PropTypes.string.isRequired,
+  inputTitle: PropTypes.string,
   titleModalButton: PropTypes.string.isRequired,
   onSubmit: PropTypes.func,
   handleToggleModal: PropTypes.func,
   id: PropTypes.func,
   description: PropTypes.string,
+  date: PropTypes.string,
+  color: PropTypes.string,
 };