feat: integrating profile and update APIs

src/app/admin/organizations/[id]/page.tsx

@@ -4,18 +4,27 @@ import Image from "next/image"
 import axios from "axios";
 import { useSession } from "next-auth/react";
 import { useQuery } from "@tanstack/react-query";
-import { adminProfile } from "#/types";
+import { Company, CompanyById, Owner } from "#/types";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
 
 export default function Profile() {
+
+  const pathname = usePathname();
+
+  const segments = pathname.split("/");
+  const uid = segments[segments.length - 1];
+
   const { data: session, status } = useSession();
 
-  const { data: adminProfile, isLoading } = useQuery({
+  const { data: companyInfos, isLoading } = useQuery({
     enabled: status === 'authenticated',
     queryKey: ["stats", session?.user.access_token],
     queryFn: async () => {
       try {
         const response = await axios.get(
-          'https://private-docs-api.intside.co/users/me', {
+          `https://private-docs-api.intside.co/companies/${uid}`, {
           headers: {
             'Authorization': `Bearer ${session?.user.access_token}`
           }
@@ -23,21 +32,23 @@ export default function Profile() {
         )
 
         if (response.data) {
-          return response.data as adminProfile
+          return response.data as CompanyById
         }
       } catch (error: any) {
         console.error(error)
       }
     }
   })
+  const adminId = companyInfos?.owner
   
-  const { data: adminOrganization } = useQuery({
+
+  const { data: adminInfos } = useQuery({
     enabled: status === 'authenticated',
     queryKey: ["stats", session?.user.access_token],
     queryFn: async () => {
       try {
         const response = await axios.get(
-          'https://private-docs-api.intside.co/users/me', {
+          `https://private-docs-api.intside.co/users/${companyInfos}`, {
           headers: {
             'Authorization': `Bearer ${session?.user.access_token}`
           }
@@ -45,24 +56,24 @@ export default function Profile() {
         )
 
         if (response.data) {
-          return response.data as adminProfile
+          return response.data.data as Owner
         }
       } catch (error: any) {
         console.error(error)
       }
     }
   })
+  console.log(`https://private-docs-api.intside.co/users/${companyInfos}`);
   
 
   return (
     <>
-    {/* { adminProfile.map() } */}
+      {/* {companyInfos[0]?.id} */}
-    
       <div className="p-container ">
         <div className="r-flex-column">
           <div className="r-flex-between items-center bg-bluegray p-[24px] m-0 ">
             <div className=""></div>
-            <h2 className="admin-name text-[20px]" >Pentatonic</h2>
+            <h2 className="admin-name text-[20px]" >{companyInfos?.name ||  "Pentatonic"}</h2>
             <button type="button" className="update-profile-name cta">
               Modifier
             </button>
@@ -76,7 +87,7 @@ export default function Profile() {
                 </div>
                 <div className="r-flex-column p-[14px] r-gap-2">
                   <h4 className="email-label font-semibold">Adresse e-mail</h4>
-                  <p className="email">{adminProfile?.email}</p>
+                  <p className="email">{adminInfos?.email || "email"}</p>
                 </div>
               </div>
               <div className="r-flex-between items-center rr-gap-12 w-max">
@@ -86,11 +97,11 @@ export default function Profile() {
                 <div className="r-flex gap-[60px]">
                   <div className="r-flex-column p-[14px] r-gap-2">
                     <h4 className="surname-label font-semibold">Prénom</h4>
-                    <p className="surname">{adminProfile?.first_name}</p>
+                    <p className="surname">{adminInfos?.first_name || "nom"}</p>
                   </div>
                   <div className="r-flex-column p-[14px] r-gap-2">
                     <h4 className="name-label font-semibold">Nom</h4>
-                    <p className="name">{adminProfile?.last_name}</p>
+                    <p className="name">{adminInfos?.last_name || "nom"}</p>
                   </div>
                 </div>
               </div>

src/app/admin/organizations/[id]/update/page.tsx

@@ -0,0 +1,99 @@
+"use client"
+import { icons } from "#/assets/icons"
+import Image from "next/image"
+import axios from "axios";
+import { useSession } from "next-auth/react";
+import { useQuery } from "@tanstack/react-query";
+import { Company } from "#/types";
+import FloatingLabelInput from "#/components/floatingLabelInput";
+
+export default function Update() {
+
+
+  
+  const { data: session, status } = useSession();
+
+  const { data: company, isLoading } = useQuery({
+    enabled: status === 'authenticated',
+    queryKey: ["stats", session?.user.access_token],
+    queryFn: async () => {
+      try {
+        const response = await axios.get(
+          'https://private-docs-api.intside.co/companies', {
+          headers: {
+            'Authorization': `Bearer ${session?.user.access_token}`
+          }
+        }
+        )
+
+        if (response.data) {
+          return response.data.data as Company
+        }
+      } catch (error: any) {
+        console.error(error)
+      }
+    }
+  })
+
+  const { data: adminOrganization } = useQuery({
+    enabled: status === 'authenticated',
+    queryKey: ["stats", session?.user.access_token],
+    queryFn: async () => {
+      try {
+        const response = await axios.get(
+          'https://private-docs-api.intside.co/users/me', {
+          headers: {
+            'Authorization': `Bearer ${session?.user.access_token}`
+          }
+        }
+        )
+
+        if (response.data) {
+          return response.data as Company
+        }
+      } catch (error: any) {
+        console.error(error)
+      }
+    }
+  })
+
+
+  return (
+    <>
+      {/* { company.map() } */}
+
+      <div className="p-container ">
+        <div className="r-flex-column">
+          <div className="r-flex-between items-center bg-bluegray p-[24px] m-0 ">
+            <div className=""></div>
+            <h2 className="admin-name text-[20px]" >Pentatonic</h2>
+            <button type="button" className="update-profile-name cta cancel">
+              Annuler
+            </button>
+          </div>
+          <div className="r-flex-column p-[32px] r-gap-24">
+            <div className="labels-container ">
+              <div className="label-container">
+                <FloatingLabelInput label="Nom de l’organisation" name="org-name" type="text" placeholder="Intside" defaultValue="" />
+              </div>
+              <div className="label-container">
+                <FloatingLabelInput label="Adresse e-mail de l’admin" name="email" type="text" placeholder="contact@intside.com" defaultValue={company?.owner.email} />
+              </div>
+              <div className="label-container">
+                <FloatingLabelInput label="Nom de l’admin" name="admin-name" type="text" placeholder="Company" defaultValue={company?.owner.last_name} />
+              </div>
+              <div className="label-container">
+                <FloatingLabelInput label="Prénom de l’admin" name="admin-surname" type="text" placeholder="Intside" defaultValue={company?.owner.last_name} />
+              </div>
+            </div>
+            <div className="ctas flex gap-12 ">
+              <button type="button" className="cta">Modifier</button>
+              <button type="button" className="cta info">Mot de passe</button>
+              <button type="button" className="cta danger">Bloquer</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/app/admin/organizations/page.tsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 export default function Organizations (){
   return (
     <>
-      <Link href="/admin/organizations/profile">Organization Profile</Link>
+      <Link href="/admin/organizations/971ff270-6253-4424-b100-21b9ebf0ec7f">Organization Profile</Link>
     </>
   )
 }

src/app/globals.css

@@ -83,7 +83,25 @@ body {
   background-color: var(--primary);
   font-size: 14px;
   font-weight: 600;
+  border: 1px solid var(--primary);
   border-radius: 100px;
+  cursor: pointer;
+}
+
+.cta.cancel{
+  color: var(--secondary);
+  border: 1px solid var(--gray);
+  background-color: var(--gray);
+}
+
+.cta.info{
+  color: var(--primary);
+  background-color: var(--background);
+}
+
+.cta.danger{
+  border: 1px solid var(--danger);
+  background-color: var(--danger);
 }
 
 

src/assets/css/admin.css

@@ -1,3 +1,5 @@
+/* Sidebar */
+
 .sidebar{
   border-right: 1px solid var(--cinder);
   position: fixed;
@@ -28,6 +30,7 @@
   margin-bottom: -11px;
 }
 
+/* Border */
 .icon-border{
   border: 1px solid var(--cinder);
   padding: 8px;
@@ -51,9 +54,12 @@
   gap: 10px;
 }
 
+/* Main */
+
 .p-container {
   height: 100vh;
   border: 1px solid var(--gray);
+  overflow: hidden;
 }
 
 .icon-rounded{
@@ -66,3 +72,15 @@
   background-color: var(--bluegray);
   border-radius: 100px;
 }
+.labels-container{
+  min-width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+}
+.labels-container .label-container{
+  width: 40%;
+}
+.labels-container .floating-label div.relative{
+  width: 100%;
+}

src/components/floatingLabelInput.tsx

@@ -79,7 +79,7 @@ export default function FloatingLabelInput({
             <input
               type={type}
               placeholder={placeholder}
-              className="input-form focus:ring-2 focus:ring-blue-500"
+              className="floating-label input-form focus:ring-2 focus:ring-blue-500"
               required
               name={name}
               defaultValue={defaultValue}

src/types/index.ts

@@ -51,10 +51,11 @@ export interface Owner {
     last_name: string
 }
 
-export interface adminProfile {
+export interface CompanyById {
   id: string
-  email: string
+  name: string
-  first_name: string
+  is_premium: boolean
-  last_name: string
+  status: string
-  profile: string
+  owner: string
+  description: string
 }