cleanup

jgudo · Sep 3, 2019 · e7f7555 · e7f7555
1 parent cdafeee
commit e7f7555
Show file tree

Hide file tree

Showing 29 changed files with 382 additions and 196 deletions.
diff --git a/src/client/actions/filterActions.js b/src/client/actions/filterActions.js
@@ -5,7 +5,8 @@ import {
   SET_MIN_PRICE_FILTER,
   RESET_FILTER,
   APPLY_FILTER,
-  CLEAR_RECENT_SEARCH 
+  CLEAR_RECENT_SEARCH,
+  REMOVE_SELECTED_RECENT 
 } from '../constants/constants';
 
 export const setTextFilter = keyword => ({
@@ -36,6 +37,11 @@ export const clearRecentSearch = () => ({
   type: CLEAR_RECENT_SEARCH
 });
 
+export const removeSelectedRecent = keyword => ({
+  type: REMOVE_SELECTED_RECENT,
+  payload: keyword
+});
+
 export const applyFilter = filters => ({
   type: APPLY_FILTER,
   payload: filters

diff --git a/src/client/components/basket/BasketItemControl.jsx b/src/client/components/basket/BasketItemControl.jsx
@@ -14,7 +14,6 @@ const BasketItemControl = ({ action, product }) => {
     }
   };
 
-
   return (
     <div className="basket-item-control">
       <button 

diff --git a/src/client/components/product/ProductItem.jsx b/src/client/components/product/ProductItem.jsx
@@ -37,7 +37,7 @@ const ProductItem = ({
               />
             ) : <Skeleton width={100} height={70}/>}
           </div>
-          <h5 className="product-card-name text-overflow-ellipsis">{product.name || <Skeleton />}</h5>
+          <h5 className="product-card-name text-overflow-ellipsis">{product.name || <Skeleton width={90} />}</h5>
           <p className="product-card-brand">{product.brand || <Skeleton width={70} />}</p>
           <h4 className="product-card-price">{product.price ? displayMoney(product.price) : <Skeleton width={50} />}</h4>
         </div>

diff --git a/src/client/components/product/ProductList.jsx b/src/client/components/product/ProductList.jsx
@@ -4,9 +4,16 @@ import { addToBasket, removeFromBasket } from '../../actions/basketActions';
 import { displayActionMessage } from '../../helpers/utils';
 
 
-const ProductList = props => {
+const ProductList = ({ 
+  products, 
+  isLoading, 
+  requestStatus, 
+  filteredProducts, 
+  foundOnBasket, 
+  dispatch,
+  children 
+}) => {
   const [columnCount, setColumnCount] = useState(6);
-  const { products, isLoading, requestStatus, filteredProducts, foundOnBasket, dispatch } = props
 
   useEffect(() => {
     products.length === 0 && onGetProducts();
@@ -53,7 +60,7 @@ const ProductList = props => {
       </button>
     </div>
   ) : (
-    props.children({
+    children({
       columnCount,
       action: {
         addToBasket: onAddToBasket,

diff --git a/src/client/components/product/ProductSearch.jsx b/src/client/components/product/ProductSearch.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import { withRouter } from 'react-router-dom';
 import { useSelector, useDispatch } from 'react-redux';
-import { clearRecentSearch, setTextFilter } from '../../actions/filterActions';
+import { clearRecentSearch, removeSelectedRecent, setTextFilter } from '../../actions/filterActions';
 
 import Filters from '../ui/Filters';
 
@@ -76,15 +76,21 @@ const ProductSearch = (props) => {
             <h5 onClick={onClearRecentSearch}>Clear</h5>
           </div>
           {filter.recent.map((item, index) => (
-            <div 
-                className="pill" 
-                key={`${item}${index}`}
-                onClick={() => {
-                  dispatch(setTextFilter(item));
-                  props.history.push('/');
-                }}
-            >
-              <h5 className="pill-title">{item}</h5>
+            <div className="pill-wrapper" key={`${item}${index}`}>
+              <div className="pill padding-right-l">
+                <h5 
+                    className="pill-title"
+                    onClick={() => {
+                      dispatch(setTextFilter(item));
+                      props.history.push('/');
+                    }}
+                >
+                  {item}
+                </h5>
+                <div className="pill-remove" onClick={() => dispatch(removeSelectedRecent(item))}>
+                  <h5 className="margin-0">x</h5>
+                </div>
+              </div>
             </div>
           ))}
           {filter.recent.length === 0 && (

diff --git a/src/client/components/ui/Button.jsx b/src/client/components/ui/Button.jsx
diff --git a/src/client/components/ui/Filters.jsx b/src/client/components/ui/Filters.jsx
@@ -32,7 +32,7 @@ const Filters = (props) => {
     });
     setMounted(true);
     window.scrollTo(0, 0);
-  }, [filter]);
+  }, [filter.brand, filter.minPrice, filter.maxPrice, filter.sortBy]);
 
 
   const onPriceChange = (min, max) => {
@@ -87,6 +87,8 @@ const Filters = (props) => {
             <option value="">All Brands</option>
             <option value="salt">Salt Maalat</option>
             <option value="betsin">Betsin Maalat</option>
+            <option value="black">Black Kibal</option>
+            <option value="sexbomb">Sexbomb</option>
           </select>
         )}
       </div>

diff --git a/src/client/components/ui/Navigation.jsx b/src/client/components/ui/Navigation.jsx
@@ -26,7 +26,8 @@ const Navigation = ({ path }) => {
       if (window.pageYOffset >= 70) {
         Object.assign(navbar.current.style, {
           position: 'fixed',
-          animation: 'slide-down .3s ease',
+          animation: 'slide-down .3s ease 1',
+          animationFillMode: 'forwards',
           top: 0,
           background: getStyleProperty('--nav-bg-scrolled'),
           boxShadow: getStyleProperty('--nav-bg-shadow')
@@ -68,7 +69,7 @@ const Navigation = ({ path }) => {
     >
       <div className="logo">
         <Link to="/">
-          <h2>SALINAKA</h2>
+          <h3>SALINAKA</h3>
         </Link>
       </div>
       <ul className="navigation-menu">

diff --git a/src/client/components/ui/ScrollToTop.jsx b/src/client/components/ui/ScrollToTop.jsx
@@ -1,19 +1,9 @@
 import React, { useEffect } from 'react';
-import { useDispatch } from 'react-redux';
-import { setAuthStatus, isAuthenticating } from '../../actions/authActions';
 import { withRouter } from 'react-router-dom';
 
 const ScrollToTop = Component => withRouter((props) => {
-    const dispatch = useDispatch();
-
     useEffect(() => {
-        const { pathname } = props.location;
-
         window.scrollTo(0, 0);
-        if (pathname === '/signin' || pathname === '/signup' || pathname === '/forgot_password') {
-            dispatch(setAuthStatus(null));
-            dispatch(isAuthenticating(false));
-        }
     }, [props.location])
 
     return <Component {...props}/>

diff --git a/src/client/components/ui/mobile/MobileNavigation.jsx b/src/client/components/ui/mobile/MobileNavigation.jsx
@@ -7,84 +7,81 @@ import UserNav from '../../../views/profile/UserAvatar';
 
 import { HOME, SIGNIN, SIGNUP, SEARCH } from '../../../constants/routes';
 
-const Navigation = (props) => {
-  const { 
-    path,  
-    disabledPaths, 
-    basketLength, 
-    isAuthenticating, 
-    profile, 
-    isAuth 
-  } = props;
-
-  return (
-    <nav className="mobile-navigation">
-      <div className="mobile-navigation-main"> 
-        <div className="mobile-navigation-logo">
-          <Link to={HOME}>
-            <h3 className="margin-0 color-light">SALINAKA</h3>
-          </Link>
-        </div>
-        <div className="product-search-wrapper">
-          <input 
-              className="search-input product-search-input"
-              onClick={() => props.history.push(SEARCH)}
-              readOnly={true}
-              placeholder="Search for product" 
-              type="text" 
-          />
-          <div className="searchbar-icon" />
-        </div>
+const Navigation = ({ 
+  path,  
+  disabledPaths, 
+  basketLength, 
+  isAuthenticating, 
+  profile, 
+  isAuth,
+  history 
+}) => (
+  <nav className="mobile-navigation">
+    <div className="mobile-navigation-main"> 
+      <div className="mobile-navigation-logo">
+        <Link to={HOME}>
+          <h3 className="margin-0 color-light">SALINAKA</h3>
+        </Link>
       </div>
-      <ul className="mobile-navigation-menu"> 
-        <BasketToggle>
-          {({ onClickToggle }) => (
-            <li className="basket-toggle mobile-navigation-item">
-              <button 
-                  className="navigation-menu-link button-link"
-                  disabled={disabledPaths.includes(path)}
-                  onClick={onClickToggle}
+      <div className="product-search-wrapper">
+        <input 
+            className="search-input product-search-input"
+            onClick={() => history.push(SEARCH)}
+            readOnly={true}
+            placeholder="Search for product" 
+            type="text" 
+        />
+        <div className="searchbar-icon" />
+      </div>
+    </div>
+    <ul className="mobile-navigation-menu"> 
+      <BasketToggle>
+        {({ onClickToggle }) => (
+          <li className="basket-toggle mobile-navigation-item">
+            <button 
+                className="navigation-menu-link button-link"
+                disabled={disabledPaths.includes(path)}
+                onClick={onClickToggle}
+            >
+              <span>
+                <Badge count={basketLength}/>
+                My Basket
+              </span>
+            </button>
+          </li>
+        )}
+      </BasketToggle>
+      {isAuth ? (
+        <li className="mobile-navigation-item">
+          <UserNav isAuthenticating={isAuthenticating} profile={profile} />
+        </li>
+      ) : (
+        <>
+          {path !== SIGNUP && (
+            <li className="mobile-navigation-item">
+              <Link 
+                  className="navigation-menu-link"
+                  to={SIGNUP}
               >
-                <span>
-                  <Badge count={basketLength}/>
-                  My Basket
-                </span>
-              </button>
+                Sign Up
+              </Link>
             </li>
           )}
-        </BasketToggle>
-        {isAuth ? (
-          <li className="mobile-navigation-item">
-            <UserNav isAuthenticating={isAuthenticating} profile={profile} />
-          </li>
-        ) : (
-          <>
-            {path !== SIGNUP && (
-              <li className="mobile-navigation-item">
-                <Link 
-                    className="navigation-menu-link"
-                    to={SIGNUP}
-                >
-                  Sign Up
-                </Link>
-              </li>
-            )}
-            {path !== SIGNIN && (
-              <li className="mobile-navigation-item">
-                <Link 
-                    className="navigation-menu-link"
-                    to={SIGNIN}
-                >
-                  Sign In
-                </Link>
-              </li>
-            )}
-          </>
-        )}
-      </ul>
-    </nav>
-  );
-};
+          {path !== SIGNIN && (
+            <li className="mobile-navigation-item">
+              <Link 
+                  className="navigation-menu-link"
+                  to={SIGNIN}
+              >
+                Sign In
+              </Link>
+            </li>
+          )}
+        </>
+      )}
+    </ul>
+  </nav>
+);
 
 Navigation.propType = {
   path: PropTypes.string.isRequired,

diff --git a/src/client/constants/constants.js b/src/client/constants/constants.js
@@ -45,6 +45,7 @@ export const SET_MAX_PRICE_FILTER = 'SET_MAX_PRICE_FILTER';
 export const RESET_FILTER = 'RESET_FILTER';
 export const APPLY_FILTER = 'APPLY_FILTER';
 export const CLEAR_RECENT_SEARCH = 'CLEAR_RECENT_SEARCH';
+export const REMOVE_SELECTED_RECENT = 'REMOVE_SELECTED_RECENT';
 
 export const REGISTER_USER = 'REGISTER_USER';
 export const GET_USER = 'GET_USER';

diff --git a/src/client/helpers/utils.js b/src/client/helpers/utils.js
@@ -35,11 +35,19 @@ export const displayActionMessage = (msg, status = 'info') => {
     : 'toast-error'
   }`;
   span.className = 'toast-msg';
-
   span.textContent = msg;
   div.appendChild(span);
 
-  document.body.appendChild(div);
+  try {
+    if (document.querySelector('.toast')) {
+      document.body.removeChild(document.querySelector('.toast'));
+      document.body.appendChild(div);
+    } else {
+      document.body.appendChild(div);
+    }
+  } catch (e) {
+    console.log(e);
+  }
 
   setTimeout(() => {
     document.body.removeChild(div);

diff --git a/src/client/reducers/authReducer.js b/src/client/reducers/authReducer.js
@@ -2,7 +2,7 @@ import { SIGNIN_SUCCESS, SIGNOUT_SUCCESS } from '../constants/constants';
 
 const initState = {
   id: 'test-123',
-  type: 'admin',
+  type: 'client',
   provider: 'password'
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,7 +14,6 @@ const BasketItemControl = ({ action, product }) => { @@
         }
       };
       return (
         <div className="basket-item-control">
           <button
@@ Expand Down @@