Contact init

package.json

@@ -9,12 +9,20 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "framer-motion": "^4.1.17",
     "next": "11.1.2",
+    "next-redux-wrapper": "^7.0.4",
     "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react-dom": "17.0.2",
+    "react-icons": "^4.2.0",
+    "react-redux": "^7.2.5",
+    "redux": "^4.1.1"
   },
   "devDependencies": {
+    "autoprefixer": "^10.3.4",
     "eslint": "7.32.0",
-    "eslint-config-next": "11.1.2"
+    "eslint-config-next": "11.1.2",
+    "postcss": "^8.3.6",
+    "tailwindcss": "^2.2.9"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/components/Contact/AddContact.js

@@ -0,0 +1,65 @@
+import { useDispatch, useSelector } from "react-redux";
+import {
+  addContactAction,
+  clearFormContactAction,
+  setFormContactAction,
+  updateContactAction,
+} from "../../store/actions/contactActions";
+
+const AddContact = () => {
+  const form = useSelector((state) => state.contacts.form);
+  const dispatch = useDispatch();
+  const onSubmit = (e) => {
+    e.preventDefault();
+    form.id !== null
+      ? dispatch(updateContactAction(form))
+      : dispatch(addContactAction(form));
+
+    dispatch(clearFormContactAction());
+  };
+  return (
+    <form
+      onSubmit={(e) => onSubmit(e)}
+      className="w-full px-2 lg:w-8/12 lg:space-x-5 flex flex-wrap lg:flex-nowrap items-center justify-center pt-10"
+    >
+      <input
+        type="text"
+        placeholder="Имя"
+        value={form.name}
+        required
+        onChange={(e) =>
+          dispatch(
+            setFormContactAction({
+              phone: form.phone,
+              name: e.target.value,
+            })
+          )
+        }
+        className="px-5 py-3 rounded-lg w-full lg:w-5/12 focus:ring-1 focus:ring-gray-600 duration-500"
+      />
+      <input
+        type="text"
+        placeholder="Телефон"
+        required
+        value={form.phone}
+        onChange={(e) =>
+          dispatch(
+            setFormContactAction({
+              name: form.name,
+              phone: e.target.value,
+            })
+          )
+        }
+        className="px-5 py-3 rounded-lg w-full lg:w-5/12 focus:ring-1 focus:ring-gray-600 duration-500 mt-3 lg:mt-0"
+      />
+      <button
+        type="submit"
+        className="bg-indigo-600 lg:w-2/12 text-center py-3 px-5 text-white rounded-lg hover:bg-indigo-800 duration-500  transform focus:scale-95 mt-3 lg:mt-0"
+      >
+        {form.id !== null ? "Изменить" : "Добавить"}
+      </button>
+    </form>
+  );
+};
+
+export default AddContact;

src/components/Contact/ContactList.js

@@ -0,0 +1,57 @@
+import { useSelector, useDispatch } from "react-redux";
+import { CgTrashEmpty } from "react-icons/cg";
+import { BiPencil } from "react-icons/bi";
+import {
+  deleteContactAction,
+  setFormUpdateContactAction,
+} from "../../store/actions/contactActions";
+
+const ContactList = () => {
+  const dispatch = useDispatch();
+  const contacts = useSelector((state) => state.contacts);
+  return (
+    <main className="flex space-y-2 items-center flex-col w-full pt-10 px-2">
+      {contacts.contacts.length === 0 && "Нет контакт"}
+      {contacts.contacts.length > 0 &&
+        contacts.contacts.map((contact, key) => {
+          return (
+            <aside
+              key={key}
+              className={`bg-opacity-50 rounded-xl w-full lg:w-8/12 px-5 py-3 flex items-center justify-between ${
+                contacts.form.id == contact.id ? "bg-green-200" : "bg-white"
+              }`}
+            >
+              <div className="flex flex-col w-full truncate">
+                <span className="text-xl font-medium text-gray-800">
+                  {contacts.form.id == contact.id
+                    ? contacts.form.name
+                    : contact.name}
+                </span>
+                <span className="text-sm mt-2 text-gray-700">
+                  {contacts.form.id == contact.id
+                    ? contacts.form.phone
+                    : contact.phone}
+                </span>
+              </div>
+              <div className="flex items-center space-x-2">
+                <div
+                  onClick={() => dispatch(setFormUpdateContactAction(contact))}
+                  className="bg-green-200 hover:bg-green-300 duration-500 cursor-pointer text-green-600 w-10 h-10 flex items-center justify-center rounded-lg"
+                >
+                  <BiPencil />
+                </div>
+                <div
+                  onClick={() => dispatch(deleteContactAction(contact.id))}
+                  className="bg-red-200 hover:bg-red-300 duration-500 cursor-pointer text-red-600 w-10 h-10 flex items-center justify-center rounded-lg"
+                >
+                  <CgTrashEmpty />
+                </div>
+              </div>
+            </aside>
+          );
+        })}
+    </main>
+  );
+};
+
+export default ContactList;

src/components/Footer/Footer.js

@@ -0,0 +1,11 @@
+const Footer = () => {
+  const today = new Date();
+  const year = today.getFullYear();
+  return (
+    <footer className="fixed bottom-2 left-2/4">
+      &copy; Powered by Dagdan {year}
+    </footer>
+  );
+};
+
+export default Footer;

src/pages/_app.js

@@ -0,0 +1,8 @@
+import "../styles/globals.css";
+import { wrapper } from "../store/store";
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />;
+}
+
+export default wrapper.withRedux(MyApp);

