From 320ed019e0e49af4f271ca8bea4d1c3898d47272 Mon Sep 17 00:00:00 2001
From: Polle Pas <polleps@gmail.com>
Date: Mon, 16 Oct 2023 16:41:50 +0200
Subject: [PATCH]  #648 Add ontology test

---
 .../components/ResourceContextMenu/index.tsx  |  13 +-
 .../forms/NewForm/NewFormDialog.tsx           |   6 +-
 .../src/components/forms/ResourceField.tsx    |  15 +-
 .../components/forms/SearchBox/SearchBox.tsx  |   6 +-
 .../OntologyPage/Class/ClassCardWrite.tsx     |   2 +-
 .../OntologyPage/CreateInstanceButton.tsx     |   9 +-
 .../Property/PropertyLineWrite.tsx            |  12 +-
 browser/data-browser/tests/ontology.spec.ts   | 214 ++++++++++++++++++
 browser/data-browser/tests/tables.spec.ts     |   2 +-
 browser/data-browser/tests/test-utils.ts      |  12 +-
 browser/lib/src/search.ts                     |  24 +-
 browser/react/src/useServerSearch.tsx         |  24 +-
 12 files changed, 309 insertions(+), 30 deletions(-)
 create mode 100644 browser/data-browser/tests/ontology.spec.ts

