Merge pull request #29 from TryShape/issue-19-sort-shapes

Issue 19 sort shapes

Author: atapas

components/core/App.js

@@ -18,6 +18,7 @@ const App = (props) => {
   const [loading, setLoading] = useState(true); // shapes loading
 
   const [searchTerm, setSearchTerm] = useState(""); // search
+  const [sort, setSort] = useState("popularity"); // sort
 
   const { user } = props;
 
@@ -92,7 +93,9 @@ const App = (props) => {
     <>
       <Header {...props} 
         searchTerm={searchTerm}
-        setSearchTerm={setSearchTerm}/>
+        setSearchTerm={setSearchTerm}
+        sort={sort}
+        setSort={setSort} />
       {loading ? (
         <Loader
           style={{margin: '20% auto auto 42%'}}
@@ -102,7 +105,7 @@ const App = (props) => {
           width={300}
         />
       ) : (
-        <ShapeList {...props} data={ data } searchTerm={searchTerm} />
+        <ShapeList {...props} data={ data } searchTerm={searchTerm} sort={sort} />
       )}
     </>
   );

components/utils/Header.js

@@ -91,6 +91,7 @@ const NavbarSearchInputControl = styled(FormControl)`
 
 const CloseIcon = styled(FiX)`
   margin: 0.37rem;
+  cursor: pointer;
 `;
 
 const UserThumb = styled.div`
@@ -131,7 +132,9 @@ const Header = ({
   user, 
   setUser, 
   searchTerm,
-  setSearchTerm
+  setSearchTerm,
+  sort,
+  setSort
 }) => {
 
   const [searchterm, setSearchterm] = useState('');
@@ -167,12 +170,27 @@ const Header = ({
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
           />
-          <CloseIcon color='#ffffff' size='24px' />
+          <CloseIcon title="Clear Search Query" color='#ffffff' size='24px' onClick={() => setSearchTerm('')}/>
         </NavbarSearchInput>
-        <DropdownButton variant="outline-secondary" size="sm" id="dropdown-basic-button" title="View by Popularity" className="border-0">
-          <Dropdown.Item href="#/action-1">Likes</Dropdown.Item>
-          <Dropdown.Item href="#/action-2" active>Popularity</Dropdown.Item>
-          <Dropdown.Item href="#/action-3">Newly Added</Dropdown.Item>
+        <DropdownButton variant="outline-secondary" size="sm" id="dropdown-basic-button" title={`Sort by ${sort}`} className="border-0">
+          <Dropdown.Item 
+            href="#" 
+            active={sort==='oldest'} 
+            onClick={() =>setSort('oldest')}>
+            Oldest
+          </Dropdown.Item>
+          <Dropdown.Item 
+            href="#" 
+            active={sort==='popularity'} 
+            onClick={() =>setSort('popularity')}>
+            Popularity
+          </Dropdown.Item>
+          <Dropdown.Item 
+            href="#" 
+            active={sort==='recent'} 
+            onClick={() =>setSort('recent')}>
+            Recent
+          </Dropdown.Item>
         </DropdownButton>
       </NavbarSearchInputContainer>
 

components/utils/ShapeList.js

@@ -191,7 +191,14 @@ const LikeFilledIcon = styled(BsFillHeartFill)`
   cursor: pointer;
 `;
 
-const ShapeList = ({ setOpen, user, data, searchTerm }) => {
+const ShapeList = (
+  { 
+    setOpen, 
+    user, 
+    data, 
+    searchTerm, 
+    sort 
+  }) => {
 
   const filterShape = (shapes, searchTerm) => {
     if (!searchTerm) {
@@ -209,8 +216,16 @@ const ShapeList = ({ setOpen, user, data, searchTerm }) => {
   const [shapeToExport, setShapeToExport] = useState();
 
   useEffect(() =>{
-    setFilteredShape(filterShape(shapes, searchTerm));
-  }, [searchTerm, shapes]);
+    const copy = [...shapes];
+    if(sort === 'recent') {
+      copy.sort((a, b) => b.__createdtime__ - a.__createdtime__);
+    } else if(sort === 'popularity') {
+      copy.sort((a, b) => b.likes - a.likes);
+    } else if(sort === 'oldest') {
+      copy.sort((a, b) => a.__createdtime__ - b.__createdtime__);
+    }
+    setFilteredShape(filterShape(copy, searchTerm));
+  }, [searchTerm, shapes, sort]); 
 
   const handleSwicth = (shapeName) => {
 
@@ -359,19 +374,18 @@ const ShapeList = ({ setOpen, user, data, searchTerm }) => {
                 />
                 <ShapeActions className="shape-actions">
                   <ShapeActionsContainer>
-                  <span 
-                    title="Like"
+                  <span
                     onClick={(event, shapeId) => performLike(event, shape['shape_id'])}>
                     {
                       shape.liked ? 
                         (
-                          <Button variant="danger" className="btn-icon">
+                          <Button title="Remove Like" variant="danger" className="btn-icon">
                             <LikeFilledIcon size={24} />
                           </Button>
                         ) 
                         :
                         (
-                          <Button variant="outline-light" className="btn-icon">
+                          <Button title="Add Like" variant="outline-light" className="btn-icon">
                             <LikeIcon size={24} />
                           </Button>
                         )