33 show progress (#36)

* add event on the button for animation * get the scroll from the window * update the steps context * add keyframe to the cards * add animation to the justCompletedTask * refactor style and progress animation logic #33 Co-authored-by: Ahmed Shatat <a.shatat@hotmail.com>
yalla-coop · Jul 15, 2021 · b0608dc · b0608dc
1 parent 00096c5
commit b0608dc
Show file tree

Hide file tree

Showing 10 changed files with 165 additions and 98 deletions.
diff --git a/client/src/components/Cards/index.js b/client/src/components/Cards/index.js
@@ -1,72 +1,83 @@
+import { forwardRef } from 'react';
+import { Link } from 'react-router-dom';
+
 import * as S from './style';
 import * as T from '../Typography';
 import Icon from '../Icon';
-import { Link } from 'react-router-dom';
 
-const Card = ({
-  variant = 'primary',
-  direction = 'right',
-  content,
-  children,
-  title,
-  isCompleted,
-  to = '/',
-  ...props
-}) => {
-  const bgColor = `${variant}Light`;
-  const borderColor = `${variant}Mid`;
-  const circleColor = `${variant}Main`;
-  const renderChild = () => {
-    if (isCompleted) {
-      return (
-        <>
-          <Icon icon="tick" color="white" />
-          <T.P
-            weight="bold"
-            color="white"
-            mt="4"
-            ta="center"
-            style={{ maxWidth: 150 }}
-          >
-            {title}
-          </T.P>
-        </>
-      );
-    }
+const renderChild = (isCompleted, title) => {
+  if (isCompleted) {
     return (
-      <T.H1 weight="bold" color="white" ta="center">
-        {title}
-      </T.H1>
+      <>
+        <Icon icon="tick" color="white" />
+        <T.P
+          weight="bold"
+          color="white"
+          mt="4"
+          ta="center"
+          style={{ maxWidth: 150 }}
+        >
+          {title}
+        </T.P>
+      </>
     );
-  };
+  }
   return (
-    <S.Wrapper bgColor={bgColor} {...props}>
-      <Link to={to}>
-        <S.Container direction={direction}>
-          {isCompleted && (
-            <T.P
-              weight="bold"
-              color="neutralTertiary"
-              style={{ alignSelf: 'flex-start' }}
-              mb="2"
-            >
-              Completed!
-            </T.P>
-          )}
-          <T.P small color="neutralTertiary">
-            {content}
-          </T.P>
-          <S.Circle
-            circleColor={circleColor}
-            borderColor={borderColor}
-            direction={direction}
-          >
-            {renderChild()}
-          </S.Circle>
-        </S.Container>
-      </Link>
-    </S.Wrapper>
+    <T.H1 weight="bold" color="white" ta="center">
+      {title}
+    </T.H1>
   );
 };
 
+const Card = forwardRef(
+  (
+    {
+      variant = 'primary',
+      direction = 'right',
+      content,
+      children,
+      title,
+      isCompleted,
+      handleClick,
+      isJustCompletedOne,
+      to = '/',
+      ...props
+    },
+    ref
+  ) => {
+    const bgColor = `${variant}Light`;
+    const borderColor = `${variant}Mid`;
+    const circleColor = `${variant}Main`;
+    return (
+      <S.Wrapper bgColor={bgColor} onClick={handleClick} {...props} ref={ref}>
+        <Link to={to} style={{ color: 'transparent' }}>
+          <S.Container direction={direction}>
+            {isCompleted && (
+              <T.P
+                weight="bold"
+                color="neutralTertiary"
+                style={{ alignSelf: 'flex-start' }}
+                mb="2"
+              >
+                Completed!
+              </T.P>
+            )}
+            <T.P isSmall color="neutralTertiary">
+              {content}
+            </T.P>
+            <S.Circle
+              circleColor={circleColor}
+              borderColor={borderColor}
+              direction={direction}
+              isJustCompletedOne={isJustCompletedOne}
+            >
+              {renderChild(isCompleted, title)}
+            </S.Circle>
+          </S.Container>
+        </Link>
+      </S.Wrapper>
+    );
+  }
+);
+
 export default Card;
diff --git a/client/src/components/Cards/style.js b/client/src/components/Cards/style.js
@@ -1,6 +1,18 @@
 import styled from '@emotion/styled';
+import { keyframes } from '@emotion/react';
+
 import setMargin from './../../helpers/set-margin';
 
+const bounce = (start) => keyframes`
+  0% {
+    background-color: currentColor;
+  }
+
+  100% {
+    background-color: ${start};
+  }
+`;
+
 export const Wrapper = styled.div`
   ${setMargin};
   width: 100%;
@@ -40,4 +52,6 @@ export const Circle = styled.div`
   justify-content: center;
   align-items: center;
   flex-direction: column;
+  animation: ${(props) => props.isJustCompletedOne && bounce(props.circleColor)}
+    3s ease;
 `;
diff --git a/client/src/components/Inputs/Dropdown/index.js b/client/src/components/Inputs/Dropdown/index.js
@@ -1,11 +1,13 @@
 import { useState } from 'react';
 import { Select as AntdSelect } from 'antd';
+import { css } from '@emotion/react';
+
 import * as T from '../../Typography';
 import * as S from './style';
 import * as CS from './../style';
 import Icon from '../../Icon';
 
-const { OptGroup: AntdOptGroup } = AntdSelect;
+const { OptGroup: AntdOptGroup, Option: AntdOption } = AntdSelect;
 
 const Dropdown = ({
   handleChange,
@@ -49,15 +51,18 @@ const Dropdown = ({
           key={groupLabel}
         >
           {_options.map((opt) => (
-            <S.Option
+            <AntdOption
+              className={css`
+                ${S.OptionStyle}
+              `}
               key={`${groupLabel}_${opt.label}`}
               value={opt.value}
               points={opt.points}
               isSelected={isSelected(opt.value)}
               {...options}
             >
               {opt.label}
-            </S.Option>
+            </AntdOption>
           ))}
         </AntdOptGroup>
       ));
@@ -66,9 +71,17 @@ const Dropdown = ({
       const { value: _value, label: _label } = options;
 
       return (
-        <S.Option key={_value} value={_value} label={_label} {...options}>
+        <AntdOption
+          className={css`
+            ${S.OptionStyle}
+          `}
+          key={_value}
+          value={_value}
+          label={_label}
+          {...options}
+        >
           {_label}
-        </S.Option>
+        </AntdOption>
       );
     });
   };

diff --git a/client/src/components/Inputs/Dropdown/style.js b/client/src/components/Inputs/Dropdown/style.js
@@ -1,10 +1,6 @@
 import styled from '@emotion/styled';
 import setMargin from '../../../helpers/set-margin';
 
-import { Select as AntdSelect } from 'antd';
-
-const { Option: AntdOption } = AntdSelect;
-
 export const Field = styled.div`
   ${setMargin};
   width: ${({ w }) => w || '100%'};
@@ -96,7 +92,7 @@ export const Answer = styled.div`
   width: 100%;
 `;
 
-export const Option = styled(AntdOption)`
+export const OptionStyle = `
   font-size: 16px;
   font-weight: normal;
   padding: 0.5rem 1rem;

diff --git a/client/src/components/Layout/General/style.js b/client/src/components/Layout/General/style.js
@@ -41,7 +41,7 @@ export const Content = styled.main`
   overflow: hidden;
   max-width: ${({ maxWidth, theme: { maxWidths } }) =>
     maxWidth || maxWidths.desktop};
-  padding: ${({ theme: { spacings } }) => `${spacings[8]} ${spacings[10]}`};
+  padding: ${({ theme: { spacings } }) => `${spacings[8]} 0`};
   ${({ theme }) => theme.media.tablet} {
     padding: ${({ theme: { spacings } }) => `${spacings[7]} 0`};
   }

diff --git a/client/src/components/Typography/index.js b/client/src/components/Typography/index.js
@@ -38,10 +38,11 @@ const Head2 = styled(Title)`
 `;
 export const H2 = (props) => <Head2 {...props} level={2} />;
 
-export const P = styled(Paragraph)`
+export const P = styled(({ isSmall, ...props }) => <Paragraph {...props} />)`
   ${setMargin};
   ${commonStyle};
-  font-size: ${({ small }) => (small ? '14px !important' : '16px !important')};
+  font-size: ${({ isSmall }) =>
+    isSmall ? '14px !important' : '16px !important'};
   line-height: ${({ weight }) => (weight === 'bold' ? '24px' : '160%')};
   font-weight: ${({ weight }) => (weight ? weights[weight] : '400 !important')};
   pre {

diff --git a/client/src/context/lang.js b/client/src/context/lang.js
@@ -2,7 +2,7 @@ import { createContext, useState, useContext } from 'react';
 
 const langOptions = [
   { value: 'english', label: 'English' },
-  { value: 'french', label: 'French' },
+  // { value: 'french', label: 'French' },
 ];
 
 const initialLang = 'english';

diff --git a/client/src/context/steps.js b/client/src/context/steps.js
@@ -81,6 +81,7 @@ const StepsContext = createContext({
 
 const StepsProvider = ({ children, ...props }) => {
   const [steps, setSteps] = useState(getStepsFromStorage);
+  const [justCompletedId, setJustCompletedId] = useState('');
 
   const checkUncheckItem = (stepName, itemKey) => {
     setSteps((prevSteps) => {
@@ -116,7 +117,12 @@ const StepsProvider = ({ children, ...props }) => {
     });
   };
 
-  const value = { steps, checkUncheckItem };
+  const value = {
+    steps,
+    checkUncheckItem,
+    justCompletedId,
+    setJustCompletedId,
+  };
   return (
     <StepsContext.Provider value={value} {...props}>
       {children}

diff --git a/client/src/pages/Home/index.js b/client/src/pages/Home/index.js
@@ -1,3 +1,5 @@
+import { useEffect, useRef } from 'react';
+
 import Card from '../../components/Cards';
 import { Typography as T, Inputs as I } from '../../components';
 import { t } from '../../helpers';
@@ -9,9 +11,18 @@ import * as S from './style';
 
 const Home = () => {
   const { lang, langOptions, setLang } = useLang();
-  const { steps } = useSteps();
-
+  const { steps, justCompletedId, setJustCompletedId } = useSteps();
   const currentStep = steps.find((step) => !step.isCompleted);
+  const currentStepRef = useRef();
+
+  useEffect(() => {
+    if (currentStepRef.current && justCompletedId) {
+      currentStepRef.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+      });
+    }
+  }, [justCompletedId]);
 
   return (
     <>
@@ -35,11 +46,15 @@ const Home = () => {
         </S.HeadContainer>
       </S.PageHead>
       {steps.map((step, i) => {
+        const isCurrentStep = step.name === currentStep.name;
         const variant = step.isCompleted
           ? 'tertiary'
-          : step.name === currentStep.name
+          : isCurrentStep
           ? 'secondary'
           : 'primary';
+        const isJustCompletedOne = step.id === justCompletedId;
+        // To only add ref to the currentStep
+        const currentRef = isCurrentStep ? currentStepRef : null;
         return (
           <Card
             key={step.id}
@@ -49,7 +64,12 @@ const Home = () => {
             variant={variant}
             direction={i % 2 === 0 ? 'left' : 'right'}
             mt="7"
+            isJustCompletedOne={isJustCompletedOne}
             to={n.STEPS.STEP.replace(':id', step.id)}
+            ref={currentRef}
+            handleClick={() => {
+              setJustCompletedId('');
+            }}
           />
         );
       })}