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

Create edit forms

.eslintrc.json

@@ -11,6 +11,7 @@
   "plugins": ["react"],
   "rules": {
     // suppress errors for missing 'import React' in files
+
     "react/react-in-jsx-scope": "off",
     "no-unused-vars": ["warn"]
   }

package.json

@@ -4,6 +4,10 @@
   "private": true,
   "homepage": "https://001elijah.github.io/bc48-node-team-project-frontend/",
   "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/material": "^5.13.5",
+    "@mui/styled-engine-sc": "^5.12.0",
     "@reduxjs/toolkit": "^1.9.5",
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^12.1.4",
@@ -13,8 +17,11 @@
     "clsx": "^1.2.1",
     "formik": "^2.4.2",
     "modern-normalize": "^2.0.0",
+    "moment": "^2.29.4",
     "notiflix": "^3.2.6",
+    "prop-types": "^15.8.1",
     "react": "^18.1.0",
+    "react-datepicker": "^4.14.0",
     "react-dom": "^18.1.0",
     "react-redux": "^8.1.0",
     "react-responsive": "^9.0.2",
@@ -23,7 +30,7 @@
     "redux-persist": "^6.0.0",
     "sass": "^1.63.4",
     "shortid": "^2.2.16",
-    "styled-components": "^6.0.0-rc.3",
+    "styled-components": "^5.3.11",
     "web-vitals": "^2.1.3",
     "yup": "^1.2.0"
   },

src/assets/styles/_reset.scss

