Merge pull request #327 from AppQuality/flip-card-mobilize

feat(flip-card): update header buttons based on window size

Author: cannarocks

src/pages/Campaign/widgets/widgetCards/FlipCard/FlipCardHeader.tsx

@@ -1,5 +1,6 @@
 import { IconButton } from '@appquality/unguess-design-system';
 import styled from 'styled-components';
+import { theme as globalTheme } from 'src/app/theme';
 import { ReactComponent as LineGraphIconFill } from 'src/assets/icons/line-graph-fill.svg';
 import { ReactComponent as ListBulletIconFill } from 'src/assets/icons/list-bullet-fill.svg';
 import { WidgetCardHeader } from '../common/WidgetCardHeader';
@@ -17,15 +18,20 @@ const FlipButton = styled(IconButton)<{ isActive?: boolean }>`
   margin-left: ${(p) => p.theme.space.xs};
 `;
 
+export const FlipButtonContainer = styled.div`
+  display: flex;
+`;
+
 export const FlipCardHeader = ({ children, hasBack }: FlipCardHeaderProps) => {
-  const { visibleFace, setVisibleFace } = useFlipCardContext();
+  const { visibleFace, setVisibleFace, width } = useFlipCardContext();
+  const breakpointMd = parseInt(globalTheme.breakpoints.md, 10);
 
   return (
     <WidgetCardHeader
       title={children}
       action={
-        hasBack === false ? null : (
-          <div>
+        hasBack === false || width < breakpointMd ? null : (
+          <FlipButtonContainer>
             <FlipButton
               isActive={visibleFace === 'front'}
               size="small"
@@ -44,7 +50,7 @@ export const FlipCardHeader = ({ children, hasBack }: FlipCardHeaderProps) => {
                 color={`${visibleFace === 'back' && 'white'}`}
               />
             </FlipButton>
-          </div>
+          </FlipButtonContainer>
         )
       }
     />

src/pages/Campaign/widgets/widgetCards/FlipCard/context/FlipCardContext.tsx

@@ -1,4 +1,7 @@
 import { createContext, useContext, useMemo, useState } from 'react';
+import { theme as globalTheme } from 'src/app/theme';
+import { isMinMedia } from 'src/common/utils';
+import useWindowSize from 'src/hooks/useWindowSize';
 import { FaceType, FlipCardContextType } from '../types';
 
 export const FlipCardContext = createContext<FlipCardContextType | null>(null);
@@ -8,15 +11,24 @@ export const FlipCardContextProvider = ({
 }: {
   children: React.ReactNode;
 }) => {
-  const [visibleFace, setVisibleFace] = useState<FaceType>('front');
+  const { width } = useWindowSize();
+  const breakpointMd = parseInt(globalTheme.breakpoints.md, 10);
 
-  const flipCardContextValue = useMemo(
-    () => ({
+  const isDesktop = isMinMedia(globalTheme.breakpoints.sm);
+  const [visibleFace, setVisibleFace] = useState<FaceType>(
+    isDesktop ? 'front' : 'back'
+  );
+
+  const flipCardContextValue = useMemo(() => {
+    if (width < breakpointMd) {
+      setVisibleFace('back');
+    }
+    return {
       visibleFace,
       setVisibleFace,
-    }),
-    [visibleFace, setVisibleFace]
-  );
+      width,
+    };
+  }, [visibleFace, setVisibleFace, width]);
 
   return (
     <FlipCardContext.Provider value={flipCardContextValue}>

src/pages/Campaign/widgets/widgetCards/FlipCard/types.ts

@@ -1,6 +1,7 @@
 export type FlipCardContextType = {
   visibleFace: FaceType;
   setVisibleFace: (face: FaceType) => void;
+  width: number;
 };
 
 export interface FlipCardHeaderProps {