feat: Now refreshing the shapes once created

Author: atapas

components/core/App.js

@@ -18,14 +18,18 @@ const App = (props) => {
   const [loading, setLoading] = useState(true); // shapes loading
 
   const [searchTerm, setSearchTerm] = useState(""); // search
-  const [sort, setSort] = useState("popularity"); // sort
+  const [sort, setSort] = useState("recent"); // sort
+
+  const [shapeAction, setShapeAction] = useState({
+    'action': '',
+    'payload': {}
+  });
 
   const { user } = props;
 
   useEffect(async () => {
     setData([]);
     setLoading(true);
-
     let shapes = [];
 
     if(user.length === 0) {
@@ -84,18 +88,21 @@ const App = (props) => {
     });
 
     console.log(shapes);
-
+    console.log({shapeAction});
     await setData(shapes);
+    console.log(shapes);
     setLoading(false);
-  }, [user]);
+  }, [user, shapeAction]);
 
   return (
     <>
       <Header {...props} 
         searchTerm={searchTerm}
         setSearchTerm={setSearchTerm}
         sort={sort}
-        setSort={setSort} />
+        setSort={setSort}
+        shapeAction={shapeAction} 
+        setShapeAction={setShapeAction} />
       {loading ? (
         <Loader
           style={{margin: '20% auto auto 42%'}}

components/core/CreateShape.js

@@ -22,7 +22,7 @@ const CreateShape = (props) => {
         "edges": 4, 
         "notes": "", 
         "clipPathType": "polygon",
-        "showShadow": false, 
+        "showShadow": true, 
         "backgroundColor": "#d61284", 
         "verticeCoordinates" : [
             {
@@ -258,6 +258,26 @@ const CreateShape = (props) => {
         }
         props.handleClose();
         toast.success(`Shape ${shapeInformation.name} created successfully.`);
+        props.setShapeAction({
+            ...props.shapeAction, 
+            "action": "add",
+            "payload": {
+                "backgroundColor": shapeInformation.backgroundColor,
+                "createdAt": null,
+                "createdBy": props.user.email,
+                "edges": shapeInformation.edges,
+                "email": null,
+                "email1": props.user.email,
+                "formula": shapeInformation.formula,
+                "likes": 0,
+                "name": shapeInformation.name,
+                "name1": props.user.displayName,
+                "notes": shapeInformation.notes,
+                "photoURL": props.user.photoURL,
+                "private": shapeInformation.private,
+                "type": shapeInformation.clipPathType
+            } 
+        });
     }
 
     return(

components/utils/Header.js

@@ -137,7 +137,9 @@ const Header = ({
   searchTerm,
   setSearchTerm,
   sort,
-  setSort
+  setSort,
+  shapeAction,
+  setShapeAction
 }) => {
 
   const [searchterm, setSearchterm] = useState('');
@@ -233,7 +235,12 @@ const Header = ({
           <div>Sign In</div>
         </Button>
       )}
-      <CreateShape show={showCreateShape} handleClose={closeModal} user={user} />
+      <CreateShape 
+        show={showCreateShape} 
+        handleClose={closeModal} 
+        user={user}
+        shapeAction={shapeAction} 
+        setShapeAction={setShapeAction} />
     </AppHeader>
   );
 };