addProjectFromTemplate on backend

packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBar.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useCombobox } from 'downshift';
 import { Project } from 'gql-client';
-import { useDebounceValue } from 'usehooks-ts';
+import { useDebounce } from 'usehooks-ts';
 
 import SearchBar from 'components/SearchBar';
 import { useGQLClient } from 'context/GQLClientContext';
@@ -42,7 +42,7 @@ export const ProjectSearchBar = ({ onChange }: ProjectSearchBarProps) => {
     },
   });
 
-  const [debouncedInputValue, _] = useDebounceValue<string>(inputValue, 300);
+  const debouncedInputValue = useDebounce<string>(inputValue, 300);
 
   const fetchProjects = useCallback(
     async (inputValue: string) => {

packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBarDialog.tsx

@@ -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 { useDebounceValue } from 'usehooks-ts';
+import { useDebounce } from 'usehooks-ts';
 import { ProjectSearchBarItem } from './ProjectSearchBarItem';
 import { ProjectSearchBarEmpty } from './ProjectSearchBarEmpty';
 import { useNavigate } from 'react-router-dom';
@@ -27,30 +27,25 @@ export const ProjectSearchBarDialog = ({
   const client = useGQLClient();
   const navigate = useNavigate();
 
-  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 { 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 [debouncedInputValue, _] = useDebounceValue<string>(inputValue, 300);
+  const debouncedInputValue = useDebounce<string>(inputValue, 300);
 
   const fetchProjects = useCallback(
     async (inputValue: string) => {
@@ -91,7 +86,7 @@ export const ProjectSearchBarDialog = ({
               </Button>
             </div>
             {/* Content */}
-            <div className="flex flex-col gap-1 px-2 py-2" {...getMenuProps()}>
+            <div className="flex flex-col gap-1 px-2 py-2">
               {items.length > 0
                 ? items.map((item, index) => (
                     <>

packages/frontend/src/layouts/ProjectSearch.tsx

@@ -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] hover:z-30">
+      <div className="sticky hidden lg:block top-0 border-b bg-base-bg border-border-separator/[0.06] z-30">
         <div className="flex pr-6 pl-2 py-2 items-center">
           <div className="flex-1">
             <ProjectSearchBar

packages/frontend/src/pages/org-slug/projects/create/success/Id.tsx

@@ -11,128 +11,98 @@ 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 = 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 = '/';
-    }
+  const handleSetupDomain = () => {
+    //TODO: Implement this
   };
-
-  useEffect(() => {
-    handleSetupDomain();
-  });
-
   return (
-    <>
-      {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>
+    <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={project ? `https://${project.subDomain}` : ''}
-                as="a"
-                variant="link-emphasized"
-                external
-                leftIcon={<LinkChainIcon />}
-              >
-                {project.subDomain}
+      {/* 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} />
+          </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>
-            </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>
   );
 };
 

packages/frontend/src/pages/org-slug/projects/create/template/index.tsx

@@ -11,10 +11,7 @@ import { Template } from '../../../../../types/types';
 import { Heading } from 'components/shared/Heading';
 import { Input } from 'components/shared/Input';
 import { Select, SelectOption } from 'components/shared/Select';
-import {
-  ArrowRightCircleFilledIcon,
-  LoadingIcon,
-} from 'components/shared/CustomIcon';
+import { ArrowRightCircleFilledIcon } from 'components/shared/CustomIcon';
 import { Checkbox } from 'components/shared/Checkbox';
 import { Button } from 'components/shared/Button';
 import { useToast } from 'components/shared/Toast';
@@ -195,13 +192,7 @@ const CreateRepo = () => {
             {...buttonSize}
             type="submit"
             disabled={!Boolean(template.repoFullName) || isLoading}
-            rightIcon={
-              isLoading ? (
-                <LoadingIcon className="animate-spin" />
-              ) : (
-                <ArrowRightCircleFilledIcon />
-              )
-            }
+            rightIcon={<ArrowRightCircleFilledIcon />}
           >
             Deploy
           </Button>

packages/frontend/src/pages/org-slug/projects/id/Overview.tsx

@@ -131,12 +131,9 @@ const OverviewTabPanel = () => {
             <Heading className="text-lg leading-6 font-medium truncate">
               {project.name}
             </Heading>
-            <a
-              href={`https://${project.subDomain}`}
-              className="text-sm text-elements-low-em tracking-tight truncate"
-            >
+            <p className="text-sm text-elements-low-em tracking-tight truncate">
               {project.subDomain}
-            </a>
+            </p>
           </div>
         </div>
         <OverviewInfo label="Domain" icon={<GlobeIcon />}>

packages/frontend/src/stories/Components/ProjectSearchBar.stories.tsx

@@ -1,20 +0,0 @@
-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 = {};