chore(): add ViewportSizeProvider (#388)

* chore(): add ViewportSizeProvider

* chore(): add tests

ui/design/package.json

@@ -37,7 +37,11 @@
     "pack:watch": "nodemon"
   },
   "nodemonConfig": {
-    "ignore": ["lib/*", "dist/*", "build/*"],
+    "ignore": [
+      "lib/*",
+      "dist/*",
+      "build/*"
+    ],
     "exec": "npm run pack",
     "ext": "ts,tsx"
   },
@@ -63,20 +67,22 @@
   },
   "devDependencies": {
     "@testing-library/react": "^9.3.2",
+    "@testing-library/react-hooks": "^3.2.1",
     "@types/classnames": "^2.2.9",
     "@types/jest": "^24.0.21",
     "@types/node": "^12.12.3",
     "@types/react": "^16.9.11",
     "@types/react-dom": "^16.9.3",
     "@types/react-test-renderer": "^16.9.1",
-    "@types/styled-components": "^4.1.20",
     "@types/slate": "0.47.4",
     "@types/slate-react": "^0.22.8",
-    "react-toastify": "^5.4.0",
+    "@types/styled-components": "^4.1.20",
     "dayjs": "^1.8.16",
+    "react-test-renderer": "^16.12.0",
+    "react-toastify": "^5.4.0",
     "slate": "^0.53.0",
-    "slate-react": "^0.53.0",
-    "slate-history": "0.54.2"
+    "slate-history": "0.54.2",
+    "slate-react": "^0.53.0"
   },
   "peerDependencies": {
     "react": "^16.11.0",

ui/design/src/components/Providers/__test__/viewport-dimension.test.tsx

@@ -0,0 +1,44 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import responsiveBreakpoints from '../../../styles/responsive-breakpoints';
+import { resizeWindow } from '../../../test-utils';
+import ViewportSizeProvider, { useViewportSize } from '../viewport-dimension';
+
+const breakpoints = responsiveBreakpoints.global.breakpoints;
+
+describe('ViewportSize', () => {
+  let viewportSize: { dimensions: { width: number; height: number }; size: string };
+  beforeEach(() => {
+    const DummyComponent = () => {
+      viewportSize = useViewportSize();
+      return <></>;
+    };
+    const tree = (
+      <ViewportSizeProvider>
+        <DummyComponent />
+      </ViewportSizeProvider>
+    );
+    render(tree);
+  });
+  it('should react on window resize', () => {
+    act(() => resizeWindow(250, 200));
+    expect(viewportSize).toBeDefined();
+    expect(viewportSize.dimensions.width).toBe(250);
+    expect(viewportSize.dimensions.height).toBe(200);
+    act(() => resizeWindow(800, 600));
+    expect(viewportSize.dimensions.width).toBe(800);
+    expect(viewportSize.dimensions.height).toBe(600);
+  });
+  it('should return correct size attribute', () => {
+    act(() => resizeWindow(520, 300));
+    expect(viewportSize).toBeDefined();
+    expect(breakpoints[viewportSize.size].value).toEqual(breakpoints.small.value);
+    act(() => resizeWindow(1022, 768));
+    expect(breakpoints[viewportSize.size].value).toEqual(breakpoints.medium.value);
+    act(() => resizeWindow(1223, 800));
+    expect(breakpoints[viewportSize.size].value).toEqual(breakpoints.large.value);
+    act(() => resizeWindow(1920, 1080));
+    expect(breakpoints[viewportSize.size].value).toEqual(breakpoints.xlarge.value);
+  });
+});

ui/design/src/components/Providers/viewport-dimension.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import responsiveBreakpoints from '../../styles/responsive-breakpoints';
+
+const breakpoints = responsiveBreakpoints.global.breakpoints;
+
+const ViewportSizeCtx = React.createContext({
+  dimensions: { width: 0, height: 0 },
+  size: '',
+});
+const getSizeByWidth = (width: number) => {
+  const size = Object.keys(breakpoints).reduce((prev, curr) => {
+    if (breakpoints[prev].value - width <= 0) {
+      return curr;
+    }
+    return prev;
+  });
+  return size;
+};
+
+export interface IViewportDimProps {
+  children: React.ReactElement;
+}
+const ViewportSizeProvider = ({ children }: IViewportDimProps) => {
+  const [dimensions, setDimensions] = React.useState({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  });
+  const [size, setSize] = React.useState(getSizeByWidth(dimensions.width));
+
+  React.useEffect(() => {
+    const handleResize = () => {
+      setDimensions({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+      setSize(getSizeByWidth(window.innerWidth));
+    };
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+  return (
+    <ViewportSizeCtx.Provider value={{ dimensions, size }}>{children}</ViewportSizeCtx.Provider>
+  );
+};
+export const useViewportSize = () => React.useContext(ViewportSizeCtx);
+export default ViewportSizeProvider;

ui/design/src/components/Spinner/__test__/__snapshots__/index.test.tsx.snap

@@ -2,10 +2,10 @@
 
 exports[`Spinner component should match the snapshot: spinner-snapshot 1`] = `
 <div
-  className="StyledGrommet-sc-19lkkz7-0 kheDnz"
+  className="StyledGrommet-sc-19lkkz7-0 fPtJnA"
 >
   <div
-    className="sc-bdVaJa cvdPUx"
+    className="sc-bdVaJa kRSGDk"
   >
     <svg
       className="sc-htpNat bUCXzc"

ui/design/src/index.ts

@@ -22,9 +22,11 @@ import {
 import { Icon, iconTypes } from './components/Icon';
 import { CommentInput, SearchInput } from './components/Input';
 import { NotificationsPopover, SelectPopover } from './components/Popovers';
+import ViewportSizeProvider, { useViewportSize } from './components/Providers/viewport-dimension';
 import { SubtitleTextIcon, TextIcon } from './components/TextIcon';
 import { Topbar } from './components/Topbar/index';
 import responsiveBreakpoints from './styles/responsive-breakpoints';
+
 /* Themes and theme related utils */
 import { createTheme } from './styles/themes/create-theme';
 import darkTheme from './styles/themes/dark-theme';
@@ -71,6 +73,8 @@ const exported = {
   css,
   styled,
   createGlobalStyle,
+  ViewportSizeProvider,
+  useViewportSize,
 };
 
 export default exported;

ui/design/src/test-utils/index.tsx

@@ -1,4 +1,4 @@
-import { queries, render } from '@testing-library/react';
+import { fireEvent, queries, render } from '@testing-library/react';
 import { Grommet, ThemeType } from 'grommet';
 import React, { ReactElement } from 'react';
 import lightTheme from '../styles/themes/light-theme';
@@ -16,6 +16,14 @@ export const delay = (ms = 100) => new Promise(res => setTimeout(res, ms));
 export const customRender = (ui: ReactElement, options: any) =>
   render(ui, { wrapper: WithProviders, queries: { ...queries }, ...options });
 
+export const resizeWindow = (width: number, height: number) => {
+  // @ts-ignore
+  window.innerWidth = width;
+  // @ts-ignore
+  window.innerHeight = height;
+  fireEvent(window, new Event('resize'));
+};
+
 export const createFile = (name: string, type: string = 'image/png') => {
   return new File(['test-file-content'], name, { type });
 };

ui/plugins/feed/src/components/App.tsx

@@ -1,8 +1,11 @@
+import DS from '@akashaproject/design-system';
 import React, { PureComponent, Suspense } from 'react';
 import { I18nextProvider } from 'react-i18next';
 import { feedInit, FeedProvider, feedReducer } from '../state/feed';
 import Routes from './routes';
 
+const { ViewportSizeProvider } = DS;
+
 export interface IProps {
   singleSpa: any;
   activeWhen: {
@@ -69,13 +72,15 @@ class App extends PureComponent<IProps> {
     }
 
     return (
-      <Suspense fallback={<div>Loading Feed</div>}>
-        <I18nextProvider i18n={i18n ? i18n : null}>
-          <FeedProvider reducer={feedReducer} initialState={feedInit()}>
-            <Routes {...this.props} />
-          </FeedProvider>
-        </I18nextProvider>
-      </Suspense>
+      <ViewportSizeProvider>
+        <Suspense fallback={<div>Loading Feed</div>}>
+          <I18nextProvider i18n={i18n ? i18n : null}>
+            <FeedProvider reducer={feedReducer} initialState={feedInit()}>
+              <Routes {...this.props} />
+            </FeedProvider>
+          </I18nextProvider>
+        </Suspense>
+      </ViewportSizeProvider>
     );
   }
 }

ui/plugins/feed/src/components/FeedItem/feed-item.tsx

@@ -16,7 +16,6 @@ const noop = () => {
 
 const FeedItem: React.FC<IFeedItemProps> = props => {
   const [feedState, feedActions] = useFeed();
-
   const entryData = feedState.itemData[props.entryId];
 
   feedActions.getFeedItemData({ entryId: props.entryId });