fix: ProjectSearchBarDialog suppressRefError

fix(ProjectSearchBarDialog): getMenuProps error (#221 )
- Replaced `useDebounce` with `useDebounceValue` for better type inference and simplicity - Added `getMenuProps` to `useCombobox` to support better accessibility and usability - Minor style tweak to improve `ProjectSearch` header hover effect - Created Storybook stories for the `ProjectSearchBar` component ---
2024-06-24 22:49:30 +00:00 · 2024-06-24 18:48:32 -04:00 · 2024-06-24 18:44:34 -04:00 · 2024-06-24 18:41:31 -04:00
6 changed files with 173 additions and 107 deletions
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useCombobox } from 'downshift';
 import { Project } from 'gql-client';
-import { useDebounce } from 'usehooks-ts';
+import { useDebounceValue } from 'usehooks-ts';

 import SearchBar from 'components/SearchBar';
 import { useGQLClient } from 'context/GQLClientContext';
@@ -42,7 +42,7 @@ export const ProjectSearchBar = ({ onChange }: ProjectSearchBarProps) => {
    },
  });

-  const debouncedInputValue = useDebounce<string>(inputValue, 300);
+  const [debouncedInputValue, _] = useDebounceValue<string>(inputValue, 300);

  const fetchProjects = useCallback(
    async (inputValue: string) => {
@@ -62,7 +62,7 @@ export const ProjectSearchBar = ({ onChange }: ProjectSearchBarProps) => {
    <div className="relative w-full lg:w-fit">
      <SearchBar {...getInputProps()} />
      <div
-        {...getMenuProps()}
+        {...getMenuProps({}, { suppressRefError: true })}
        className={cn(
          'flex flex-col shadow-dropdown rounded-xl bg-surface-card absolute w-[459px] max-h-52 overflow-y-auto px-2 py-2 gap-1 z-50',
          { hidden: !inputValue || !isOpen },
@@ -5,7 +5,7 @@ import { CrossIcon, SearchIcon } from 'components/shared/CustomIcon';
 import { Input } from 'components/shared/Input';
 import { useGQLClient } from 'context/GQLClientContext';
 import { Project } from 'gql-client';
-import { useDebounce } from 'usehooks-ts';
+import { useDebounceValue } from 'usehooks-ts';
 import { ProjectSearchBarItem } from './ProjectSearchBarItem';
 import { ProjectSearchBarEmpty } from './ProjectSearchBarEmpty';
 import { useNavigate } from 'react-router-dom';
@@ -27,25 +27,30 @@ export const ProjectSearchBarDialog = ({
  const client = useGQLClient();
  const navigate = useNavigate();

-  const { getInputProps, getItemProps, inputValue, setInputValue } =
-    useCombobox({
-      items,
-      itemToString(item) {
-        return item ? item.name : '';
-      },
-      selectedItem,
-      onSelectedItemChange: ({ selectedItem: newSelectedItem }) => {
-        if (newSelectedItem) {
-          setSelectedItem(newSelectedItem);
-          onClickItem?.(newSelectedItem);
-          navigate(
-            `/${newSelectedItem.organization.slug}/projects/${newSelectedItem.id}`,
-          );
-        }
-      },
-    });
+  const {
+    getInputProps,
+    getItemProps,
+    getMenuProps,
+    inputValue,
+    setInputValue,
+  } = useCombobox({
+    items,
+    itemToString(item) {
+      return item ? item.name : '';
+    },
+    selectedItem,
+    onSelectedItemChange: ({ selectedItem: newSelectedItem }) => {
+      if (newSelectedItem) {
+        setSelectedItem(newSelectedItem);
+        onClickItem?.(newSelectedItem);
+        navigate(
+          `/${newSelectedItem.organization.slug}/projects/${newSelectedItem.id}`,
+        );
+      }
+    },
+  });

-  const debouncedInputValue = useDebounce<string>(inputValue, 300);
+  const [debouncedInputValue, _] = useDebounceValue<string>(inputValue, 300);

  const fetchProjects = useCallback(
    async (inputValue: string) => {
@@ -75,7 +80,7 @@ export const ProjectSearchBarDialog = ({
          <div className="h-full flex flex-col fixed top-0 inset-0">
            <div className="py-2.5 px-4 flex items-center justify-between border-b border-border-separator/[0.06]">
              <Input
-                {...getInputProps()}
+                {...getInputProps({}, { suppressRefError: true })}
                leftIcon={<SearchIcon />}
                placeholder="Search"
                appearance="borderless"
@@ -86,7 +91,15 @@ export const ProjectSearchBarDialog = ({
              </Button>
            </div>
            {/* Content */}
-            <div className="flex flex-col gap-1 px-2 py-2">
+            <div
+              className="flex flex-col gap-1 px-2 py-2"
+              {...getMenuProps(
+                {},
+                {
+                  suppressRefError: true,
+                },
+              )}
+            >
              {items.length > 0
                ? items.map((item, index) => (
                    <>
@@ -32,7 +32,7 @@ const ProjectSearch = () => {
  return (
    <section className="h-full flex flex-col">
      {/* Header */}
-      <div className="sticky hidden lg:block top-0 border-b bg-base-bg border-border-separator/[0.06] z-30">
+      <div className="sticky hidden lg:block top-0 border-b bg-base-bg border-border-separator/[0.06] hover:z-30">
        <div className="flex pr-6 pl-2 py-2 items-center">
          <div className="flex-1">
            <ProjectSearchBar
@@ -11,98 +11,128 @@ import {
 import { Heading } from 'components/shared/Heading';

 import logoAnimation from 'components/../../public/lottie/logo.json';
+import { useGQLClient } from 'context/GQLClientContext';
+import { Project } from 'gql-client';
+import { useEffect, useState } from 'react';

 const Id = () => {
  const { id, orgSlug } = useParams();
+  const client = useGQLClient();
+  const [project, setProject] = useState<Project | null>(null);

-  const handleSetupDomain = () => {
-    //TODO: Implement this
+  const handleSetupDomain = async () => {
+    if (id) {
+      // console.log('id', id);
+      // console.log('getting project for id', id);
+      const project = await client.getProject(id);
+      // console.log('project found:', project);
+      if (project && project.project) {
+        // console.log('project:', project.project);
+        setProject(project.project);
+      }
+    } else {
+      window.location.href = '/';
+    }
  };
+
+  useEffect(() => {
+    handleSetupDomain();
+  });
+
  return (
-    <div className="flex flex-col gap-8 lg:gap-11 max-w-[522px] mx-auto py-6 lg:py-12">
-      {/* Icon */}
-      <div className="flex justify-center">
-        <Lottie animationData={logoAnimation} loop={false} size={40} />
-      </div>
-
-      {/* Heading */}
-      <div className="flex flex-col items-center gap-1.5">
-        <Heading as="h3" className="font-medium text-xl">
-          Project deployed successfully.
-        </Heading>
-        <p className="flex flex-col items-center lg:flex-row font-sans gap-0.5 lg:gap-2 text-sm text-elements-high-em">
-          Your project has been deployed at{' '}
-          <Button
-            className="no-underline text-elements-link"
-            // TODO: use dynamic value
-            href="https://www.iglootools.snowballtools.xyz"
-            as="a"
-            variant="link-emphasized"
-            external
-            leftIcon={<LinkChainIcon />}
-          >
-            {/* // TODO: use dynamic value */}
-            www.iglootools.snowballtools.xyz
-          </Button>
-        </p>
-      </div>
-
-      {/* Card */}
-      <div className="bg-base-bg-alternate rounded-xl shadow-inset w-full px-1 py-1">
-        {/* Trigger question */}
-        <div className="flex gap-2 justify-center items-center py-3">
-          <div className="h-5 w-5">
-            <QuestionMarkRoundFilledIcon size={18} />
+    <>
+      {project ? (
+        <div className="flex flex-col gap-8 lg:gap-11 max-w-[522px] mx-auto py-6 lg:py-12">
+          {/* Icon */}
+          <div className="flex justify-center">
+            <Lottie animationData={logoAnimation} loop={false} size={40} />
          </div>
-          <Heading as="h5" className="font-sans font-medium text-sm">
-            {`Wondering what's next?`}
-          </Heading>
-        </div>

-        {/* CTA card */}
-        <div className="bg-surface-card rounded-xl shadow-card-sm px-4 py-4">
-          <div className="flex gap-2">
-            <Badge variant="secondary">1</Badge>
-            <div className="space-y-3">
-              <div className="flex flex-col gap-1">
-                <Heading as="h6" className="text-sm font-sans">
-                  Add a custom domain
-                </Heading>
-                <p className="text-xs text-elements-low-em font-sans">
-                  Make it easy for your visitors to remember your URL with a
-                  custom domain.
-                </p>
-              </div>
-              <Button onClick={handleSetupDomain} variant="tertiary" size="sm">
-                Setup domain
+          {/* Heading */}
+          <div className="flex flex-col items-center gap-1.5">
+            <Heading as="h3" className="font-medium text-xl">
+              Project deployed successfully.
+            </Heading>
+            <p className="flex flex-col items-center lg:flex-row font-sans gap-0.5 lg:gap-2 text-sm text-elements-high-em">
+              Your project has been deployed at{' '}
+              <Button
+                className="no-underline text-elements-link"
+                // TODO: use dynamic value
+                href={project ? `https://${project.subDomain}` : ''}
+                as="a"
+                variant="link-emphasized"
+                external
+                leftIcon={<LinkChainIcon />}
+              >
+                {project.subDomain}
              </Button>
+            </p>
+          </div>
+
+          {/* Card */}
+          <div className="bg-base-bg-alternate rounded-xl shadow-inset w-full px-1 py-1">
+            {/* Trigger question */}
+            <div className="flex gap-2 justify-center items-center py-3">
+              <div className="h-5 w-5">
+                <QuestionMarkRoundFilledIcon size={18} />
+              </div>
+              <Heading as="h5" className="font-sans font-medium text-sm">
+                {`Wondering what's next?`}
+              </Heading>
+            </div>
+
+            {/* CTA card */}
+            <div className="bg-surface-card rounded-xl shadow-card-sm px-4 py-4">
+              <div className="flex gap-2">
+                <Badge variant="secondary">1</Badge>
+                <div className="space-y-3">
+                  <div className="flex flex-col gap-1">
+                    <Heading as="h6" className="text-sm font-sans">
+                      Add a custom domain
+                    </Heading>
+                    <p className="text-xs text-elements-low-em font-sans">
+                      Make it easy for your visitors to remember your URL with a
+                      custom domain.
+                    </p>
+                  </div>
+                  <Button
+                    onClick={handleSetupDomain}
+                    variant="tertiary"
+                    size="sm"
+                  >
+                    Setup domain
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* CTA Buttons */}
+          <div className="flex flex-col lg:flex-row justify-center gap-3">
+            <div className="w-full lg:w-fit">
+              <Link to="/">
+                <Button
+                  leftIcon={<ArrowLeftCircleFilledIcon />}
+                  fullWidth
+                  variant="tertiary"
+                >
+                  Back to projects
+                </Button>
+              </Link>
+            </div>
+            <div className="w-full lg:w-fit">
+              <Link to={`/${orgSlug}/projects/${id}`}>
+                <Button fullWidth variant="primary">
+                  View project
+                </Button>
+              </Link>
            </div>
          </div>
        </div>
-      </div>
-
-      {/* CTA Buttons */}
-      <div className="flex flex-col lg:flex-row justify-center gap-3">
-        <div className="w-full lg:w-fit">
-          <Link to="/">
-            <Button
-              leftIcon={<ArrowLeftCircleFilledIcon />}
-              fullWidth
-              variant="tertiary"
-            >
-              Back to projects
-            </Button>
-          </Link>
-        </div>
-        <div className="w-full lg:w-fit">
-          <Link to={`/${orgSlug}/projects/${id}`}>
-            <Button fullWidth variant="primary">
-              View project
-            </Button>
-          </Link>
-        </div>
-      </div>
-    </div>
+      ) : (
+        <></>
+      )}
+    </>
  );
 };

@@ -131,9 +131,12 @@ const OverviewTabPanel = () => {
            <Heading className="text-lg leading-6 font-medium truncate">
              {project.name}
            </Heading>
-            <p className="text-sm text-elements-low-em tracking-tight truncate">
+            <a
+              href={`https://${project.subDomain}`}
+              className="text-sm text-elements-low-em tracking-tight truncate"
+            >
              {project.subDomain}
-            </p>
+            </a>
          </div>
        </div>
        <OverviewInfo label="Domain" icon={<GlobeIcon />}>
@@ -0,0 +1,20 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { ProjectSearchBar } from 'components/projects/ProjectSearchBar';
+
+const meta: Meta<typeof ProjectSearchBar> = {
+  title: 'Components/ProjectSearchBar',
+  component: ProjectSearchBar,
+  tags: ['autodocs'],
+  argTypes: {
+    onChange: {
+      action: 'change',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ProjectSearchBar>;
+
+export const Default: Story = {};
Author	SHA1	Message	Date
Vivian Phung	c433ce0e27	fix: ProjectSearchBarDialog suppressRefError	2024-06-24 22:49:30 +00:00
Vivian Phung	f981f1a3f6	fix(ProjectSearchBarDialog): `getMenuProps` error (#221 ) - Replaced `useDebounce` with `useDebounceValue` for better type inference and simplicity - Added `getMenuProps` to `useCombobox` to support better accessibility and usability - Minor style tweak to improve `ProjectSearch` header hover effect - Created Storybook stories for the `ProjectSearchBar` component ---	2024-06-24 18:48:32 -04:00
Vivian Phung	dee84f18cb	feat: dynamic project success page and update links (#220 ) ### TL;DR Integrates project data fetching for dynamic subdomain display on the Project Deployment Success page and the OverviewTabPanel. ### What changed? - Updated `Id.tsx` to fetch project data and dynamically display project's subdomain after deployment. - Modified `Overview.tsx` to make project's subdomain a clickable link. ### How to test? 1. Deploy a new project and check the deployment success page for correct subdomain display. 2. Open a project's overview tab and click the subdomain link to ensure it navigates correctly. ### Why make this change? Improves user experience by displaying the actual subdomain and making it clickable, ensuring users can conveniently verify their deployment and access project domain. ---	2024-06-24 18:44:34 -04:00
Vivian Phung	44015d5451	feat(ui): loading spinner on project creation (#219 ) ### TL;DR This pull request adds a loading icon to the 'Deploy' button in the project template creation form. ### What changed? - Imported `LoadingIcon` from `components/shared/CustomIcon`. - Modified the `Button` component to conditionally display the `LoadingIcon` when `isLoading` is `true`. The icon will animate by spinning. ### How to test? 1. Navigate to the project template creation form. 2. Fill in the required fields. 3. Click the 'Deploy' button. 4. Ensure the loading icon appears and spins when the button is disabled (when `isLoading` is `true`). ### Why make this change? This change provides visual feedback to users, indicating that their action is being processed, thereby enhancing user experience. ---	2024-06-24 18:41:31 -04:00