🐛 Fixed webapp + magic link working

panoratech · Dec 6, 2023 · 23af88c · 23af88c
1 parent 6f617a0
commit 23af88c
Show file tree

Hide file tree

Showing 14 changed files with 140 additions and 50 deletions.
diff --git a/apps/webapp/.env.example b/apps/webapp/.env.example
@@ -1 +1,2 @@
-VITE_BACKEND_DOMAIN=https://api-staging.panora.dev/ #https://api-staging.panora.dev/
+VITE_BACKEND_DOMAIN=https://api-staging.panora.dev #https://api-staging.panora.dev/
+VITE_FRONTEND_DOMAIN=http://127.0.0.1:5173
diff --git a/apps/webapp/src/components/configuration/components/AddLinkedAccount.tsx b/apps/webapp/src/components/configuration/components/AddLinkedAccount.tsx
@@ -47,16 +47,16 @@ const AddLinkedAccount = () => {
     setShowNewLinkedUserDialog(prevState => ({ ...prevState, open }));
   };
 
-  const {selectedOrganisation} = useOrganisationStore();
-  const {selectedProject} = useProjectStore();
+  const {idOrg} = useOrganisationStore();
+  const {idProject} = useProjectStore();
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault(); // Prevent default form submission
     //console.log("submitting with project "+ selectedProject.id_project);
     mutate({ 
       linked_user_origin_id: linkedUserIdentifier, 
-      alias: selectedOrganisation.id_organisation,
-      id_project: selectedProject.id_project
+      alias: idOrg,
+      id_project: idProject
     });
     setShowNewLinkedUserDialog({open: false})  
   };

diff --git a/apps/webapp/src/components/connections/ConnectionTable.tsx b/apps/webapp/src/components/connections/ConnectionTable.tsx
@@ -15,10 +15,14 @@ import { DataTableLoading } from "../shared/data-table-loading";
 import { useState } from "react";
 import AddConnectionButton from "./components/AddConnectionButton";
 import { Skeleton } from "../ui/skeleton";
