@applicaster/zapp-react-native-utils 12.0.0-alpha.4433422595 → 12.0.0-alpha.4536343143

package/reactHooks/layout/__tests__/{index.test.js → index.test.tsx}

@@ -1,4 +1,8 @@
+import React from "react";
+
 import { cleanup, renderHook } from "@testing-library/react-hooks";
+import { Provider } from "react-redux";
+import configureStore from "redux-mock-store";
 
 import * as ReactNative from "react-native";
 
@@ -48,19 +52,43 @@ jest.mock("../../navigation", () => ({
 }));
 
 const { Dimensions } = require("react-native");
-const { useDimensions } = require("../");
+const { useDimensions } = require("..");
+
+const mockStore = configureStore();
+
+const getWrapper = () => {
+  const store = mockStore({ appData: {} });
+
+  const Wrapper = ({ children }: { children: React.ReactChild }) => (
+    /* @ts-ignore */
+    <Provider store={store}>{children}</Provider>
+  );
+
+  return Wrapper;
+};
+
+const testHook = (context, params?) => {
+  const wrapper = getWrapper();
+
+  const {
+    result,
+    result: { current: dimensions },
+  } = renderHook(() => useDimensions(context, params), {
+    wrapper,
+  });
+
+  return { result, dimensions };
+};
 
 describe("useDimensions", () => {
   it("renders", () => {
-    const { result } = renderHook(() =>
-      useDimensions("window", { fullDimensions: true })
-    );
+    const { result } = testHook("window", { fullDimensions: true });
 
     expect(result).toBeDefined();
   });
 
   it("sets event listener", () => {
-    renderHook(() => useDimensions("window", { fullDimensions: true }));
+    testHook("window", { fullDimensions: true });
 
     expect(Dimensions.addEventListener).toBeCalledWith(
       "change",
@@ -69,16 +97,14 @@ describe("useDimensions", () => {
   });
 
   it("removes event listener", () => {
-    renderHook(() => useDimensions("window", { fullDimensions: true }));
+    testHook("window", { fullDimensions: true });
     cleanup();
 
     expect(mockRemoveFn).toBeCalled();
   });
 
   it("Returns full dimensions object", () => {
-    const {
-      result: { current: dimensions },
-    } = renderHook(() => useDimensions("window", { fullDimensions: true }));
+    const { dimensions } = testHook("window", { fullDimensions: true });
 
     expect(dimensions).toHaveProperty("height");
     expect(dimensions).toHaveProperty("width");
@@ -87,20 +113,17 @@ describe("useDimensions", () => {
   });
 
   it("Returns shorthand dimensions object", () => {
-    const {
-      result: { current: dimensions },
-    } = renderHook(() => useDimensions("window"));
+    const { dimensions } = testHook("window");
 
     expect(dimensions).toHaveProperty("height");
     expect(dimensions).toHaveProperty("width");
   });
 
   it("Returns the device info object", () => {
-    const {
-      result: { current: dimensions },
-    } = renderHook(() =>
-      useDimensions("window", { fullDimensions: true, deviceInfo: true })
-    );
+    const { dimensions } = testHook("window", {
+      fullDimensions: true,
+      deviceInfo: true,
+    });
 
     expect(dimensions).toHaveProperty("height");
     expect(dimensions).toHaveProperty("width");
@@ -113,10 +136,7 @@ describe("useDimensions", () => {
     it("applies the scale on TV, and screen context", () => {
       tv_flag = true;
       const { screen } = mocked_return_value(tv_flag);
-
-      const {
-        result: { current: dimensions },
-      } = renderHook(() => useDimensions("screen"));
+      const { dimensions } = testHook("screen");
 
       expect(dimensions).toHaveProperty("height", screen.height * screen.scale);
       expect(dimensions).toHaveProperty("width", screen.width * screen.scale);
@@ -128,10 +148,7 @@ describe("useDimensions", () => {
     it("doesn't apply the scale on mobile with screen context", () => {
       tv_flag = false;
       const { screen } = mocked_return_value(tv_flag);
-
-      const {
-        result: { current: dimensions },
-      } = renderHook(() => useDimensions("screen"));
+      const { dimensions } = testHook("screen");
 
       expect(dimensions).toHaveProperty("height", screen.height);
       expect(dimensions).toHaveProperty("width", screen.width);
@@ -141,10 +158,7 @@ describe("useDimensions", () => {
     it("doesn't apply the scale on TV with window context", () => {
       tv_flag = true;
       const { window } = mocked_return_value(tv_flag);
-
-      const {
-        result: { current: dimensions },
-      } = renderHook(() => useDimensions("window"));
+      const { dimensions } = testHook("window");
 
       expect(dimensions).toHaveProperty("height", window.height);
       expect(dimensions).toHaveProperty("width", window.width);

package/reactHooks/layout/getDeviceInfo/index.ts

@@ -3,13 +3,15 @@ import { isTablet } from "../isTablet";
 /**
  * Returns an object with additional device info that can be used to determine if tablet
  * @param {Number} dimensions - Dimensions object passed to the function
+ * @param {Object} appData - application data object passed to the function
  * @returns {DeviceInfo} deviceInfo - returns an object with scale, isTablet, and orientation
  */
-export const getDeviceInfo = (dimensions) => {
+export const getDeviceInfo = (dimensions, appData) => {
   const scale = dimensions?.scale;
   const isLandscape = dimensions?.width > dimensions?.height;
   const orientation = isLandscape ? "landscape" : "portrait";
   const tablet = isTablet(dimensions, orientation) || false;
+  const isTabletLandscape = tablet && !appData?.isTabletPortrait;
 
-  return { scale, isTablet: tablet, orientation };
+  return { scale, isTablet: tablet, orientation, isTabletLandscape };
 };

package/reactHooks/layout/types/index.ts

@@ -2,6 +2,7 @@ type DeviceInfo = {
   isTablet: boolean;
   scale: number;
   orientation: string;
+  isTabletLandscape: boolean;
 };
 
 type RNDimensions = {

package/reactHooks/layout/useDimensions/useDimensions.ts

@@ -3,6 +3,8 @@ import { useLayoutEffect, useMemo, useRef, useState } from "react";
 import * as R from "ramda";
 
 import { Dimensions, Platform, StatusBar } from "react-native";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+
 import { isTV } from "../../../reactUtils";
 
 import { Options, UseDimensions } from "../types";
@@ -36,6 +38,7 @@ export const useDimensions: UseDimensions = (
   fullDimensions = { fullDimensions: false, updateForInactiveScreens: true }
 ) => {
   const isActive = useIsScreenActive();
+  const { appData } = usePickFromState(["appData"]);
 
   if (typeof fullDimensions === "boolean") {
     // eslint-disable-next-line no-console
@@ -50,7 +53,7 @@ export const useDimensions: UseDimensions = (
       : { ...fullDimensions };
 
   const [dimensions, setDimensions] = useState(getInitialDimensions(context));
-  const deviceInfo = useRef(getDeviceInfo(dimensions));
+  const deviceInfo = useRef(getDeviceInfo(dimensions, appData));
 
   const applyOptions = R.compose(
     R.when(() => options.deviceInfo, R.assoc("deviceInfo", deviceInfo.current)),
@@ -85,7 +88,7 @@ export const useDimensions: UseDimensions = (
         // eslint-disable-next-line no-console
         console.log("change: wrong values - width equal to height, ignoring");
       } else if (isActive || options.updateForInactiveScreens) {
-        deviceInfo.current = getDeviceInfo(newDimensions);
+        deviceInfo.current = getDeviceInfo(newDimensions, appData);
         setDimensions(newDimensions);
       }
     };

package/reactHooks/navigation/__mocks__/index.ts

@@ -15,8 +15,21 @@ export const mockMenu: ZappNavigation = {
   // preset_id?: null | unknown;
 };
 
+export const useRoute = jest.fn(() => ({
+  screenData: {
+    name: "someName",
+  },
+  pathname: "someRoute",
+}));
+
 export const useNavigation = jest.fn(() => ({
   data: {},
+  screenData: {
+    name: "someName",
+  },
+  activeRiver: {
+    id: "someId",
+  },
   currentRoute: "someRoute",
 }));
 

package/reactHooks/navigation/__mocks__/useNavigation.ts

@@ -1,4 +1,7 @@
 export const useNavigation = jest.fn(() => ({
   data: {},
+  screenData: {
+    name: "someName",
+  },
   currentRoute: "someRoute",
 }));

package/reactHooks/navigation/__tests__/index.test.tsx

@@ -1,12 +1,13 @@
 import React from "react";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
 import { renderHook } from "@testing-library/react-hooks";
-import { useRoute, isNavBarVisible } from "../";
+import { isNavBarVisible, useRoute } from "../";
 import { Provider } from "react-redux";
 import configureMockStore from "redux-mock-store";
 import { NavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NavigationContext";
 import { ZappHookModalContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/routeTypes";
+import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
 
 const plugins = [];
 
@@ -100,13 +101,15 @@ const mainStackWrapper = ({
   pathname = homeStack.route,
 }) => (
   <Provider store={store}>
-    <NavigationContext.Provider
-      value={{ ...mainStackNavigator, ...navigator, currentRoute: pathname }}
-    >
-      <PathnameContext.Provider value={pathname}>
-        {children}
-      </PathnameContext.Provider>
-    </NavigationContext.Provider>
+    <ScreenDataContext.Provider value={homeStack.state}>
+      <NavigationContext.Provider
+        value={{ ...mainStackNavigator, ...navigator, currentRoute: pathname }}
+      >
+        <PathnameContext.Provider value={pathname}>
+          {children}
+        </PathnameContext.Provider>
+      </NavigationContext.Provider>
+    </ScreenDataContext.Provider>
   </Provider>
 );
 

package/reactHooks/navigation/index.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 /* eslint max-len: off */
 
-import React, { useEffect, useMemo } from "react";
+import React, { useContext, useEffect, useMemo } from "react";
 import { BackHandler, InteractionManager, NativeModules } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
@@ -12,7 +12,11 @@ import {
 import { HooksManager } from "@applicaster/zapp-react-native-utils/appUtils/HooksManager";
 
 import { legacyScreenData } from "@applicaster/quick-brick-core/App/NavigationProvider/utils";
-import { LONG_KEY_PRESS_TIMEOUT } from "@applicaster/quick-brick-core/const";
+import {
+  LONG_KEY_PRESS_TIMEOUT,
+  QUICK_BRICK_NAVBAR,
+  QUICK_BRICK_CONTENT,
+} from "@applicaster/quick-brick-core/const";
 import { useZappHooksModalState } from "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal/ZappHooksModal";
 import { ZappHookModalContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
@@ -31,6 +35,7 @@ import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useNavbarState } from "../screen";
 import { useNavigation } from "./useNavigation";
 import { useModalStore } from "../../modalState";
+import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
 
 export { useNavigation } from "./useNavigation";
 
@@ -146,16 +151,8 @@ export const useRoute = (): {
   pathname: string;
 } => {
   const pathname = usePathname() || "";
-
-  /**
-   * compose `useRoute()` output data
-   */
-  const composeRouteData = (screenData: VariousScreenData) => ({
-    screenData,
-    pathname,
-  });
-
   const navigator = useNavigation();
+  const screenDataContext = legacyScreenData(useContext(ScreenDataContext));
 
   const { plugins, contentTypes, rivers } = usePickFromState([
     "plugins",
@@ -163,10 +160,11 @@ export const useRoute = (): {
     "contentTypes",
   ]);
 
-  const currentStack = navigator.getStackForPathname(pathname);
   const { modalState } = useModalStore();
   const hookModalState = useZappHooksModalState();
+
   const modalScreenData = modalState.screen;
+
   const hookModalScreenData = hookModalState.state.screenData?.payload;
 
   const videoModalScreenData =
@@ -183,15 +181,6 @@ export const useRoute = (): {
       plugins
     );
 
-  const currentRouteScreenData = legacyScreenData(
-    {
-      screen: currentStack?.state?.screen ?? navigator.data?.screen ?? {},
-      entry: currentStack?.state?.entry ?? {},
-    } as NavigationScreenData,
-
-    plugins
-  );
-
   // There are 4 route scenarios
   // For regular screens take date from navigator stack.
   // is path is model grab screenData from modal state
@@ -200,58 +189,30 @@ export const useRoute = (): {
   // if path is hook grab screenData from screenData
 
   if (isModalPathname(pathname)) {
-    return composeRouteData(modalScreenData ?? ({} as ZappEntry));
+    const screenData = modalScreenData ?? ({} as ZappEntry);
+
+    return { screenData, pathname };
   }
 
   if (isVideoModalPathname(pathname)) {
-    return composeRouteData(videoModalScreenData as LegacyNavigationScreenData);
+    const screenData = videoModalScreenData as LegacyNavigationScreenData;
+
+    return { screenData, pathname };
   }
 
   if (isHookModalPathname(pathname)) {
-    return composeRouteData(hookModalScreenData);
+    const screenData = hookModalScreenData;
+
+    return { screenData, pathname };
   }
 
   if (isHookPathname(pathname)) {
-    /**
-     * HACK
-     *
-     * This condition relies on hacky approach to get the current hook screen data
-     * using navigator.screenData for some cases.
-     * This is used when hook is in sequence.
-     */
-
-    // case 1: stack not yet updated in navigator context, but navigator.screenData is updated already.
-    if (!currentStack) {
-      return composeRouteData(navigator.screenData);
-    }
-
-    const isValidHookInCurrentRouteScreenData =
-      "hookPlugin" in currentRouteScreenData &&
-      !!currentRouteScreenData.hookPlugin?.module;
-
-    let screenData;
-
-    // case 2: stack has valid hook data
-    if (isValidHookInCurrentRouteScreenData) {
-      screenData = currentRouteScreenData;
-    }
-
-    const navigatorScreenData = navigator.screenData as NavigatorEntry;
-
-    // case 3: current hookPlugin is missing weight, but navigator.screenData has weight, use navigator.screenData
-    if (
-      screenData.hookPlugin.identifier ===
-        navigatorScreenData?.hookPlugin?.identifier &&
-      !screenData.hookPlugin?.weight &&
-      navigatorScreenData?.hookPlugin?.weight
-    ) {
-      screenData = navigator.screenData;
-    }
-
-    return composeRouteData(screenData);
+    return { screenData: screenDataContext, pathname };
   }
 
-  return composeRouteData(currentRouteScreenData);
+  const screenData = screenDataContext;
+
+  return { screenData, pathname };
 };
 
 type Callbacks = Partial<{
@@ -506,3 +467,15 @@ export const useUniqueRouteSuffix = (): Return => {
 
   return withUniqueRouteSuffix;
 };
+
+export const useNavbarId = () => {
+  const withUniqueRouteSuffix = useUniqueRouteSuffix();
+
+  return withUniqueRouteSuffix(QUICK_BRICK_NAVBAR);
+};
+
+export const useContentId = () => {
+  const withUniqueRouteSuffix = useUniqueRouteSuffix();
+
+  return withUniqueRouteSuffix(QUICK_BRICK_CONTENT);
+};

package/reactHooks/screen/__tests__/useCurrentScreenData.test.tsx

@@ -3,23 +3,28 @@ import { Provider } from "react-redux";
 import { renderHook } from "@testing-library/react-hooks";
 import configureStore from "redux-mock-store";
 import thunk from "redux-thunk";
-import { NavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NavigationContext";
 
 const mockStore = configureStore([thunk]);
 
-import { useCurrentScreenData } from "../useCurrentScreenData";
-
-describe("useScreenData", function () {
-  const river_id_2: ZappRiver = {
-    name: "River 2",
-    id: "A1234",
-    home: false,
-    home_offline: false,
-    supports_offline: false,
-    navigations: [],
-    hooks: { preload_plugins: [] },
-  };
-
+const river_id_2: ZappRiver = {
+  name: "River 2",
+  id: "A1234",
+  home: false,
+  home_offline: false,
+  supports_offline: false,
+  navigations: [],
+  hooks: { preload_plugins: [] },
+};
+
+jest.mock("../useScreenContext", () => ({
+  useScreenContext: () => ({
+    screen: river_id_2,
+  }),
+}));
+
+const { useCurrentScreenData } = require("../useCurrentScreenData");
+
+describe("useScreenData", () => {
   const river_id_1 = { id: "B5678" };
 
   const store = mockStore({
@@ -27,17 +32,10 @@ describe("useScreenData", function () {
   });
 
   const wrapper: React.FC<any> = ({ children }) => (
-    <NavigationContext.Provider
-      value={{
-        currentRoute: "/river/river_id_1/river/river_id_2",
-        data: { screen: river_id_2 },
-      }}
-    >
-      <Provider store={store}>{children}</Provider>
-    </NavigationContext.Provider>
+    <Provider store={store}>{children}</Provider>
   );
 
-  it("should return river data for the current screen/route", function () {
+  it("should return river data for the current screen/route", () => {
     const { result } = renderHook(() => useCurrentScreenData(), { wrapper });
 
     expect(result.current).toBe(river_id_2);

package/reactHooks/screen/index.ts

@@ -10,3 +10,5 @@ export {
   useNavbarState,
   useSetNavbarState,
 } from "./useScreenContext";
+
+export { useScreenBackgroundColor } from "./useScreenBackgroundColor";

package/reactHooks/screen/useScreenBackgroundColor.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import { useScreenConfiguration } from "@applicaster/zapp-react-native-ui-components/Components/River/useScreenConfiguration";
+import { ifEmptyUseFallback } from "@applicaster/zapp-react-native-utils/cellUtils";
+
+export const useScreenBackgroundColor = (screenId: string): string => {
+  const { backgroundColor: screenBackgroundColor } =
+    useScreenConfiguration(screenId);
+
+  const theme = useTheme();
+
+  const themeBackgroundColor = React.useMemo(
+    () => theme.app_background_color,
+    [theme.app_background_color]
+  );
+
+  const backgroundColor = ifEmptyUseFallback(
+    screenBackgroundColor,
+    themeBackgroundColor
+  );
+
+  return backgroundColor;
+};

package/reactHooks/screen/useScreenContext.ts

@@ -5,8 +5,9 @@ import { useNestedNavigationContext } from "@applicaster/zapp-react-native-ui-co
 import { useNavigation } from "../navigation/useNavigation";
 
 import { ScreenContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenContext";
+import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
 
-function useScreenContextV2() {
+export function useScreenContextV2() {
   return useContext(ScreenContext);
 }
 
@@ -44,9 +45,8 @@ export function useSetNavbarState() {
 
 export function useScreenContext(): NavigationScreenData {
   const navigator = useNavigation();
+  const screenData = useContext(ScreenDataContext);
 
-  const screenKey = useMemo(() => navigator?.key, [navigator]);
-  const screenData = useMemo(() => navigator?.data, [screenKey]);
   const modalScreenData = navigator?.modalData;
 
   const isModal = useModalNavigationContext();

package/screenState/index.ts

@@ -49,11 +49,3 @@ export function useScreenState(
     setSelectedEntry: (entryId) => setSelectedEntry(screenId, entryId),
   };
 }
-
-export const useScreenScrollStore = create<{
-  scrollPosition: number;
-  scrollingVelocity: number;
-}>(() => ({
-  scrollPosition: 0,
-  scrollingVelocity: 0,
-}));

package/stringUtils/index.ts

@@ -152,3 +152,8 @@ export function objectToCamelCase(obj) {
 export function isString(value: unknown): value is string {
   return typeof value === "string" || value instanceof String;
 }
+
+/** Checks if a value is a non-empty string */
+export function isNotEmptyString(value: unknown): value is string {
+  return isString(value) && value.length > 0;
+}

package/testUtils/getByTestId.ts

@@ -0,0 +1,14 @@
+export const getByTestId = (wrapper, testId) => {
+  try {
+    if (wrapper?.getByTestId) {
+      return wrapper?.queryAllByTestId(testId)?.[0] ?? undefined;
+    } else if (wrapper?.root?.findByProps) {
+      return wrapper.root.findAllByProps({ testID: testId })?.[0] ?? undefined;
+    }
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.log("getByTestId E:", e);
+
+    return undefined;
+  }
+};

package/testUtils/index.tsx

@@ -1,6 +1,6 @@
 import * as R from "ramda";
 
-import React from "react";
+import React, { PropsWithChildren } from "react";
 import { View } from "react-native";
 
 import { Provider } from "react-redux";
@@ -11,6 +11,8 @@ import { SafeAreaProvider } from "react-native-safe-area-context";
 import { render } from "@testing-library/react-native";
 import { AnalyticsProvider } from "../analyticsUtils";
 
+export { getByTestId } from "./getByTestId";
+
 /**
  * Function to be used in tandem with enzyme findWhere(node => node.prop('testID') === 'yourID')
  * Example:
@@ -21,17 +23,6 @@ import { AnalyticsProvider } from "../analyticsUtils";
 export const testIDEquals = (testId: any): boolean =>
   R.compose(R.equals(testId), R.invoker(1, "prop")("testID"));
 
-export const getByTestId = (wrapper, testId) => {
-  try {
-    return wrapper?.queryAllByTestId(testId)?.[0] ?? undefined;
-  } catch (e) {
-    // eslint-disable-next-line no-console
-    console.log("getByTestId E:", e);
-
-    return undefined;
-  }
-};
-
 /** Helper function for react-test-renderer, accepts type and renderer
  * * @param {*} type React Component type instance  or name of component
  * * @param {*} renderer renderer instance
@@ -47,11 +38,11 @@ export const findByType = (type, renderer) => {
 export function createComponentMock(mockName, hasChildren = false) {
   return hasChildren
     ? jest.fn(({ children }) => (
-        <View comp={mockName} testID={mockName}>
+        <View testID={mockName}>
           {typeof children === "function" ? children() : children}
         </View>
       ))
-    : jest.fn(() => <View comp={mockName} testID={mockName} />);
+    : jest.fn(() => <View testID={mockName} />);
 }
 
 const initialState = {
@@ -64,14 +55,21 @@ const initialState = {
     AppContainer: createComponentMock("appContainer", true),
     DisplayError: createComponentMock("displayError"),
   },
-  rivers: [{ id: "A1234", home: true }],
+  rivers: { id: "A1234", home: true },
   appSettings: {},
   plugins: [],
-  appState: { appReady: true },
+  appState: { appReady: true, appLaunched: true },
+  appData: { layoutVersion: "v1" },
+  contentTypes: null,
 };
 
-export const WrappedWithProviders = ({ children, store = {} }: any) => {
-  const _store = configureStore([thunk])({ ...initialState, ...store });
+export const WrappedWithProviders = ({
+  children,
+  store: storeObj = {},
+}: any) => {
+  const _store = configureStore([thunk])(
+    R.mergeDeepWith(R.concat, { ...initialState }, storeObj)
+  );
 
   return (
     <SafeAreaProvider
@@ -93,8 +91,12 @@ export const WrappedWithProviders = ({ children, store = {} }: any) => {
  * @param store optional store to pass to the provider
  * @returns
  */
-export const renderWithProviders = (component, store?: unknown) => {
-  return render(
-    <WrappedWithProviders store={store}>{component}</WrappedWithProviders>
-  );
+export const renderWithProviders = (component, storeObj?: unknown) => {
+  return render(component, {
+    wrapper: function TestWrapper({ children }: PropsWithChildren<any>) {
+      return (
+        <WrappedWithProviders store={storeObj}>{children}</WrappedWithProviders>
+      );
+    },
+  });
 };