@@ -3,6 +3,7 @@
 
 html {
   box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 *,
@@ -19,6 +20,7 @@ h4,
 h5,
 h6 {
   margin: 0;
+  margin: 0;
 }
 
 ul {

src/assets/styles/_vars.scss

@@ -11,6 +11,7 @@ $light-violet: #ecedfd;
 $priority-low-color: #8fa1d0;
 $priority-medium-color: #e09cb5;
 $priority-high-color: #bedbb0;
+
 $red-error-color: #ff0000;
 $white-background-modal: #fcfcfc;
 $icon-main-color: rgba(22, 22, 22, 0.5);

src/components/AuthForm/Login/Login.jsx

@@ -49,6 +49,7 @@ export const Login = () => {
           value={formik.values.password}
           placeholder="Confirm a password"
         />
+
         <svg className={y.eye} onClick={toggleShowPassword}>
           <use
             href={showPassword ? `${icons}#icon-eye` : `${icons}#icon-antiEye`}

src/components/AuthForm/Register/Register.jsx

@@ -63,6 +63,7 @@ export const Register = () => {
           value={formik.values.password}
           placeholder="Create a password"
         />
+
         <svg className={y.eye} onClick={toggleShowPassword}>
           <use
             href={showPassword ? `${icons}#icon-eye` : `${icons}#icon-antiEye`}

src/components/BoardModalWindow/BoardModalWindow.jsx

@@ -0,0 +1,48 @@
+import PropTypes from 'prop-types';
+import { useState } from 'react';
+import { ReusableColumnModalWindow } from 'components/ReusableColumnModalWindow/ReusableColumnModalWindow';
+import { BoxRadioIconGroup } from 'components/BoxRadioIconGroup/BoxRadioIconGroup';
+import { BoxRadioBackgroundGroup } from 'components/BoxRadioBackgroundGroup/BoxRadioBackgroundGroup';
+
+export const BoardModalWindow = ({
+  inputTitle,
+  modalTitle,
+  titleModalButton,
+  onClick,
+  handleToggleModal,
+}) => {
+  const [Background, setBackground] = useState('dark');
+  const [icon, setIcon] = useState('');
+
+  const handleAddBoard = value => {
+    const newCard = {
+      value,
+      icon,
+      Background,
+    };
+    console.log(newCard);
+    console.log(onClick);
+    // onclick(dispatch(addNewCard());
+  };
+
+  return (
+    <ReusableColumnModalWindow
+      inputTitle={inputTitle}
+      modalTitle={modalTitle}
+      titleModalButton={titleModalButton}
+      onClick={handleAddBoard}
+      handleToggleModal={handleToggleModal}
+    >
+      <BoxRadioIconGroup valueChange={setIcon} />
+      <BoxRadioBackgroundGroup valueChange={setBackground} />
+    </ReusableColumnModalWindow>
+  );
+};
+
+BoardModalWindow.propTypes = {
+  modalTitle: PropTypes.string.isRequired,
+  inputTitle: PropTypes.string.isRequired,
+  titleModalButton: PropTypes.string.isRequired,
+  onClick: PropTypes.func,
+  handleToggleModal: PropTypes.func,
+};

src/components/BoxRadioBackgroundGroup/BoxRadioBackgroundGroup.jsx

@@ -0,0 +1,232 @@
+import { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import s from './BoxRadioBackgroundGroup.module.scss';
+
+export const BoxRadioBackgroundGroup = ({ valueChange }) => {
+  const [background, setBackground] = useState('one');
+  // const handleChange = e => {
+  //   setColor(e.target.value);
+  //   valueColor(color);
+  //   console.log(color);
+  // };
+
+  const handleCheked = e => {
+    setBackground(e.target.value);
+  };
+
+  useEffect(() => {
+    valueChange(background);
+  }, [valueChange, background]);
+
+  return (
+    <div className={s.backgroundGroupWrapper}>
+      <h1 className={s.label}>Background</h1>
+      <div className={s.radioWrapper}>
+        <div className={s.radioContainer}>
+          <input
+            className={s.radioInput1}
+            type="radio"
+            onChange={handleCheked}
+            value="one"
+            name="background"
+            id="one"
+            checked={background === 'one'}
+          />
+          <label htmlFor="one" className={s.radioLabel1}></label>
+        </div>
+
+        <div className={s.radioContainer}>
+          <input
+            className={s.radioInput2}
+            type="radio"
+            onChange={handleCheked}
+            value="two"
+            name="background"
+            id="two"
+            checked={background === 'two'}
+          />
+          <label htmlFor="two" className={s.radioLabel2}></label>
+        </div>
+
+        <div className={s.radioContainer}>
+          <input
+            className={s.radioInput3}
+            type="radio"
+            onChange={handleCheked}
+            value="three"
+            name="background"
+            id="three"
+            checked={background === 'three'}
+          />
+          <label htmlFor="three" className={s.radioLabel3}></label>
+        </div>
+
+        <div className={s.radioContainer}>
+          <input
+            className={s.radioInput4}
+            type="radio"
+            onChange={handleCheked}
+            value="four"
+            name="background"
+            id="four"
+            checked={background === 'four'}
+          />
+          <label htmlFor="four" className={s.radioLabel4}></label>
+        </div>
+        {/* 4 */}
+        <div className={s.radioContainer}>
+          <input
+            className={s.radioInput5}
+            type="radio"
+            onChange={handleCheked}
+            value="five"
+            name="background"
+            id="five"
+            checked={background === 'five'}
+          />
+          <label htmlFor="five" className={s.radioLabel5}></label>
+        </div>
+        <div className={s.radioContainer}>
+          <input
+            className={s.radioInput6}
+            type="radio"
+            onChange={handleCheked}
+            value="six"
+            name="background"
+            id="six"
+            checked={background === 'six'}
+          />
+          <label htmlFor="six" className={s.radioLabel6}></label>
+        </div>
+
+        <div className={s.radioContainer}>
+          <input
+            className={s.radioInput7}
+            type="radio"
+            onChange={handleCheked}
+            value="seven"
+            name="background"
+            id="seven"
+            checked={background === 'seven'}
+          />
+          <label htmlFor="seven" className={s.radioLabel7}></label>
+        </div>
+        <div className={s.radioContainer}>
+          <input
+            className={s.radioInput8}
+            type="radio"
+            onChange={handleCheked}
+            value="eight"
+            name="background"
+            id="eight"
+            checked={background === 'eight'}
+          />
+          <label htmlFor="eight" className={s.radioLabel8}></label>
+        </div>
+        {/* 8 */}
+        <div className={s.radioContainer}>
+          <input
+            className={s.radioInput9}
+            type="radio"
+            onChange={handleCheked}
+            value="nine"
+            name="background"
+            id="nine"
+            checked={background === 'nine'}
+          />
+          <label htmlFor="nine" className={s.radioLabel9}></label>
+        </div>
+        <div className={s.radioContainer}>
+          <input
+            className={s.radioInput10}
+            type="radio"
+            onChange={handleCheked}
+            value="ten"
+            name="background"
+            id="ten"
+            checked={background === 'ten'}
+          />
+          <label htmlFor="ten" className={s.radioLabel10}></label>
+        </div>
+        <div className={s.radioContainer}>
+          <input
+            className={s.radioInput11}
+            type="radio"
+            onChange={handleCheked}
+            value="eleven"
+            name="background"
+            id="eleven"
+            checked={background === 'eleven'}
+          />
+          <label htmlFor="eleven" className={s.radioLabel11}></label>
+        </div>
+        <div className={s.radioContainer}>
+          <input
+            className={s.radioInput12}
+            type="radio"
+            onChange={handleCheked}
+            value="twelve"
+            name="background"
+            id="twelve"
+            checked={background === 'twelve'}
+          />
+          <label htmlFor="twelve" className={s.radioLabel12}></label>
+        </div>
+        {/* 12 */}
+        <div className={s.radioContainer}>
+          <input
+            className={s.radioInput13}
+            type="radio"
+            onChange={handleCheked}
+            value="thirteen"
+            name="background"
+            id="thirteen"
+            checked={background === 'thirteen'}
+          />
+          <label htmlFor="thirteen" className={s.radioLabel13}></label>
+        </div>
+        <div className={s.radioContainer}>
+          <input
+            className={s.radioInput14}
+            type="radio"
+            onChange={handleCheked}
+            value="fourteen"
+            name="background"
+            id="fourteen"
+            checked={background === 'fourteen'}
+          />
+          <label htmlFor="fourteen" className={s.radioLabel14}></label>
+        </div>
+        <div className={s.radioContainer}>
+          <input
+            className={s.radioInput15}
+            type="radio"
+            onChange={handleCheked}
+            value="fifteen"
+            name="background"
+            id="fifteen"
+            checked={background === 'fifteen'}
+          />
+          <label htmlFor="fifteen" className={s.radioLabel15}></label>
+        </div>
+        <div className={s.radioContainer}>
+          <input
+            className={s.radioInput16}
+            type="radio"
+            onChange={handleCheked}
+            value="sixteen"
+            name="background"
+            id="sixteen"
+            checked={background === 'sixteen'}
+          />
+          <label htmlFor="sixteen" className={s.radioLabel16}></label>
+        </div>
+        {/* 16 */}
+      </div>
+    </div>
+  );
+};
+
+BoxRadioBackgroundGroup.propTypes = {
+  valueChange: PropTypes.func.isRequired,
+};