src/pages/index.js

@@ -0,0 +1,15 @@
+import AddContact from "../components/Contact/AddContact";
+import ContactList from "../components/Contact/ContactList";
+import Footer from "../components/Footer/Footer";
+
+const Home = () => {
+  return (
+    <main className="min-w-screen min-h-screen relative bg-gradient-to-tr to-red-100 from-blue-100 flex flex-col items-center">
+      <AddContact />
+      <ContactList />
+      <Footer />
+    </main>
+  );
+};
+
+export default Home;

src/store/actions/contactActions.js

@@ -0,0 +1,49 @@
+import {
+  ADD_CONTACT,
+  CLEAR_FORM,
+  DELETE_CONTACT,
+  SET_FORM,
+  UPDATE_CONTACT,
+  SET_FORM_UPDATE_CONTACT,
+} from "../constants/contactConstants";
+
+export const addContactAction = (data) => {
+  return {
+    type: ADD_CONTACT,
+    payload: data,
+  };
+};
+
+export const updateContactAction = (data) => {
+  return {
+    type: UPDATE_CONTACT,
+    payload: data,
+  };
+};
+
+export const setFormUpdateContactAction = (data) => {
+  return {
+    type: SET_FORM_UPDATE_CONTACT,
+    payload: data,
+  };
+};
+
+export const deleteContactAction = (id) => {
+  return {
+    type: DELETE_CONTACT,
+    payload: id,
+  };
+};
+
+export const setFormContactAction = (data) => {
+  return {
+    type: SET_FORM,
+    payload: data,
+  };
+};
+
+export const clearFormContactAction = () => {
+  return {
+    type: CLEAR_FORM,
+  };
+};

src/store/constants/contactConstants.js

@@ -0,0 +1,6 @@
+export const ADD_CONTACT = "ADD_CONTACT";
+export const DELETE_CONTACT = "DELETE_CONTACT";
+export const UPDATE_CONTACT = "UPDATE_CONTACT";
+export const SET_FORM_UPDATE_CONTACT = "SET_FORM_UPDATE_CONTACT";
+export const SET_FORM = "SET_FORM";
+export const CLEAR_FORM = "CLEAR_FORM";