✨(frontend) refactor QuickSearch components

- Simplified QuickSearchProps by removing unused properties and enhancing type definitions. - Updated QuickSearch component to utilize children for rendering, improving flexibility. - Added separator prop to QuickSearchInput for better control over layout. - Removed data prop from DocSearchModal's QuickSearch to streamline the component's usage.
2024-12-16 10:15:42 +01:00
parent c3da23f5d3
commit ceaf1e28f9
5 changed files with 105 additions and 104 deletions
--- a/src/frontend/apps/impress/src/components/quick-search/QuickSearch.tsx
+++ b/src/frontend/apps/impress/src/components/quick-search/QuickSearch.tsx
@@ -1,9 +1,10 @@
 import { Command } from 'cmdk';
 import { ReactNode, useRef } from 'react';

+import { hasChildrens } from '@/utils/children';
+
 import { Box } from '../Box';

-import { QuickSearchGroup } from './QuickSearchGroup';
 import { QuickSearchInput } from './QuickSearchInput';
 import { QuickSearchStyle } from './QuickSearchStyle';

@@ -21,11 +22,8 @@ export type QuickSearchData<T> = {
  showWhenEmpty?: boolean;
 };

-export type QuickSearchProps<T> = {
-  data?: QuickSearchData<T>[];
+export type QuickSearchProps = {
  onFilter?: (str: string) => void;
-  renderElement?: (element: T) => ReactNode;
-  onSelect?: (element: T) => void;
  inputValue?: string;
  inputContent?: ReactNode;
  showInput?: boolean;
@@ -35,19 +33,16 @@ export type QuickSearchProps<T> = {
  children?: ReactNode;
 };

-export const QuickSearch = <T,>({
-  onSelect,
+export const QuickSearch = ({
  onFilter,
  inputContent,
  inputValue,
  loading,
  showInput = true,
-  data,
-  renderElement,
  label,
  placeholder,
  children,
-}: QuickSearchProps<T>) => {
+}: QuickSearchProps) => {
  const ref = useRef<HTMLDivElement | null>(null);

  return (
@@ -58,6 +53,7 @@ export const QuickSearch = <T,>({
          {showInput && (
            <QuickSearchInput
              loading={loading}
+              withSeparator={hasChildrens(children)}
              inputValue={inputValue}
              onFilter={onFilter}
              placeholder={placeholder}
@@ -66,20 +62,7 @@ export const QuickSearch = <T,>({
            </QuickSearchInput>
          )}
          <Command.List>
-            <Box>
-              {!loading &&
-                data?.map((group) => {
-                  return (
-                    <QuickSearchGroup
-                      key={group.groupName}
-                      group={group}
-                      onSelect={onSelect}
-                      renderElement={renderElement}
-                    />
-                  );
-                })}
-              {children}
-            </Box>
+            <Box>{children}</Box>
          </Command.List>
        </Command>
      </div>
--- a/src/frontend/apps/impress/src/components/quick-search/QuickSearchGroup.tsx
+++ b/src/frontend/apps/impress/src/components/quick-search/QuickSearchGroup.tsx
@@ -1,14 +1,15 @@
 import { Command } from 'cmdk';
+import { ReactNode } from 'react';

 import { Box } from '../Box';

-import { QuickSearchData, QuickSearchProps } from './QuickSearch';
+import { QuickSearchData } from './QuickSearch';
 import { QuickSearchItem } from './QuickSearchItem';

 type Props<T> = {
  group: QuickSearchData<T>;
-  onSelect?: QuickSearchProps<T>['onSelect'];
-  renderElement: QuickSearchProps<T>['renderElement'];
+  renderElement?: (element: T) => ReactNode;
+  onSelect?: (element: T) => void;
 };

 export const QuickSearchGroup = <T,>({
@@ -16,7 +17,6 @@ export const QuickSearchGroup = <T,>({
  onSelect,
  renderElement,
 }: Props<T>) => {
-  console.log('group', group, group.emptyString && group.elements.length === 0);
  return (
    <Box $margin={{ top: 'base' }}>
      <Command.Group
--- a/src/frontend/apps/impress/src/components/quick-search/QuickSearchInput.tsx
+++ b/src/frontend/apps/impress/src/components/quick-search/QuickSearchInput.tsx
@@ -15,6 +15,7 @@ type Props = {
  onFilter?: (str: string) => void;
  placeholder?: string;
  children?: ReactNode;
+  withSeparator?: boolean;
 };
 export const QuickSearchInput = ({
  loading,
@@ -22,6 +23,7 @@ export const QuickSearchInput = ({
  onFilter,
  placeholder,
  children,
+  withSeparator: separator = true,
 }: Props) => {
  const { t } = useTranslation();
  const { spacingsTokens } = useCunninghamTheme();
@@ -31,7 +33,7 @@ export const QuickSearchInput = ({
    return (
      <>
        {children}
-        <HorizontalSeparator />
+        {separator && <HorizontalSeparator />}
      </>
    );
  }
@@ -61,7 +63,7 @@ export const QuickSearchInput = ({
          onValueChange={onFilter}
        />
      </Box>
-      <HorizontalSeparator $withPadding={false} />
+      {separator && <HorizontalSeparator $withPadding={false} />}
    </>
  );
 };
--- a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx
@@ -72,7 +72,6 @@ export const DocSearchModal = ({ ...modalProps }: DocSearchModalProps) => {
        <QuickSearch
          placeholder={t('Type the name of a document')}
          loading={loading}
-          data={[]}
          onFilter={handleInputSearch}
        >
          <Box $height={isDesktop ? '500px' : 'calc(100vh - 68px - 1rem)'}>
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx
@@ -1,8 +1,9 @@
-import { Button } from '@openfun/cunningham-react';
+import { Button, useModal } from '@openfun/cunningham-react';
 import { DateTime } from 'luxon';
 import { css } from 'styled-components';

 import { Box, Icon, StyledLink, Text } from '@/components';
+import { DocShareModal } from '@/features/docs/doc-share/component/DocShareModal';
 import { useResponsiveStore } from '@/stores';

 import { Doc, LinkReach } from '../../doc-management';
@@ -16,90 +17,106 @@ type DocsGridItemProps = {
 export const DocsGridItem = ({ doc }: DocsGridItemProps) => {
  const { isDesktop } = useResponsiveStore();

+  const shareModal = useModal();
  const isPublic = doc.link_reach === LinkReach.PUBLIC;
  const isAuthenticated = doc.link_reach === LinkReach.AUTHENTICATED;
  const isRestricted = doc.link_reach === LinkReach.RESTRICTED;
  const sharedCount = doc.nb_accesses - 1;
  const isShared = sharedCount > 0;

+  const handleShareClick = () => {
+    shareModal.open();
+  };
+
  return (
-    <Box
-      $direction="row"
-      $width="100%"
-      $align="center"
-      $gap="20px"
-      role="row"
-      $padding={{ vertical: 'xs', horizontal: 'sm' }}
-      $css={css`
-        cursor: pointer;
-        border-radius: 4px;
-        &:hover {
-          background-color: var(--c--theme--colors--greyscale-100);
-        }
-      `}
-    >
-      <StyledLink $css="flex: 7; align-items: center;" href={`/docs/${doc.id}`}>
-        <Box
-          data-testid={`docs-grid-name-${doc.id}`}
-          $flex={6}
-          $padding={{ right: 'base' }}
-        >
-          <SimpleDocItem doc={doc} />
-        </Box>
-        {isDesktop && (
-          <Box $flex={1.3}>
-            <Text $variation="500" $size="xs">
-              {DateTime.fromISO(doc.updated_at).toRelative()}
-            </Text>
-          </Box>
-        )}
-      </StyledLink>
+    <>
      <Box
-        $flex={1}
        $direction="row"
+        $width="100%"
        $align="center"
-        $justify="flex-end"
-        $gap="10px"
+        $gap="20px"
+        role="row"
+        $padding={{ vertical: 'xs', horizontal: 'sm' }}
+        $css={css`
+          cursor: pointer;
+          border-radius: 4px;
+          &:hover {
+            background-color: var(--c--theme--colors--greyscale-100);
+          }
+        `}
      >
-        {isDesktop && isPublic && (
-          <Button
-            onClick={(event) => {
-              event.preventDefault();
-              event.stopPropagation();
-            }}
-            size="nano"
-            icon={<Icon $variation="000" iconName="public" />}
+        <StyledLink
+          $css="flex: 7; align-items: center;"
+          href={`/docs/${doc.id}`}
+        >
+          <Box
+            data-testid={`docs-grid-name-${doc.id}`}
+            $flex={6}
+            $padding={{ right: 'base' }}
          >
-            {isShared ? sharedCount : undefined}
-          </Button>
-        )}
-        {isDesktop && !isPublic && isRestricted && isShared && (
-          <Button
-            onClick={(event) => {
-              event.preventDefault();
-              event.stopPropagation();
-            }}
-            color="tertiary"
-            size="nano"
-            icon={<Icon $variation="800" $theme="primary" iconName="group" />}
-          >
-            {sharedCount}
-          </Button>
-        )}
-        {isDesktop && !isPublic && isAuthenticated && (
-          <Button
-            onClick={(event) => {
-              event.preventDefault();
-              event.stopPropagation();
-            }}
-            size="nano"
-            icon={<Icon $variation="000" iconName="corporate_fare" />}
-          >
-            {sharedCount}
-          </Button>
-        )}
-        <DocsGridActions doc={doc} />
+            <SimpleDocItem doc={doc} />
+          </Box>
+          {isDesktop && (
+            <Box $flex={1.3}>
+              <Text $variation="500" $size="xs">
+                {DateTime.fromISO(doc.updated_at).toRelative()}
+              </Text>
+            </Box>
+          )}
+        </StyledLink>
+        <Box
+          $flex={1}
+          $direction="row"
+          $align="center"
+          $justify="flex-end"
+          $gap="10px"
+        >
+          {isDesktop && isPublic && (
+            <Button
+              onClick={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                handleShareClick();
+              }}
+              size="nano"
+              icon={<Icon $variation="000" iconName="public" />}
+            >
+              {isShared ? sharedCount : undefined}
+            </Button>
+          )}
+          {isDesktop && !isPublic && isRestricted && isShared && (
+            <Button
+              onClick={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                handleShareClick();
+              }}
+              color="tertiary"
+              size="nano"
+              icon={<Icon $variation="800" $theme="primary" iconName="group" />}
+            >
+              {sharedCount}
+            </Button>
+          )}
+          {isDesktop && !isPublic && isAuthenticated && (
+            <Button
+              onClick={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                handleShareClick();
+              }}
+              size="nano"
+              icon={<Icon $variation="000" iconName="corporate_fare" />}
+            >
+              {sharedCount}
+            </Button>
+          )}
+          <DocsGridActions doc={doc} />
+        </Box>
      </Box>
-    </Box>
+      {shareModal.isOpen && (
+        <DocShareModal doc={doc} onClose={shareModal.close} />
+      )}
+    </>
  );
 };