@applicaster/quick-brick-core 11.0.0-rc.99 → 12.0.0-alpha.5035843303

package/App/DeepLinking/helpers/index.ts

@@ -1,4 +1,3 @@
-// @flow
 import * as R from "ramda";
 import url from "url";
 import atob from "atob";
@@ -9,8 +8,8 @@ import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 type UrlSchemeParams = Record<string, unknown>;
 
 type UrlScheme = {
-  host?: string;
-  path?: string;
+  host?: string | null;
+  path?: string | null;
   scheme?: string;
   query?: UrlSchemeParams;
   fragment?: string;
@@ -29,8 +28,6 @@ const unescape = R.compose(...R.map(R.apply(R.replace), escapedChars));
 /**
  * tries to decode a url encoded to a base64 string.
  * returns the original string if decoding is not possible or fails
- * @param {String} urlString
- * @returns {String}
  */
 export function decodeUrl(urlString: string): string {
   try {
@@ -44,8 +41,8 @@ export function decodeUrl(urlString: string): string {
 
 /**
  * parses a url string into an object, providing values for the different parts of the url
- * @param {String} urlString to parse
- * @returns {Object} url object - see UrlScheme type above
+ * @param `urlString` to parse
+ * @returns url object - see UrlScheme type above
  */
 export function parseUrl(urlString: string): UrlScheme {
   const {

package/App/ErrorBoundary/__tests__/errorBoundary.test.js

@@ -1,4 +1,3 @@
-// @flow
 import React from "react";
 import { View, Text } from "react-native";
 import { shallow } from "enzyme";

package/App/ModalProvider/index.tsx

@@ -6,6 +6,7 @@ import { ModalPresenter } from "./ModalPresenter";
 import { ModalContent } from "./ModalContent";
 import { ModalChildrenWrapper } from "./ModalChildrenWrapper";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
+import { ScreenContextProvider } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenContext";
 import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/routeTypes";
 
 export function ModalProvider() {
@@ -32,18 +33,20 @@ export function ModalProvider() {
     ...modalState.props,
   };
 
+  const pathname = `${ROUTE_TYPES.MODAL}/${modalScreenProps?.screenId}`;
+
   return (
-    <PathnameContext.Provider
-      value={`${ROUTE_TYPES.MODAL}/${modalScreenProps?.screenId}`}
-    >
-      <ModalPresenter
-        visible={modalVisible && modalState?.visible}
-        {...modalState?.options}
-      >
-        <ModalChildrenWrapper>
-          <ModalContent modalScreenProps={modalScreenProps} />
-        </ModalChildrenWrapper>
-      </ModalPresenter>
+    <PathnameContext.Provider value={pathname}>
+      <ScreenContextProvider pathname={pathname}>
+        <ModalPresenter
+          visible={modalVisible && modalState?.visible}
+          {...modalState?.options}
+        >
+          <ModalChildrenWrapper>
+            <ModalContent modalScreenProps={modalScreenProps} />
+          </ModalChildrenWrapper>
+        </ModalPresenter>
+      </ScreenContextProvider>
     </PathnameContext.Provider>
   );
 }

package/App/NavigationProvider/NavigationProvider.tsx

@@ -3,13 +3,19 @@
 import * as React from "react";
 import * as R from "ramda";
 import { NavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NavigationContext";
-import { getTargetRoute, usesVideoModal } from "@applicaster/zapp-react-native-utils/navigationUtils";
+import {
+  getTargetRoute,
+  usesVideoModal,
+} from "@applicaster/zapp-react-native-utils/navigationUtils";
 import {
   allowedOrientationsForScreen,
   useGetScreenOrientation,
 } from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
 import { focusManager } from "@applicaster/zapp-react-native-utils/focusManager/FocusManager";
-import { useContentTypes, usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import {
+  useContentTypes,
+  usePickFromState,
+} from "@applicaster/zapp-react-native-redux/hooks";
 
 import reducer, {
   ACTIONS,
@@ -19,9 +25,6 @@ import reducer, {
   push,
   replace,
   setBackPlayerNestedContent,
-  setNavBarSummary,
-  setNavBarTitle,
-  setNavBarVisibility,
   setNestedContent,
   setReplaceTop,
   setVideoModalClose,
@@ -36,21 +39,29 @@ import reducer, {
 import { HooksManager } from "@applicaster/zapp-react-native-utils/appUtils/HooksManager";
 import { HOOKS_EVENTS } from "@applicaster/zapp-react-native-utils/appUtils/HooksManager/constants";
 
-import { activeRiverSelector, homeRiverSelector, lastEntrySelector } from "./navigator/selectors";
+import {
+  activeRiverSelector,
+  homeRiverSelector,
+  lastEntrySelector,
+} from "./navigator/selectors";
 
 import { coreAppLogger } from "../logger";
-import { getPlatform, isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
+import {
+  getPlatform,
+  isTV,
+} from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useConnectionInfo } from "@applicaster/zapp-react-native-utils/reactHooks/connection";
-import { getNavigationTarget, getTargetScreen, legacyScreenData, openExternalUrl } from "./utils";
+import {
+  getNavigationTarget,
+  getTargetScreen,
+  legacyScreenData,
+  openExternalUrl,
+} from "./utils";
 import { debounce } from "@applicaster/zapp-react-native-utils/functionUtils";
 
-import {
-  findParent,
-} from "@applicaster/zapp-react-native-ui-components/Contexts/ZappPipesContext/ZappPipesEntryContext";
+import { findParent } from "@applicaster/zapp-react-native-ui-components/Contexts/ZappPipesContext/ZappPipesEntryContext";
 import { ZappPipesEntryContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
-import {
-  PlayNextState,
-} from "@applicaster/zapp-react-native-utils/appUtils/playerManager/OverlayObserver/OverlaysObserver";
+import { PlayNextState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/OverlayObserver/OverlaysObserver";
 import { inflateUrl } from "@applicaster/zapp-react-native-ui-components/Components/LinkHandler/LinkHandler";
 
 const logger = coreAppLogger.addSubsystem("Navigator");
@@ -158,10 +169,6 @@ export function NavigationProvider({ children }: Props) {
   );
 
   const getStack = () => [...stateRef?.current?.stack?.mainStack];
-  const showNavBar = () => dispatch(setNavBarVisibility(true));
-  const hideNavBar = () => dispatch(setNavBarVisibility(false));
-  const setScreenTitle = R.compose(dispatch, setNavBarTitle);
-  const setScreenSummary = R.compose(dispatch, setNavBarSummary);
 
   const openVideoModal = (
     item: ZappEntry,
@@ -257,13 +264,21 @@ export function NavigationProvider({ children }: Props) {
     }
   };
 
-  const canGoBack = (fromHook = false) => {
+  const canGoBack = (fromHook = false, pathname?: string) => {
     const stack = fromHook ? stateRef.current.stack : state.stack;
 
     const filteredStack = state.stack.mainStack.filter(
       (stackItem) => !stackItem?.route?.includes("/hooks")
     );
 
+    if (pathname) {
+      const pathnameStackIndex = state.stack.mainStack.findIndex(({ route }) =>
+        route.includes(pathname)
+      );
+
+      return pathnameStackIndex > 1;
+    }
+
     if (!Number.isNaN(filteredStack?.length)) {
       return Math.min(filteredStack.length, stack.mainStack.length) > 1;
     }
@@ -305,7 +320,10 @@ export function NavigationProvider({ children }: Props) {
           state: firstRoute.state,
         };
 
-        if (stateForBack.state.entry.home) {
+        if (
+          stateForBack?.state?.entry &&
+          "home" in stateForBack?.state?.entry
+        ) {
           goHome();
         } else {
           dispatch(back(stateForBack));
@@ -522,6 +540,16 @@ export function NavigationProvider({ children }: Props) {
         return;
       }
 
+      // Skip navigation if the entry type is empty
+      if (layoutVersion === "v2" && entry && !entry.type?.value) {
+        logger.warn({
+          message: "Empty content type",
+          data: { entry },
+        });
+
+        return;
+      }
+
       if (entry && usesVideoModal(entry, rivers, contentTypes)) {
         openVideoModal(entry, options);
 
@@ -668,7 +696,7 @@ export function NavigationProvider({ children }: Props) {
   // It will only work for the regular stack and pathname, It won't work for modals
   // TODO: integrate video/hook and regular modal into stack.
   const getStackForPathname = React.useCallback((pathname: string):
-    | QuickBrickAppNavigator["NavigationScreenState"]
+    | NavigationScreenState
     | undefined => {
     const stack = getStack();
 
@@ -684,13 +712,6 @@ export function NavigationProvider({ children }: Props) {
       currentRoute: pathname,
       previousAction: lastEntrySelector(state)
         ?.action as QuickBrickNavigationActionType,
-      isNavBarVisible: state.options.navBar.visible,
-      screenTitle: state.options.navBar.title,
-      screenSummary: state.options.navBar.summary,
-      showNavBar,
-      hideNavBar,
-      setScreenTitle,
-      setScreenSummary,
       push: pushItem,
       replace: replaceItem,
       setNestedScreenContent,

package/App/NavigationProvider/navigator/__tests__/__snapshots__/reducer.test.ts.snap

@@ -14,9 +14,6 @@ Object {
   "REPLACE": "REPLACE",
   "REPLACE_TOP": "REPLACE_TOP",
   "SET_LOCATION": "SET_LOCATION",
-  "SET_NAV_BAR_SUMMARY": "SET_NAV_BAR_SUMMARY",
-  "SET_NAV_BAR_TITLE": "SET_NAV_BAR_TITLE",
-  "SET_NAV_BAR_VISIBILITY": "SET_NAV_BAR_VISIBILITY",
   "SET_NESTED_CONTENT": "SET_NESTED_CONTENT",
   "SET_VIDEO_MODAL_ITEM": "SET_VIDEO_MODAL_ITEM",
 }
@@ -50,11 +47,6 @@ Object {
       },
     },
     "options": Object {
-      "navBar": Object {
-        "summary": "",
-        "title": "",
-        "visible": true,
-      },
       "videoModal": Object {
         "item": null,
         "mode": "MAXIMIZED",
@@ -125,11 +117,6 @@ Object {
       },
     },
     "options": Object {
-      "navBar": Object {
-        "summary": "",
-        "title": "",
-        "visible": true,
-      },
       "videoModal": Object {
         "item": null,
         "mode": "MAXIMIZED",
@@ -231,11 +218,6 @@ Object {
       },
     },
     "options": Object {
-      "navBar": Object {
-        "summary": "",
-        "title": "",
-        "visible": true,
-      },
       "videoModal": Object {
         "item": null,
         "mode": "MAXIMIZED",
@@ -369,11 +351,6 @@ Object {
       },
     },
     "options": Object {
-      "navBar": Object {
-        "summary": "",
-        "title": "",
-        "visible": true,
-      },
       "videoModal": Object {
         "item": null,
         "mode": "MAXIMIZED",
@@ -475,11 +452,6 @@ Object {
       },
     },
     "options": Object {
-      "navBar": Object {
-        "summary": "",
-        "title": "",
-        "visible": true,
-      },
       "videoModal": Object {
         "item": null,
         "mode": "MAXIMIZED",
@@ -613,11 +585,6 @@ Object {
       },
     },
     "options": Object {
-      "navBar": Object {
-        "summary": "",
-        "title": "",
-        "visible": true,
-      },
       "videoModal": Object {
         "item": null,
         "mode": "MAXIMIZED",

package/App/NavigationProvider/navigator/__tests__/reducer.test.ts

@@ -3,9 +3,6 @@ import reducer, {
   push,
   replace,
   back,
-  setNavBarVisibility,
-  setNavBarTitle,
-  setNavBarSummary,
   initialState,
 } from "../reducer";
 
@@ -117,48 +114,6 @@ describe("actions", () => {
       );
     });
   });
-
-  describe("setNavBarVisibility", () => {
-    it("returns a setNavBarVisibility action", () => {
-      const payload = true;
-      const setNavBarVisibilityAction = setNavBarVisibility(payload);
-
-      expect(setNavBarVisibilityAction).toHaveProperty(
-        "type",
-        ACTIONS.SET_NAV_BAR_VISIBILITY
-      );
-
-      expect(setNavBarVisibilityAction).toHaveProperty("payload", payload);
-    });
-  });
-
-  describe("setNavBarTitle", () => {
-    it("returns a setNavBarTitle action", () => {
-      const payload = "Screen Title";
-      const setNavBarTitleAction = setNavBarTitle(payload);
-
-      expect(setNavBarTitleAction).toHaveProperty(
-        "type",
-        ACTIONS.SET_NAV_BAR_TITLE
-      );
-
-      expect(setNavBarTitleAction).toHaveProperty("payload", payload);
-    });
-  });
-
-  describe("setNavBarSummary", () => {
-    it("returns a setNavBarSummary action", () => {
-      const payload = "Screen Summary";
-      const setNavBarSummaryAction = setNavBarSummary(payload);
-
-      expect(setNavBarSummaryAction).toHaveProperty(
-        "type",
-        ACTIONS.SET_NAV_BAR_SUMMARY
-      );
-
-      expect(setNavBarSummaryAction).toHaveProperty("payload", payload);
-    });
-  });
 });
 
 describe("reducer", () => {
@@ -438,135 +393,5 @@ describe("reducer", () => {
         expect(finalState).toEqual(newState);
       });
     });
-
-    // describe.skip("when there are hooks in the stack", () => {
-    //   const action = replace(route, state);
-    //   const newState = reducer(initialState, action);
-    //   const hookPayload = { ...state, isHook: true };
-    //   const hookRoute = "/hooks/hook-id";
-    //   const hookAction = push(hookRoute, hookPayload);
-    //   const newState2 = reducer(newState, hookAction);
-    //   const hookPayload2 = { ...hookPayload, hook2: true };
-    //   const hookRoute2 = "/hooks/hook-id-2";
-    //   const hookAction2 = push(hookRoute2, hookPayload2);
-    //   const newState3 = reducer(newState2, hookAction2);
-    //   const finalState = reducer(newState3, back());
-
-    //   it("goes back to the previous entry in the stack before the hooks", () => {
-    //     expect(finalState).toHaveProperty("stack");
-    //     expect(finalState.stack.mainStack).toBeArrayOfSize(1);
-
-    //     expect(finalState.stack.mainStack[0]).toHaveProperty(
-    //       "action",
-    //       ACTIONS.BACK
-    //     );
-
-    //     expect(finalState.stack.mainStack[0]).toHaveProperty("route", route);
-    //     expect(finalState.stack.mainStack[0]).toHaveProperty("state", state);
-    //   });
-
-    //   it("restores the location properties of the state", () => {
-    //     expect(newState).toHaveProperty("location");
-    //     expect(newState.location).toHaveProperty("pathname", route);
-    //     expect(newState.location).toHaveProperty("state", state);
-
-    //     expect(newState2).toHaveProperty("location");
-    //     expect(newState2.location).toHaveProperty("pathname", hookRoute);
-    //     expect(newState2.location).toHaveProperty("state", hookPayload);
-
-    //     expect(newState3).toHaveProperty("location");
-    //     expect(newState3.location).toHaveProperty("pathname", hookRoute2);
-    //     expect(newState3.location).toHaveProperty("state", hookPayload2);
-
-    //     expect(finalState).toHaveProperty("location");
-    //     expect(finalState.location).toHaveProperty("pathname", route);
-    //     expect(finalState.location).toHaveProperty("state", state);
-    //   });
-
-    //   it("leaves the navBar properties of the state unchanged", () => {
-    //     expect(newState.options.navBar).toEqual(initialState.options.navBar);
-    //     expect(newState2.options.navBar).toEqual(initialState.options.navBar);
-    //     expect(newState3.options.navBar).toEqual(initialState.options.navBar);
-    //     expect(finalState.options.navBar).toEqual(initialState.options.navBar);
-    //   });
-    // });
-  });
-
-  describe("when a setNavBarVisibility action is dispatched", () => {
-    const navBarVisibility = false;
-    const action = setNavBarVisibility(navBarVisibility);
-    const newState = reducer(initialState, action);
-
-    it("updates the visibility of the navbar", () => {
-      expect(newState.options.navBar).toHaveProperty(
-        "visible",
-        navBarVisibility
-      );
-    });
-
-    it("leaves the other properties of the state unchanged", () => {
-      expect(newState.options.navBar).toHaveProperty(
-        "title",
-        initialState.options.navBar.title
-      );
-
-      expect(newState.options.navBar).toHaveProperty(
-        "summary",
-        initialState.options.navBar.summary
-      );
-
-      expect(newState.stack).toEqual(initialState.stack);
-      expect(newState.location).toEqual(initialState.location);
-    });
-  });
-
-  describe("when a setNavBarTitle action is dispatched", () => {
-    const navBarTitle = "Screen Title";
-    const action = setNavBarTitle(navBarTitle);
-    const newState = reducer(initialState, action);
-
-    it("updates the navbar title", () => {
-      expect(newState.options.navBar).toHaveProperty("title", navBarTitle);
-    });
-
-    it("leaves the other properties of the state unchanged", () => {
-      expect(newState.options.navBar).toHaveProperty(
-        "visible",
-        initialState.options.navBar.visible
-      );
-
-      expect(newState.options.navBar).toHaveProperty(
-        "summary",
-        initialState.options.navBar.summary
-      );
-
-      expect(newState.stack).toEqual(initialState.stack);
-      expect(newState.location).toEqual(initialState.location);
-    });
-  });
-
-  describe("when a setNavBarSummary action is dispatched", () => {
-    const navBarSummary = "Screen summary";
-    const action = setNavBarSummary(navBarSummary);
-    const newState = reducer(initialState, action);
-
-    it("updates the navbar title", () => {
-      expect(newState.options.navBar).toHaveProperty("summary", navBarSummary);
-    });
-
-    it("leaves the other properties of the state unchanged", () => {
-      expect(newState.options.navBar).toHaveProperty(
-        "visible",
-        initialState.options.navBar.visible
-      );
-
-      expect(newState.options.navBar).toHaveProperty(
-        "title",
-        initialState.options.navBar.title
-      );
-
-      expect(newState.stack).toEqual(initialState.stack);
-      expect(newState.location).toEqual(initialState.location);
-    });
   });
 });

package/App/NavigationProvider/navigator/reducer.ts

@@ -20,11 +20,6 @@ export const initialState: NavigationReducerState = {
   },
   location: { key: "", pathname: "/", state: null },
   options: {
-    navBar: {
-      visible: true,
-      title: "",
-      summary: "",
-    },
     videoModal: {
       visible: false,
       mode: MAXIMIZED, // VideoModalMode => MAXIMIZED | MINIMIZED | FULLSCREEN
@@ -43,9 +38,6 @@ export enum ACTIONS {
   BACK_PLAYER_NESTED_CONTENT = "BACK_PLAYER_NESTED_CONTENT",
   REPLACE_TOP = "REPLACE_TOP",
   SET_NESTED_CONTENT = "SET_NESTED_CONTENT",
-  SET_NAV_BAR_VISIBILITY = "SET_NAV_BAR_VISIBILITY",
-  SET_NAV_BAR_TITLE = "SET_NAV_BAR_TITLE",
-  SET_NAV_BAR_SUMMARY = "SET_NAV_BAR_SUMMARY",
   SET_LOCATION = "SET_LOCATION",
   OPEN_VIDEO_MODAL = "OPEN_VIDEO_MODAL",
   CLOSE_VIDEO_MODAL = "CLOSE_VIDEO_MODAL",
@@ -147,12 +139,16 @@ function updatePopActions(state) {
 
 function removeTop(state, payload) {
   let playNextState = [...state.mainStack];
-  const preloadHooks = payload.entry?.targetScreen?.hooks?.preload_plugins;
-  const postloadHooks = payload.entry?.targetScreen?.hooks?.postload_plugins;
+
+  const preloadHooks =
+    payload.entry?.targetScreen?.hooks?.preload_plugins || [];
+
+  const postloadHooks =
+    payload.entry?.targetScreen?.hooks?.postload_plugins || [];
 
   const hooksScreenIds = new Set([
     ...preloadHooks.map((hook) => hook.screen_id),
-    ...(postloadHooks || []).map((hook) => hook.screen_id),
+    ...postloadHooks.map((hook) => hook.screen_id),
   ]);
 
   playNextState = playNextState.filter(
@@ -398,39 +394,6 @@ export const videoModalReducer = (
   }
 };
 
-/* Nav Bar reducer */
-export const setNavBarVisibility = (payload) => ({
-  type: ACTIONS.SET_NAV_BAR_VISIBILITY,
-  payload,
-});
-
-export const setNavBarTitle = (payload) => ({
-  type: ACTIONS.SET_NAV_BAR_TITLE,
-  payload,
-});
-
-export const setNavBarSummary = (payload) => ({
-  type: ACTIONS.SET_NAV_BAR_SUMMARY,
-  payload,
-});
-
-const NAV_BAR_ACTIONS_PROPERTIES = {
-  [ACTIONS.SET_NAV_BAR_VISIBILITY]: "visible",
-  [ACTIONS.SET_NAV_BAR_TITLE]: "title",
-  [ACTIONS.SET_NAV_BAR_SUMMARY]: "summary",
-};
-
-export function navBarReducer(
-  state = initialState.options.navBar,
-  { type, payload }
-) {
-  if (R.includes(type, R.keys(NAV_BAR_ACTIONS_PROPERTIES))) {
-    return R.assoc(R.prop(type, NAV_BAR_ACTIONS_PROPERTIES), payload, state);
-  }
-
-  return state;
-}
-
 const applyReducer = (reducer, action) => (state) => reducer(state, action);
 
 export default function navigationReducer(
@@ -472,16 +435,6 @@ export default function navigationReducer(
         state
       );
 
-    case ACTIONS.SET_NAV_BAR_VISIBILITY:
-    case ACTIONS.SET_NAV_BAR_TITLE:
-    case ACTIONS.SET_NAV_BAR_SUMMARY:
-      return R.evolve(
-        {
-          options: { navBar: applyReducer(navBarReducer, { type, payload }) },
-        },
-        state
-      );
-
     case ACTIONS.OPEN_VIDEO_MODAL:
     case ACTIONS.CLOSE_VIDEO_MODAL:
     case ACTIONS.SET_VIDEO_MODAL_ITEM:

package/App/StoreConnector/{index.js → index.ts}

@@ -1,5 +1,3 @@
-// @flow
-
 import * as R from "ramda";
 import { connectToStore } from "@applicaster/zapp-react-native-redux";
 

package/App/ThemeManager/{index.js → index.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import * as R from "ramda";
 import * as React from "react";
 
@@ -10,19 +9,16 @@ import {
 } from "@applicaster/zapp-react-native-utils/objectUtils";
 
 type Plugin = {
-  name: string,
-  identifier: string,
-  module: any,
-  type: String,
-  configuration: { [string]: any },
+  name: string;
+  identifier: string;
+  module: any;
+  type: string;
+  configuration: { [key: string]: any };
 };
 
 type Props = {
-  children: React.Node,
-  plugins: [Plugin],
-  themes: { [string]: { [string]: any } },
-  selectedThemeId: string,
-  setSelectedThemeId: string,
+  children: React.ReactNode;
+  plugins: Plugin[];
 };
 
 const DEFAULT_THEME_ID = "base-theme";
@@ -83,7 +79,7 @@ const ThemeContextProvider = ({
   selectedThemeId,
   setSelectedThemeId,
   children,
-}: Props) => {
+}: any) => {
   const value = React.useMemo(
     () => ({ themes, selectedThemeId, setSelectedThemeId }),
     [themes, selectedThemeId, setSelectedThemeId]
@@ -94,7 +90,7 @@ const ThemeContextProvider = ({
   );
 };
 
-function ThemeManagerComponent({ children, plugins }: Props): React.Node {
+function ThemeManagerComponent({ children, plugins }: Props) {
   const dimensions = useDimensions("screen", { deviceInfo: true });
   const [themes, setThemes] = React.useState(selectThemes(dimensions, plugins));
 

package/App/{index.js → index.tsx}

@@ -1,5 +1,3 @@
-// @flow
-
 import * as React from "react";
 import * as R from "ramda";
 import {