Merge branch 'main' into ContactUs

Abirpal202049 · web-flow · commit 0ebfaee014b5 · 2022-04-07T15:00:31.000+05:30
diff --git a/example/src/App.js b/example/src/App.js
@@ -7,9 +7,8 @@ import {
   ComplexComponent,
   PortfolioHome,
   TeamMembers,
-  ContactUs
- 
-
+  ContactUs,
+  GroceryList,
 } from 'dezenix-react'
 import Home from './components/Home'
 import { HashRouter, Route, Routes } from 'react-router-dom'
@@ -47,6 +46,8 @@ const App = () => {
         <Route path='/portfoliohome' element={<PortfolioHome pic={img1} />} />
         <Route path='/team' element={<TeamMembers img={user} members={members}  />} />
         <Route path='/contactus' element={<ContactUs />} />
+        <Route path='/GroceryList' element={<GroceryList />} />
+
       </Routes>
     </HashRouter>
   )
diff --git a/example/src/components/Home.js b/example/src/components/Home.js
@@ -40,6 +40,9 @@ const Home = () => {
           <Link to='/contactus' className='component'>
             <h2>Contact Us</h2>
           </Link>
+          <Link to='/GroceryList' className='component'>
+            <h2>Grocery List Site</h2>
+          </Link>
         </div>
       </div>
     </div>
diff --git a/src/index.js b/src/index.js
@@ -5,4 +5,5 @@ export { default as ProgressBar } from './lib-components/progress_bar'
 export { default as ComplexComponent } from './lib-components/complexComponent'
 export { default as PortfolioHome } from './lib-components/portfolio_home'
 export { default as TeamMembers } from './lib-components/team_members'
-export { default as ContactUs} from './lib-components/contact_us'
+export { default as ContactUs} from './lib-components/contact_us'
+export { default as GroceryList } from './lib-components/Grocery List Site'
diff --git a/src/lib-components/Grocery List Site/Alert.js b/src/lib-components/Grocery List Site/Alert.js
@@ -0,0 +1,16 @@
+import React, { useEffect } from 'react'
+import styles from './index.module.css'
+
+const Alert = ({text, type, removeAlert,list}) => {
+  useEffect(()=>{
+    let showingAlert = setTimeout(() => {
+      removeAlert() 
+    }, 3000);
+    return ()=> clearTimeout(showingAlert);
+  },[list])
+  return (
+    <p className={`${styles.alert} ${styles[`alert-${type}`]}`} >{text}</p>
+  )
+}
+
+export default Alert
diff --git a/src/lib-components/Grocery List Site/List.js b/src/lib-components/Grocery List Site/List.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { FaEdit, FaTrash } from 'react-icons/fa'
+import styles from './index.module.css'
+
+const List = ({gList,deleteItem,editItem}) => {
+  return (
+    <div className={styles['grocery-list']}>
+      {gList.map(({id, title})=>{
+        return (
+          <article className={styles['grocery-item']} key={id} >
+            <p className={styles.title} >{title}</p>
+              <div className={styles['btn-container']} >
+                  <button type='button' className={styles['edit-btn']} onClick={()=>editItem(id)}>
+                     <FaEdit />
+                  </button>
+                  <button name='delete' type='button' className={styles['delete-btn']} onClick={(e)=>deleteItem(id)}>
+                     <FaTrash /> 
+                  </button>
+              </div>
+          </article>
+        )
+      })}
+    </div>
+  )
+}
+
+export default List
diff --git a/src/lib-components/Grocery List Site/index.js b/src/lib-components/Grocery List Site/index.js
@@ -0,0 +1,96 @@
+import React, { useState, useEffect } from 'react'
+import List from './List'
+import Alert from './Alert'
+import styles from './index.module.css'
+
+const getLocalStorage = ()=>{
+  let data = JSON.parse(localStorage.getItem('list'));
+  if(data){
+    return data;
+  }
+  else return [] ;
+}
+
+function GroceryList() {
+  const [name, setName] = useState('');
+  const [list, setList] = useState(getLocalStorage);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editId, setEditId] = useState();
+  const [alert, setAlert] = useState({
+    value : false,
+    text : '',
+    type : ''
+  });
+
+  const showAlert = (value=false, text='', type='') => {
+    setAlert({value, text, type});
+  }
+
+
+
+  const handleSubmit = (e)=>{
+    e.preventDefault();
+    if(name != ''){
+      setList(preVal=>{
+        let newList = {id:new Date().getTime().toString(), title:name};
+        return [...preVal , newList];
+      })
+    setName('');
+    showAlert(true, 'success', 'success');
+  }
+    if(name == ''){
+      showAlert(true, 'please enter some item', 'danger');
+    }
+    if(name && isEditing){
+      setList(
+        list.map(item => {
+          if(item.id === editId){
+            return {
+              ...item,
+              title : name
+            }
+          }
+          return item;
+        })
+      )
+      setName('');
+      setEditId(null);
+      setIsEditing(false);
+    }
+  }
+
+  useEffect(()=>{
+    localStorage.setItem('list',JSON.stringify(list));
+  },[list])
+
+
+  const deleteItem = (id)=>{
+      let newArray = list.filter(item=> item.id != id);
+      setList(newArray);
+      showAlert(true, 'Item deleted', 'danger');
+  }
+  const editItem = (id) =>{
+    let itemToEdit = list.find(item=> item.id===id);
+    setIsEditing(true);
+    setEditId(id);
+    setName(itemToEdit.title);
+  }
+  return(
+    <section className={styles['sectionCenter']} >
+      <form className={styles['grocery-form']} onSubmit={handleSubmit}>
+        {alert.value && <Alert {...alert} removeAlert={showAlert} list={list}/>}
+        <h3>Add your Grocery Here</h3>
+        <div className={styles['form-control']}>
+        <input className={styles.grocery} value={name} onChange={(e)=>setName(e.target.value)} />
+        <button type='submit' className={styles['submit-btn']}> {!isEditing ? 'Add Item' : 'Edit'}</button>
+        </div>
+      </form>
+      {list.length > 0 &&
+        <div className={styles['grocery-container']}>
+      <List gList={list} deleteItem={deleteItem} editItem={editItem}/>
+      </div>}
+    </section>
+  )
+}
+
+export default GroceryList
diff --git a/src/lib-components/Grocery List Site/index.module.css b/src/lib-components/Grocery List Site/index.module.css