diff --git a/browser/data-browser/src/components/ResourceContextMenu/index.tsx b/browser/data-browser/src/components/ResourceContextMenu/index.tsx
index 127cd38f8..c4edd1502 100644
--- a/browser/data-browser/src/components/ResourceContextMenu/index.tsx
+++ b/browser/data-browser/src/components/ResourceContextMenu/index.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { Client, properties, useResource, useStore } from '@tomic/react';
+import { Client, core, useResource, useStore } from '@tomic/react';
 import {
   editURL,
   dataURL,
@@ -57,6 +57,7 @@ export interface ResourceContextMenuProps {
   bindActive?: (active: boolean) => void;
   /** Callback that is called after the resource was deleted */
   onAfterDelete?: () => void;
+  title?: string;
 }
 
 /** Dropdown menu that opens a bunch of actions for some resource */
@@ -66,6 +67,7 @@ function ResourceContextMenu({
   trigger,
   simple,
   isMainMenu,
+  title,
   bindActive,
   onAfterDelete,
 }: ResourceContextMenuProps) {
@@ -80,7 +82,7 @@ function ResourceContextMenu({
   // Try to not have a useResource hook in here, as that will lead to many costly fetches when the user enters a new subject
 
   const handleDestroy = useCallback(async () => {
-    const parent = resource.get<string>(properties.parent);
+    const parent = resource.get(core.properties.parent);
 
     try {
       await resource.destroy(store);
@@ -187,7 +189,12 @@ function ResourceContextMenu({
       )
     : items;
 
-  const triggerComp = trigger ?? buildDefaultTrigger(<FaEllipsisV />);
+  const triggerComp =
+    trigger ??
+    buildDefaultTrigger(
+      <FaEllipsisV />,
+      title ?? `Open ${resource.title} menu`,
+    );
 
   return (
     <>
diff --git a/browser/data-browser/src/components/forms/NewForm/NewFormDialog.tsx b/browser/data-browser/src/components/forms/NewForm/NewFormDialog.tsx
index 6b620f3dd..1f05548f0 100644
--- a/browser/data-browser/src/components/forms/NewForm/NewFormDialog.tsx
+++ b/browser/data-browser/src/components/forms/NewForm/NewFormDialog.tsx
@@ -14,7 +14,7 @@ import { useNewForm } from './useNewForm';
 import { getNamePartFromProps } from '../../../helpers/getNamePartFromProps';
 
 export interface NewFormDialogProps extends NewFormProps {
-  closeDialog: () => void;
+  closeDialog: (success?: boolean) => void;
   initialProps?: Record<string, JSONValue>;
   onSave: (subject: string) => void;
   parent: string;
@@ -43,7 +43,7 @@ export const NewFormDialog = ({
 
   const onResourceSave = useCallback(() => {
     onSave(resource.getSubject());
-    closeDialog();
+    closeDialog(true);
   }, [onSave, closeDialog, resource]);
 
   // Onmount we generate a new subject based on the classtype and the user input.
@@ -95,7 +95,7 @@ export const NewFormDialog = ({
       </DialogContent>
       <DialogActions>
         {error && <InlineErrMessage>{error.message}</InlineErrMessage>}
-        <Button subtle onClick={closeDialog}>
+        <Button subtle onClick={() => closeDialog(false)}>
           Cancel
         </Button>
         <Button onClick={save} disabled={saving}>
diff --git a/browser/data-browser/src/components/forms/ResourceField.tsx b/browser/data-browser/src/components/forms/ResourceField.tsx
index 50d6e6c2b..03588c6bd 100644
--- a/browser/data-browser/src/components/forms/ResourceField.tsx
+++ b/browser/data-browser/src/components/forms/ResourceField.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { useProperty, Resource, Property } from '@tomic/react';
 import { styled } from 'styled-components';
 import Field from './Field';
@@ -6,7 +5,7 @@ import Markdown from '../datatypes/Markdown';
 import { InputWrapper, InputStyled } from './InputStyles';
 import InputSwitcher from './InputSwitcher';
 import { AtomicLink } from '../AtomicLink';
-import { useState } from 'react';
+import React, { useId, useState } from 'react';
 import { Button } from '../Button';
 
 function generateErrorPropName(prop: Property): string {
@@ -27,14 +26,19 @@ function ResourceField({
   disabled,
   label: labelProp,
 }: IFieldProps): JSX.Element {
+  const id = useId();
   const property = useProperty(propertyURL);
   const [collapsedDynamic, setCollapsedDynamic] = useState(true);
 
   if (property === null) {
     return (
-      <Field label={labelProp || 'loading...'}>
+      <Field label={labelProp || 'loading...'} fieldId={id}>
         <InputWrapper>
-          <InputStyled disabled={disabled} placeholder='loading property...' />
+          <InputStyled
+            disabled={disabled}
+            placeholder='loading property...'
+            id={id}
+          />
         </InputWrapper>
       </Field>
     );
@@ -71,8 +75,10 @@ function ResourceField({
       handleDelete={handleDelete}
       required={required}
       disabled={disabled}
+      fieldId={id}
     >
       <InputSwitcher
+        id={id}
         key={propertyURL + ' input-switcher'}
         data-test={`input-${property.shortname}`}
         resource={resource}
@@ -106,6 +112,7 @@ function HelperText({ text, link }: HelperTextProps) {
 
 /** A single field in a Resource form should receive these */
 export type InputProps = {
+  id?: string;
   /** The resource that is being edited */
   resource: Resource;
   /** The property of the resource that is being edited */
diff --git a/browser/data-browser/src/components/forms/SearchBox/SearchBox.tsx b/browser/data-browser/src/components/forms/SearchBox/SearchBox.tsx
index 899d1a55b..858c3529c 100644
--- a/browser/data-browser/src/components/forms/SearchBox/SearchBox.tsx
+++ b/browser/data-browser/src/components/forms/SearchBox/SearchBox.tsx
@@ -6,7 +6,7 @@ import React, {
   useState,
 } from 'react';
 import styled from 'styled-components';
-import { useResource } from '@tomic/react';
+import { removeCachedSearchResults, useResource, useStore } from '@tomic/react';
 import { DropdownPortalContext } from '../../Dropdown/dropdownContext';
 import * as RadixPopover from '@radix-ui/react-popover';
 import { SearchBoxWindow } from './SearchBoxWindow';
@@ -42,6 +42,7 @@ export function SearchBox({
   onCreateItem,
   onClose,
 }: React.PropsWithChildren<SearchBoxProps>): JSX.Element {
+  const store = useStore();
   const selectedResource = useResource(value);
   const triggerRef = useRef<HTMLButtonElement>(null);
   const [inputValue, setInputValue] = useState('');
@@ -83,8 +84,9 @@ export function SearchBox({
       }
 
       handleExit(false);
+      removeCachedSearchResults(store);
     },
-    [inputValue, onChange, handleExit],
+    [inputValue, onChange, handleExit, store],
   );
 
   const handleTriggerFocus = () => {
diff --git a/browser/data-browser/src/views/OntologyPage/Class/ClassCardWrite.tsx b/browser/data-browser/src/views/OntologyPage/Class/ClassCardWrite.tsx
index c60a86537..b53014284 100644
--- a/browser/data-browser/src/views/OntologyPage/Class/ClassCardWrite.tsx
+++ b/browser/data-browser/src/views/OntologyPage/Class/ClassCardWrite.tsx
@@ -48,7 +48,7 @@ export function ClassCardWrite({ subject }: ClassCardWriteProps): JSX.Element {
   };
 
   return (
-    <StyledCard>
+    <StyledCard data-testid={`class-card-write-${resource.title}`}>
       <Column id={toAnchorId(subject)}>
         <Row center justify='space-between'>
           <TitleWrapper>
diff --git a/browser/data-browser/src/views/OntologyPage/CreateInstanceButton.tsx b/browser/data-browser/src/views/OntologyPage/CreateInstanceButton.tsx
index 993c2eac4..42029fcef 100644
--- a/browser/data-browser/src/views/OntologyPage/CreateInstanceButton.tsx
+++ b/browser/data-browser/src/views/OntologyPage/CreateInstanceButton.tsx
@@ -15,7 +15,12 @@ export function CreateInstanceButton({ ontology }: CreateInstanceButtonProps) {
   const store = useStore();
   const [active, setActive] = useState(false);
   const [classSubject, setClassSubject] = useState<string | undefined>();
-  const [dialogProps, show, close, isOpen] = useDialog();
+  const [dialogProps, show, close, isOpen] = useDialog({
+    onSuccess: () => {
+      setClassSubject(undefined);
+      setActive(false);
+    },
+  });
 
   const handleClassSelect = (subject: string | undefined) => {
     setClassSubject(subject);
@@ -30,8 +35,6 @@ export function CreateInstanceButton({ ontology }: CreateInstanceButtonProps) {
   const handleSave = (subject: string) => {
     ontology.pushPropVal(urls.properties.instances, [subject], true);
     ontology.save(store);
-    setClassSubject(undefined);
-    setActive(false);
   };
 
   return (
diff --git a/browser/data-browser/src/views/OntologyPage/Property/PropertyLineWrite.tsx b/browser/data-browser/src/views/OntologyPage/Property/PropertyLineWrite.tsx
index 64a51adda..f3b732490 100644
--- a/browser/data-browser/src/views/OntologyPage/Property/PropertyLineWrite.tsx
+++ b/browser/data-browser/src/views/OntologyPage/Property/PropertyLineWrite.tsx
@@ -1,4 +1,4 @@
-import { urls, useCanWrite, useProperty, useResource } from '@tomic/react';
+import { core, useCanWrite, useProperty, useResource } from '@tomic/react';
 import React from 'react';
 import styled from 'styled-components';
 import InputSwitcher from '../../../components/forms/InputSwitcher';
@@ -23,8 +23,8 @@ export function PropertyLineWrite({
   onRemove,
 }: PropertyLineWriteProps): JSX.Element {
   const resource = useResource(subject);
-  const shortnameProp = useProperty(urls.properties.shortname);
-  const descriptionProp = useProperty(urls.properties.description);
+  const shortnameProp = useProperty(core.properties.shortname);
+  const descriptionProp = useProperty(core.properties.description);
   const [dialogProps, show, hide] = useDialog();
   const [canEdit] = useCanWrite(resource);
 
@@ -65,7 +65,11 @@ export function PropertyLineWrite({
           property={descriptionProp}
         />
         <PropertyDatatypePicker disabled={disabled} resource={resource} />
-        <IconButton title='open' color='textLight' onClick={show}>
+        <IconButton
+          title={`Configure ${resource.title}`}
+          color='textLight'
+          onClick={show}
+        >
           <FaSlidersH />
         </IconButton>
         <IconButton
diff --git a/browser/data-browser/tests/ontology.spec.ts b/browser/data-browser/tests/ontology.spec.ts
new file mode 100644
index 000000000..c8881a7f5
--- /dev/null
+++ b/browser/data-browser/tests/ontology.spec.ts
@@ -0,0 +1,214 @@
+import { test, expect, Locator } from '@playwright/test';
+import {
+  signIn,
+  newDrive,
+  newResource,
+  before,
+  currentDialog,
+} from './test-utils';
+
+test.describe('Ontology', async () => {
+  test.beforeEach(before);
+
+  test('Create and edit ontology', async ({ page }) => {
+    const pickOption = async (query: Locator) => {
+      await page.waitForTimeout(100);
+      await query.hover();
+      await query.click();
+    };
+
+    const classCard = (name: string) =>
+      page.getByTestId(`class-card-write-${name}`);
+
+    // --- Test Start ---
+    await signIn(page);
+    await newDrive(page);
+
+    // Create new Table
+    await newResource('ontology', page);
+
+    // Name ontology
+    const ontologyName = 'youtube-thumbnail-editor';
+    await page.getByPlaceholder('my-ontology').fill(ontologyName);
+    await page.locator('dialog[open] button:has-text("Create")').click();
+    await expect(page.locator(`h1:has-text("${ontologyName}")`)).toBeVisible();
+
+    page.getByRole('button', { name: 'Edit', exact: true }).click();
+    page.locator('textarea').fill('Data model for youtube thumbnail editor');
+    page.getByRole('button', { name: 'Read', exact: true }).click();
+
+    await expect(
+      page.getByText('Data model for youtube thumbnail editor'),
+    ).toBeVisible();
+
+    await page.getByRole('button', { name: 'Edit', exact: true }).click();
+    await page.getByRole('button', { name: 'Add class', exact: true }).click();
+    await page.getByPlaceholder('shortname').fill('thumbnail');
+    await page.getByRole('button', { name: 'Save' }).click();
+
+    // Thumbnail class
+
+    await expect(page.locator('input[value="thumbnail"]')).toBeVisible();
+    await page.getByText('Change me').fill('Thumbnail of a youtube video');
+    await page.getByRole('button', { name: 'add required property' }).click();
+    await page
+      .getByPlaceholder('Search for a property or enter a URL')
+      .type('arrows');
+
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('Enter');
+
+    await expect(page.locator('input[value="arrows"]')).toBeVisible();
+    await expect(page.locator('input[value="a property"]')).toBeVisible();
+
+    await page
+      .locator('input[value="a property"]')
+      .fill('The arrows on a thumbnail');
+
+    // Arrows property
+
+    await page.getByRole('button', { name: 'Configure arrows' }).click();
+
+    await expect(currentDialog(page).getByLabel('Classtype')).toBeDisabled();
+
+    await currentDialog(page)
+      .getByLabel('Datatype')
+      .selectOption('https://atomicdata.dev/datatypes/resourceArray');
+
+    await expect(
+      currentDialog(page).getByLabel('Classtype'),
+    ).not.toBeDisabled();
+    await currentDialog(page).getByLabel('Classtype').click();
+
+    await currentDialog(page)
+      .getByPlaceholder('Search for a class')
+      .fill('arrow');
+
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('Enter');
+
+    // Arrow class
+
+    await expect(
+      classCard('arrow').locator('input[value="arrow"]'),
+    ).toBeVisible();
+    await expect(page.locator('textarea:has-text("Change me")')).toBeVisible();
+    await page.getByText('Change me').fill('An arrow in a thumbnail');
+
+    await page
+      .getByRole('button', { name: 'add recommended property' })
+      .nth(1)
+      .click();
+
+    await page.getByPlaceholder('Search for a property').fill('color');
+    await expect(page.getByText('The color of something')).toBeVisible();
+
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('Enter');
+
+    await page
+      .getByRole('button', { name: 'add required property' })
+      .nth(1)
+      .click();
+
+    await page.getByPlaceholder('Search for a property').fill('arrow-kind');
+
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('Enter');
+
+    await page.getByTitle('Configure arrow-kind').click();
+
+    await expect(
+      currentDialog(page).locator('input[value="arrow-kind"]'),
+    ).toBeVisible();
+
+    await currentDialog(page)
+      .getByLabel('Datatype')
+      .selectOption('https://atomicdata.dev/datatypes/atomicURL');
+
+    await expect(
+      currentDialog(page).getByLabel('Classtype'),
+    ).not.toBeDisabled();
+    await currentDialog(page).getByLabel('Classtype').click();
+
+    await currentDialog(page)
+      .getByPlaceholder('Search for a class')
+      .fill('arrow-kind');
+
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('Enter');
+
+    // arrow-kind class
+
+    await expect(
+      classCard('arrow-kind').locator('input[value="arrow-kind"]'),
+    ).toBeVisible();
+
+    await classCard('arrow-kind').getByTitle('add required property').click();
+
+    await page.getByPlaceholder('Search for a property').type('name');
+
+    await expect(
+      page.getByText('name - The name of a thing or person'),
+    ).toBeVisible();
+
+    await pickOption(page.getByText('name - The name'));
+
+    // Create arrow-kind instances
+
+    await page.waitForTimeout(5000);
+
+    const createInstance = async (name: string) => {
+      await page.getByRole('button', { name: 'New Instance' }).click();
+      await page.getByText('Search for a class').click();
+      await page.getByPlaceholder('Search for a class').type('arrow-kind');
+
+      await expect(page.getByText('arrow-kind - Change me')).toBeVisible();
+
+      await pickOption(page.getByText('arrow-kind - Change me'));
+
+      await expect(page.getByText('new arrow-kind')).toBeVisible();
+
+      await expect(page.getByLabel('name')).toBeVisible();
+      await page.getByLabel('name').fill(name);
+      await currentDialog(page).getByRole('button', { name: 'Save' }).click();
+
+      await expect(page.getByRole('heading', { name })).toBeVisible();
+    };
+
+    await createInstance('Red arrow with circle');
+    await createInstance('Green arrow with black border');
+
+    await page.waitForTimeout(5000);
+
+    await page
+      .getByRole('button', { name: 'add an item to the allows-only list' })
+      .nth(1)
+      .click();
+    await page.getByRole('button', { name: 'Search for a resource' }).click();
+    await page
+      .getByPlaceholder('Search for a resource or ')
+      .type('red arrow with circle');
+    await pickOption(
+      page.getByRole('dialog').getByText('Red arrow with circle'),
+    );
+
+    await page
+      .getByRole('button', { name: 'add an item to the allows-only list' })
+      .nth(1)
+      .click();
+    await page.getByRole('button', { name: 'Search for a resource' }).click();
+    await page
+      .getByPlaceholder('Search for a resource or ')
+      .type('green arrow with black border');
+    await pickOption(
+      page.getByRole('dialog').getByText('Green arrow with black border'),
+    );
+
+    expect(await page.getByText('Red arrow with circle').count()).toBe(3);
+    expect(await page.getByText('Green arrow with black border').count()).toBe(
+      3,
+    );
+  });
+});
diff --git a/browser/data-browser/tests/tables.spec.ts b/browser/data-browser/tests/tables.spec.ts
index 7eaea2a07..77a0d2ad4 100644
--- a/browser/data-browser/tests/tables.spec.ts
+++ b/browser/data-browser/tests/tables.spec.ts
@@ -99,7 +99,7 @@ test.describe('tables', async () => {
     // Name table
     const tableName = 'Made up music genres';
     await page.getByPlaceholder('New Table').fill(tableName);
-    await page.locator('button:has-text("Create")').click();
+    await page.locator('dialog[open] button:has-text("Create")').click();
     await expect(page.locator(`h1:has-text("${tableName}")`)).toBeVisible();
 
     // Create Date column
diff --git a/browser/data-browser/tests/test-utils.ts b/browser/data-browser/tests/test-utils.ts
index 3d5715d1f..85da31570 100644
--- a/browser/data-browser/tests/test-utils.ts
+++ b/browser/data-browser/tests/test-utils.ts
@@ -35,7 +35,7 @@ export const currentDialogOkButton = 'dialog[open] >> footer >> text=Ok';
 export const REBUILD_INDEX_TIME = 5000;
 
 /** Checks server URL and browser URL */
-export const before = async ({ page }) => {
+export const before = async ({ page }: { page: Page }) => {
   if (!SERVER_URL) {
     throw new Error('serverUrl is not set');
   }
@@ -59,8 +59,8 @@ export async function setTitle(page: Page, title: string) {
 }
 
 export async function disableViewTransition(page: Page) {
-  await page.click('text=Theme Settings');
-  const checkbox = await page.getByLabel('Enable view transition');
+  await page.click('text=Settings');
+  const checkbox = page.getByLabel('Enable view transition');
 
   await expect(checkbox).toBeVisible();
 
@@ -71,7 +71,7 @@ export async function disableViewTransition(page: Page) {
 /** Signs in using an AtomicData.dev test user */
 export async function signIn(page: Page) {
   await disableViewTransition(page);
-  await page.click('text=user settings');
+  await page.click('text=Login');
   await expect(page.locator('text=edit data and sign Commits')).toBeVisible();
   // If there are any issues with this agent, try creating a new one https://atomicdata.dev/invites/1
   const test_agent =
@@ -233,3 +233,7 @@ export async function contextMenuClick(text: string, page: Page) {
 
 export const waitForCommit = async (page: Page) =>
   page.waitForResponse(`${SERVER_URL}/commit`);
+
+export function currentDialog(page: Page) {
+  return page.locator('dialog[open]');
+}
diff --git a/browser/lib/src/search.ts b/browser/lib/src/search.ts
index a5342e245..693a5ffbc 100644
--- a/browser/lib/src/search.ts
+++ b/browser/lib/src/search.ts
@@ -1,3 +1,5 @@
+import { Store } from './index.js';
+
 export interface SearchOpts {
   /** Fetch full resources instead of subjects */
   include?: boolean;
@@ -11,6 +13,13 @@ export interface SearchOpts {
   };
 }
 
+const baseURL = (serverURL: string) => {
+  const url = new URL(serverURL);
+  url.pathname = 'search';
+
+  return url;
+};
+
 // https://github.com/quickwit-oss/tantivy/blob/064518156f570ee2aa03cf63be6d5605a96d6285/query-grammar/src/query_grammar.rs#L19
 const specialCharsTantivy = [
   '+',
@@ -56,8 +65,7 @@ export function buildSearchSubject(
   opts: SearchOpts = {},
 ) {
   const { include = false, limit = 30, scope, filters } = opts;
-  const url = new URL(serverURL);
-  url.pathname = 'search';
+  const url = baseURL(serverURL);
 
   // Only add filters if there are any keys, and if any key is defined
   const hasFilters =
@@ -73,3 +81,15 @@ export function buildSearchSubject(
 
   return url.toString();
 }
+
+export function removeCachedSearchResults(store: Store) {
+  const url = baseURL(store.getServerUrl()).toString();
+
+  const searchResources = store.clientSideQuery(r =>
+    r.getSubject().startsWith(url),
+  );
+
+  for (const resource of searchResources) {
+    store.removeResource(resource.getSubject());
+  }
+}
diff --git a/browser/react/src/useServerSearch.tsx b/browser/react/src/useServerSearch.tsx
index 7f54eb90f..dc9161140 100644
--- a/browser/react/src/useServerSearch.tsx
+++ b/browser/react/src/useServerSearch.tsx
@@ -1,6 +1,17 @@
-import { buildSearchSubject, SearchOpts, urls } from '@tomic/lib';
+import {
+  buildSearchSubject,
+  removeCachedSearchResults,
+  SearchOpts,
+  urls,
+} from '@tomic/lib';
 import { useEffect, useMemo, useState } from 'react';
-import { useArray, useDebounce, useResource, useServerURL } from './index.js';
+import {
+  useArray,
+  useDebounce,
+  useResource,
+  useServerURL,
+  useStore,
+} from './index.js';
 
 interface SearchResults {
   /** Subject URLs for resources that match the query */
@@ -33,7 +44,7 @@ export function useServerSearch(
   opts: SearchOptsHook = {},
 ): SearchResults {
   const { debounce = 50 } = opts;
-
+  const store = useStore();
   const [results, setResults] = useState<string[]>([]);
   const [serverURL] = useServerURL();
   // Calculating the query takes a while, so we debounce it
@@ -61,6 +72,13 @@ export function useServerSearch(
     resource.loading,
   ]);
 
+  // Remove cached results when component unmounts.
+  useEffect(() => {
+    return () => {
+      removeCachedSearchResults(store);
+    };
+  }, []);
+
   const result = useMemo(
     () => ({
       results,