+import config from "@/utils/config";
+import useMagicLinkStore from "@/state/magicLinkStore";
 
 export default function ConnectionTable() {
   const { data: connections, isLoading, error } = useConnections();
   const [isGenerated, setIsGenerated] = useState(false);
+
+  const {uniqueLink} = useMagicLinkStore();
 
   if (isLoading) {
     console.log("loading connections..");
@@ -78,7 +82,7 @@ export default function ConnectionTable() {
 
 
         </div>
-        {isGenerated ? <Dialog>
+        {isGenerated ? <Dialog open={true}>
           <DialogTrigger asChild>
             <Button variant="outline" className="">
               <PlusCircledIcon className="mr-2 h-4 w-4" />
@@ -98,7 +102,10 @@ export default function ConnectionTable() {
               </div>
             </div>
             <DialogFooter>
-              <Button type="submit">Generate Link</Button>
+              <Button type="submit" onClick={() => window.open(`${config.FRONT_DOMAIN}/uniqueLink=${uniqueLink}`, '_blank')}>
+                <p className="mr-2">Open Link</p>
+                <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 2C2.44772 2 2 2.44772 2 3V12C2 12.5523 2.44772 13 3 13H12C12.5523 13 13 12.5523 13 12V8.5C13 8.22386 12.7761 8 12.5 8C12.2239 8 12 8.22386 12 8.5V12H3V3L6.5 3C6.77614 3 7 2.77614 7 2.5C7 2.22386 6.77614 2 6.5 2H3ZM12.8536 2.14645C12.9015 2.19439 12.9377 2.24964 12.9621 2.30861C12.9861 2.36669 12.9996 2.4303 13 2.497L13 2.5V2.50049V5.5C13 5.77614 12.7761 6 12.5 6C12.2239 6 12 5.77614 12 5.5V3.70711L6.85355 8.85355C6.65829 9.04882 6.34171 9.04882 6.14645 8.85355C5.95118 8.65829 5.95118 8.34171 6.14645 8.14645L11.2929 3H9.5C9.22386 3 9 2.77614 9 2.5C9 2.22386 9.22386 2 9.5 2H12.4999H12.5C12.5678 2 12.6324 2.01349 12.6914 2.03794C12.7504 2.06234 12.8056 2.09851 12.8536 2.14645Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
+              </Button>
             </DialogFooter>
           </DialogContent>
         </Dialog> :

diff --git a/apps/webapp/src/components/connections/components/AddConnectionButton.tsx b/apps/webapp/src/components/connections/components/AddConnectionButton.tsx
@@ -49,21 +49,25 @@ const AddConnectionButton = ({
     setShowNewLinkedUserDialog(prevState => ({ ...prevState, open }));
   };
 
-  const { mutate } = useMagicLinkMutation();
-
-  const {selectedOrganisation} = useOrganisationStore();
-  const {selectedProject} = useProjectStore();
+  const { mutate, isError, error } = useMagicLinkMutation();
 
+  const {nameOrg} = useOrganisationStore();
+  const {idProject} = useProjectStore();
+
   const handleGenerate = (e: React.FormEvent) => {
     e.preventDefault(); // Prevent default form submission
     mutate({ 
       linked_user_origin_id: linkedUserIdentifier, 
       email: linkedUserMail,
-      alias: selectedOrganisation.id_organisation,
-      id_project: selectedProject.id_project
+      alias: nameOrg,
+      id_project: idProject
     });
-    //setUniqueLink(data);
+    if(isError) {
+      console.log(error);
+    }
+
     setIsGenerated(true);
+
   };
 
 
@@ -166,7 +170,7 @@ const AddConnectionButton = ({
           </Button>
           <Button type="submit">Generate</Button>
         </DialogFooter>
-      </form>
+        </form>
       </DialogContent>
     </Dialog>    
   )

diff --git a/apps/webapp/src/components/connections/components/CopyLinkInput.tsx b/apps/webapp/src/components/connections/components/CopyLinkInput.tsx
@@ -1,14 +1,19 @@
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import useMagicLinkStore from '@/state/magicLinkStore';
+import config from '@/utils/config';
 import { useState } from 'react';
+import { LoadingSpinner } from './LoadingSpinner';
 
 const CopyLinkInput = () => {
-  const [value,] = useState('https://magic-link/edfr-12h3KKHjdd-1.com');
   const [copied, setCopied] = useState(false);
 
+  const {uniqueLink} = useMagicLinkStore();
+
+
   const handleCopy = async () => {
     try {
-      await navigator.clipboard.writeText(value);
+      await navigator.clipboard.writeText(`${config.FRONT_DOMAIN}/uniqueLink=${uniqueLink}`);
       setCopied(true);
       setTimeout(() => setCopied(false), 2000); // Reset copied state after 2 seconds
     } catch (err) {
@@ -18,18 +23,30 @@ const CopyLinkInput = () => {
 
   return (
     <>
-      <Input
-        defaultValue={value}
-        readOnly
-        className="col-span-3"
-      />
-      <Button
-        onClick={handleCopy}
-        variant="outline"
-        className=" text-white rounded-md" // Adjust the styling as needed
-      >
-        {copied ? 'Copied!' : 'Copy'}
-      </Button>
+      {uniqueLink !== 'https://' ? 
+      <>
+        <Input
+          defaultValue={`${config.FRONT_DOMAIN}/uniqueLink=${uniqueLink}`}
+          readOnly
+          className="col-span-3"
+        /> 
+        <Button
+          onClick={handleCopy}
+          variant="outline"
+          className=" text-white rounded-md" // Adjust the styling as needed
+        >
+          {copied ? 'Copied!' : 
+            <>
+              <p className='mr-1'>Copy</p>
+              <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.6788 2.95419C10.0435 2.53694 9.18829 2.54594 8.51194 3.00541C8.35757 3.11027 8.1921 3.27257 7.7651 3.69957L7.14638 4.31829C6.95112 4.51355 6.63454 4.51355 6.43928 4.31829C6.24401 4.12303 6.24401 3.80645 6.43928 3.61119L7.058 2.99247C7.0725 2.97797 7.08679 2.96366 7.1009 2.94955C7.47044 2.57991 7.70691 2.34336 7.95001 2.17822C8.94398 1.50299 10.2377 1.46813 11.2277 2.11832C11.4692 2.27689 11.7002 2.508 12.0515 2.85942C12.0662 2.8741 12.081 2.88898 12.0961 2.90408C12.1112 2.91917 12.1261 2.93405 12.1408 2.94871C12.4922 3.30001 12.7233 3.53102 12.8819 3.77248C13.5321 4.76252 13.4972 6.05623 12.822 7.0502C12.6568 7.2933 12.4203 7.52976 12.0507 7.89929C12.0366 7.9134 12.0222 7.92771 12.0077 7.94221L11.389 8.56093C11.1938 8.7562 10.8772 8.7562 10.6819 8.56093C10.4867 8.36567 10.4867 8.04909 10.6819 7.85383L11.3006 7.23511C11.7276 6.80811 11.8899 6.64264 11.9948 6.48827C12.4543 5.81192 12.4633 4.95675 12.046 4.32141C11.9513 4.17714 11.8009 4.02307 11.389 3.61119C10.9771 3.1993 10.8231 3.04893 10.6788 2.95419ZM4.31796 6.43961C4.51322 6.63487 4.51322 6.95146 4.31796 7.14672L3.69924 7.76544C3.27224 8.19244 3.10993 8.35791 3.00507 8.51227C2.54561 9.18863 2.53661 10.0438 2.95385 10.6791C3.0486 10.8234 3.19896 10.9775 3.61085 11.3894C4.02274 11.8012 4.17681 11.9516 4.32107 12.0464C4.95642 12.4636 5.81158 12.4546 6.48794 11.9951C6.6423 11.8903 6.80777 11.728 7.23477 11.301L7.85349 10.6823C8.04875 10.487 8.36533 10.487 8.5606 10.6823C8.75586 10.8775 8.75586 11.1941 8.5606 11.3894L7.94188 12.0081C7.92738 12.0226 7.91307 12.0369 7.89897 12.051C7.52943 12.4206 7.29296 12.6572 7.04986 12.8223C6.05589 13.4976 4.76219 13.5324 3.77214 12.8822C3.53068 12.7237 3.29967 12.4925 2.94837 12.1411C2.93371 12.1264 2.91883 12.1116 2.90374 12.0965C2.88865 12.0814 2.87377 12.0665 2.8591 12.0518C2.50766 11.7005 2.27656 11.4695 2.11799 11.2281C1.4678 10.238 1.50265 8.94432 2.17788 7.95035C2.34303 7.70724 2.57957 7.47077 2.94922 7.10124C2.96333 7.08713 2.97763 7.07283 2.99213 7.05833L3.61085 6.43961C3.80611 6.24435 4.12269 6.24435 4.31796 6.43961Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
+            </>
+          }
+        </Button>
+      </> :
+        <div className='flex flex-row items-center justify-center'>
+           <LoadingSpinner className='mr-2 h-4 w-4 animate-spin'/>
+        </div>
+      }
     </>
   );
 };

diff --git a/apps/webapp/src/components/connections/components/LoadingSpinner.tsx b/apps/webapp/src/components/connections/components/LoadingSpinner.tsx
@@ -0,0 +1,18 @@
+import { cn } from "@/lib/utils"
+
+export const LoadingSpinner = ({className}: {className:string}) => {
+    return (<svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className={cn("animate-spin", className)}
+      >
+        <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+      </svg>)
+  }
diff --git a/apps/webapp/src/components/shared/data-table-row-actions.tsx b/apps/webapp/src/components/shared/data-table-row-actions.tsx
@@ -26,6 +26,7 @@ export function DataTableRowActions<TData>({
 }: DataTableRowActionsProps<TData>) {
   //const task = taskSchema.parse(row.original)
   console.log(row);
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -41,6 +42,7 @@ export function DataTableRowActions<TData>({
         <DropdownMenuItem>Edit</DropdownMenuItem>
         <DropdownMenuItem>Make a copy</DropdownMenuItem>
         <DropdownMenuItem>Favorite</DropdownMenuItem>
+        <DropdownMenuItem>{row.id}</DropdownMenuItem>
         <DropdownMenuSeparator />
         <DropdownMenuSub>
           <DropdownMenuSubTrigger>Labels</DropdownMenuSubTrigger>

diff --git a/apps/webapp/src/components/shared/team-switcher.tsx b/apps/webapp/src/components/shared/team-switcher.tsx
@@ -70,19 +70,20 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) {
   const { data : orgs, isLoading: isloadingOrganisations } = useOrganisations();
   const { data : projects, isLoading: isloadingProjects } = useProjects();
 
-  const { selectedProject, setSelectedProject } = useProjectStore();
-  const { selectedOrganisation, setSelectedOrganisation } = useOrganisationStore();
+  const { idProject, setIdProject } = useProjectStore();
+  const { idOrg, setIdOrg, setOrganisationName } = useOrganisationStore();
 
   const { profile } = useProfileStore();
 
   useEffect(()=>{
-    if(projects){
-      setSelectedProject(projects[0]);
+    if(projects){      
+      setIdProject(projects[0].id_project);
     }
     if(orgs){
-      setSelectedOrganisation(orgs[0]);
+      setOrganisationName(orgs[0].name);
+      setIdOrg(orgs[0].id_organization);
     }
-  },[projects, orgs, setSelectedProject, setSelectedOrganisation])
+  },[projects, orgs, setIdProject, setIdOrg])
 
   const handleOpenChange = (open: boolean) => {
     setShowNewDialog(prevState => ({ ...prevState, open }));
@@ -121,7 +122,7 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) {
             aria-label="Select a team"
             className={cn("w-[250px] justify-between", className)}
           >
-            {selectedProject ? selectedProject.name : isloadingProjects ? <Skeleton className="w-[100px] h-[20px] rounded-md" /> : "No projects found"}
+            {projects && projects.length > 0 ? projects[0].name : isloadingProjects ? <Skeleton className="w-[100px] h-[20px] rounded-md" /> : "No projects found"}
             <CaretSortIcon className="ml-auto h-4 w-4 shrink-0 opacity-50" />
           </Button>
         </PopoverTrigger>
@@ -136,7 +137,7 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) {
                       <CommandItem
                         key={project.id_project}
                         onSelect={() => {
-                          setSelectedProject(project)
+                          setIdProject(project.id_project)
                           setOpen(false)
                         }}
                         className="text-sm"
@@ -153,7 +154,7 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) {
                         <CheckIcon
                           className={cn(
                             "ml-auto h-4 w-4",
-                            selectedProject && selectedProject.name === project.name
+                            projects && projects.length > 0 && idProject === project.id_project
                               ? "opacity-100"
                               : "opacity-0"
                           )}
@@ -175,7 +176,7 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) {
                     <CommandItem
                       key={orgs[0].id_organization}
                       onSelect={() => {
-                        setSelectedOrganisation(orgs[0])
+                        setIdOrg(orgs[0].id_organization)
                         setOpen(false)
                       }}
                       className="text-sm"
@@ -192,7 +193,7 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) {
                       <CheckIcon
                         className={cn(
                           "ml-auto h-4 w-4",
-                          selectedOrganisation && selectedOrganisation.name === orgs[0].name 
+                          orgs && orgs.length > 0 && idOrg === orgs[0].id_organization 
                             ? "opacity-100"
                             : "opacity-0"
                         )}

diff --git a/apps/webapp/src/hooks/mutations/useMagicLinkMutation.tsx b/apps/webapp/src/hooks/mutations/useMagicLinkMutation.tsx
@@ -1,3 +1,4 @@
+import useMagicLinkStore from '@/state/magicLinkStore';
 import config from '@/utils/config';
 import { useMutation } from '@tanstack/react-query';
 import toast from 'react-hot-toast';
@@ -8,6 +9,7 @@ interface ILinkDto {
     alias: string;
     id_project: string;
 }
+
 const useMagicLinkMutation = () => {
     const generateLink = async (data: ILinkDto) => {
         const response = await fetch(`${config.API_URL}/magic-link/create`, {
@@ -24,6 +26,8 @@ const useMagicLinkMutation = () => {
 
         return response.json();
     };
+    const {setUniqueLink} = useMagicLinkStore();
+
     return useMutation({
         mutationFn: generateLink,
         onMutate: () => {
@@ -32,7 +36,8 @@ const useMagicLinkMutation = () => {
         onError: (error) => {
             toast.error(`Error: ${error.message}`);
         },
-        onSuccess: () => {
+        onSuccess: (data) => {
+            setUniqueLink(data.id_invite_link)
             toast.success('Magic Link Generated successfully!');
         },
         onSettled: () => {

diff --git a/apps/webapp/src/state/magicLinkStore.ts b/apps/webapp/src/state/magicLinkStore.ts
@@ -0,0 +1,13 @@
+import { create } from 'zustand';
+
+interface MagicLinkState {
+  uniqueLink: string;
+  setUniqueLink: (link: string) => void;
+}
+
+const useMagicLinkStore = create<MagicLinkState>()((set) => ({
+    uniqueLink: "https://",
+    setUniqueLink: (link) => set({ uniqueLink: link }),
+}));
+
+export default useMagicLinkStore;
diff --git a/apps/webapp/src/state/organisationStore.ts b/apps/webapp/src/state/organisationStore.ts
@@ -2,13 +2,17 @@
 import { create } from 'zustand';
 
 interface OrganisationState {
-  selectedOrganisation: any;
-  setSelectedOrganisation: (org: any) => void;
+  idOrg: string;
+  setIdOrg: (id: string) => void;
+  nameOrg: string;
+  setOrganisationName: (id: string) => void;
 }
 
 const useOrganisationStore = create<OrganisationState>()((set) => ({
-  selectedOrganisation: null,
-  setSelectedOrganisation: (org) => set({ selectedOrganisation: org }),
-}));
+  idOrg: '000',
+  setIdOrg: (id) => set({ idOrg: id }),
+  nameOrg: 'org',
+  setOrganisationName: (name) => set({ nameOrg: name })
+}))
 
 export default useOrganisationStore;
diff --git a/apps/webapp/src/state/projectStore.ts b/apps/webapp/src/state/projectStore.ts
@@ -2,13 +2,13 @@
 import { create } from 'zustand';
 
 interface ProjectState {
-  selectedProject: any;
-  setSelectedProject: (project: any) => void;
+  idProject: string;
+  setIdProject: (id: string) => void;
 }
 
 const useProjectStore = create<ProjectState>()((set) => ({
-  selectedProject: null,
-  setSelectedProject: (project) => set({ selectedProject: project }),
+  idProject: "123",
+  setIdProject: (id) => set({ idProject: id }),
 }));
 
 export default useProjectStore;
diff --git a/apps/webapp/src/utils/config.ts b/apps/webapp/src/utils/config.ts
@@ -1,5 +1,6 @@
 const config = {
     API_URL: import.meta.env.VITE_BACKEND_DOMAIN,
+    FRONT_DOMAIN: import.meta.env.VITE_FRONTEND_DOMAIN,
 };
 
 export default config;

diff --git a/apps/webapp/vite.config.ts.timestamp-1701855170066-1f4c871540e0d.mjs b/apps/webapp/vite.config.ts.timestamp-1701855170066-1f4c871540e0d.mjs
@@ -0,0 +1,17 @@
+// vite.config.ts
+import { defineConfig } from "file:///Users/nael/Desktop/Panora/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/index.js";
+import react from "file:///Users/nael/Desktop/Panora/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vitejs/plugin-react/dist/index.mjs";
+import path from "path";
+var __vite_injected_original_dirname = "/Users/nael/Desktop/Panora/apps/webapp";
+var vite_config_default = defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__vite_injected_original_dirname, "./src")
+    }
+  }
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvVXNlcnMvbmFlbC9EZXNrdG9wL1Bhbm9yYS9hcHBzL3dlYmFwcFwiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL1VzZXJzL25hZWwvRGVza3RvcC9QYW5vcmEvYXBwcy93ZWJhcHAvdml0ZS5jb25maWcudHNcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfaW1wb3J0X21ldGFfdXJsID0gXCJmaWxlOi8vL1VzZXJzL25hZWwvRGVza3RvcC9QYW5vcmEvYXBwcy93ZWJhcHAvdml0ZS5jb25maWcudHNcIjtpbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tICd2aXRlJ1xuaW1wb3J0IHJlYWN0IGZyb20gJ0B2aXRlanMvcGx1Z2luLXJlYWN0J1xuaW1wb3J0IHBhdGggZnJvbSBcInBhdGhcIlxuXG4vLyBodHRwczovL3ZpdGVqcy5kZXYvY29uZmlnL1xuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnKHtcbiAgcGx1Z2luczogW3JlYWN0KCldLFxuICByZXNvbHZlOiB7XG4gICAgYWxpYXM6IHtcbiAgICAgIFwiQFwiOiBwYXRoLnJlc29sdmUoX19kaXJuYW1lLCBcIi4vc3JjXCIpLFxuICAgIH0sXG4gIH0sXG59KVxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUFvUyxTQUFTLG9CQUFvQjtBQUNqVSxPQUFPLFdBQVc7QUFDbEIsT0FBTyxVQUFVO0FBRmpCLElBQU0sbUNBQW1DO0FBS3pDLElBQU8sc0JBQVEsYUFBYTtBQUFBLEVBQzFCLFNBQVMsQ0FBQyxNQUFNLENBQUM7QUFBQSxFQUNqQixTQUFTO0FBQUEsSUFDUCxPQUFPO0FBQUEsTUFDTCxLQUFLLEtBQUssUUFBUSxrQ0FBVyxPQUFPO0FBQUEsSUFDdEM7QUFBQSxFQUNGO0FBQ0YsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K