l-min-components 1.0.170 → 1.0.176

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.170",
+  "version": "1.0.176",
   "type": "module",
   "files": [
     "src/assets",

package/src/components/header/account-dropdown.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { CloseIcon } from "./assets/svg/close";
 import { AddIcon } from "./assets/svg/add";
 import {
@@ -7,6 +7,7 @@ import {
   AccountDropdownBody,
   AccountDropdownFooter,
 } from "./index.styled";
+import { useLocation, useNavigate } from "react-router-dom";
 /**
  * @param {{
  *  type: string,
@@ -17,59 +18,222 @@ import {
  *
  */
 const AccountDropdown = (props) => {
+  const [personalAccountData, setPersonalAccountData] = useState([]);
+  const [developerAccountData, setDeveloperAccountData] = useState([]);
+  const [instructorAccountData, setInstructorAccountData] = useState([]);
+  const [enterpriseAccountData, setEnterpriseAccountData] = useState([]);
+  const [selectedAccount, setSelectedAccount] = useState();
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+  useEffect(() => {
+    if (pathname?.includes("personal")) {
+      setSelectedAccount(personalAccountData[0]);
+    }
+    if (pathname?.includes("developer")) {
+      setSelectedAccount(developerAccountData[0]);
+    }
+    if (pathname?.includes("instructor")) {
+      setSelectedAccount(instructorAccountData[0]);
+    }
+    if (pathname?.includes("enterprise")) {
+      setSelectedAccount(enterpriseAccountData[0]);
+    }
+  }, [pathname]);
+  useEffect(() => {
+    if (props?.data?.data) {
+      let personalArray = [];
+      let developerArray = [];
+      let instructorArray = [];
+      let enterpriseArray = [];
+      props?.data?.data?.results?.map((accountItem, idx) => {
+        if (
+          accountItem?.type === "PERSONAL" &&
+          !personalAccountData?.includes(accountItem)
+        ) {
+          personalArray.push(accountItem);
+          setPersonalAccountData(personalArray);
+        }
+        if (
+          accountItem?.type === "DEVELOPER" &&
+          !developerAccountData?.includes(accountItem)
+        ) {
+          developerArray.push(accountItem);
+          setDeveloperAccountData(developerArray);
+        }
+        if (
+          accountItem?.type === "INSTRUCTOR" &&
+          !instructorAccountData?.includes(accountItem)
+        ) {
+          instructorArray.push(accountItem);
+          setInstructorAccountData(instructorArray);
+        }
+        if (
+          accountItem?.type === "ENTERPRISE" &&
+          !enterpriseAccountData?.includes(accountItem)
+        ) {
+          enterpriseArray.push(accountItem);
+          setEnterpriseAccountData(enterpriseArray);
+        }
+      });
+    }
+  }, [props?.data?.data]);
+  useEffect(() => {
+    if (selectedAccount) {
+      window.localStorage.setItem("current-account", selectedAccount);
+    }
+  }, [selectedAccount]);
   return (
     <>
       <AccountDropdownLayout>
         <AccountDropdownHeader>
           <div>
-            <img src={props.avatar} alt="account photo" />
+            <img
+              src={selectedAccount?.profile_photo || props?.avatar}
+              alt="account photo"
+            />
           </div>
           <div>
-            <h1> {props.activeAccountName}</h1>
-            <h2>{props.activeAccountType} </h2>
+            <h1>
+              {" "}
+              {selectedAccount?.display_name ||
+                selectedAccount?.metadata?.organization_name ||
+                props.activeAccountName}
+            </h1>
+            <h2 style={{ textTransform: "capitalize" }}>
+              {selectedAccount?.type || props.activeAccountType}{" "}
+            </h2>
           </div>
           <CloseIcon onClick={(e) => props.setIsOpen(!props.isOpen)} />
         </AccountDropdownHeader>
         <AccountDropdownBody>
           {/* {props.apiAccountType === `${props.accountType}` && ( */}
-          <div>
-            <h3>{props.accountType} </h3>
-            <div className="account-info">
-              <div className="avatar-container">
-                <img src={props.avatar} alt="account photo" />
-              </div>
-              <div className="account-details">
-                <h1> {props.accountName}</h1>
-                <span>{props.notificationCount} </span>
-              </div>
-            </div>
-          </div>
 
-          <div>
-            <h3>{props.accountType} </h3>
-            <div className="account-info">
-              <div className="avatar-container">
-                <img src={props.avatar} alt="account photo" />
-              </div>
-              <div className="account-details">
-                <h1> {props.accountName}</h1>
-                <span>{props.notificationCount} </span>
-              </div>
+          {personalAccountData?.length > 0 && (
+            <div>
+              <h3>Personal account</h3>
+              {personalAccountData?.map((personalItem, idx) => (
+                <div
+                  className="account-info"
+                  onClick={() => {
+                    setSelectedAccount(personalItem);
+                    if (window.location.port) {
+                      window.location.href = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/personal`;
+                    } else {
+                      window.location.href = `${window.location.protocol}//${window.location.hostname}/personal`;
+                    }
+                  }}
+                  key={idx}
+                >
+                  <div className="avatar-container">
+                    <img
+                      src={personalItem?.profile_photo || props?.avatar}
+                      alt="account photo"
+                    />
+                  </div>
+                  <div className="account-details">
+                    <h1> {personalItem?.display_name || props.accountName}</h1>
+                    <span>{props.notificationCount} </span>
+                  </div>
+                </div>
+              ))}
             </div>
-          </div>
-
-          <div>
-            <h3>{props.accountType} </h3>
-            <div className="account-info">
-              <div className="avatar-container">
-                <img src={props.avatar} alt="account photo" />
-              </div>
-              <div className="account-details">
-                <h1> {props.accountName}</h1>
-                <span>{props.notificationCount} </span>
-              </div>
+          )}
+          {developerAccountData.length > 0 && (
+            <div>
+              <h3>Developer account</h3>
+              {developerAccountData?.map((developerItem, idx) => (
+                <div
+                  className="account-info"
+                  onClick={() => {
+                    setSelectedAccount(developerItem);
+                    if (window.location.port) {
+                      window.location.href = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/developer`;
+                    } else {
+                      window.location.href = `${window.location.protocol}//${window.location.hostname}/developer`;
+                    }
+                  }}
+                  key={idx}
+                >
+                  <div className="avatar-container">
+                    <img
+                      src={developerItem?.profile_photo || props.avatar}
+                      alt="account photo"
+                    />
+                  </div>
+                  <div className="account-details">
+                    <h1> {developerItem?.display_name || props.accountName}</h1>
+                    <span>{props.notificationCount} </span>
+                  </div>
+                </div>
+              ))}
             </div>
-          </div>
+          )}
+          {instructorAccountData?.length > 0 && (
+            <div>
+              <h3>Instructor account</h3>
+              {instructorAccountData?.map((instructorItem, idx) => (
+                <div
+                  className="account-info"
+                  onClick={() => {
+                    setSelectedAccount(instructorItem);
+                    if (window.location.port) {
+                      window.location.href = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/instructor`;
+                    } else {
+                      window.location.href = `${window.location.protocol}//${window.location.hostname}/instructor`;
+                    }
+                  }}
+                  key={idx}
+                >
+                  <div className="avatar-container">
+                    <img
+                      src={instructorItem?.profile_photo || props.avatar}
+                      alt="account photo"
+                    />
+                  </div>
+                  <div className="account-details">
+                    <h1>
+                      {" "}
+                      {instructorItem?.display_name || props.accountName}
+                    </h1>
+                    <span>{props.notificationCount} </span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+          {enterpriseAccountData?.length > 0 && (
+            <div>
+              <h3>Enterprise account</h3>
+              {enterpriseAccountData?.map((enterpriseItem, idx) => (
+                <div
+                  className="account-info"
+                  onClick={() => {
+                    setSelectedAccount(enterpriseItem);
+                    if (window.location.port) {
+                      window.location.href = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/enterprise`;
+                    } else {
+                      window.location.href = `${window.location.protocol}//${window.location.hostname}/enterprise`;
+                    }
+                  }}
+                  key={idx}
+                >
+                  <div className="avatar-container">
+                    <img
+                      src={enterpriseItem?.profile_photo || props.avatar}
+                      alt="account photo"
+                    />
+                  </div>
+                  <div className="account-details">
+                    <h1>
+                      {" "}
+                      {enterpriseItem?.display_name || props.accountName}
+                    </h1>
+                    <span>{props.notificationCount} </span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
           {/* // )} */}
         </AccountDropdownBody>
 

package/src/components/header/getHeaderDetails.js

@@ -0,0 +1,31 @@
+import useAxios from "axios-hooks";
+
+const useHeader = () => {
+  // get user details
+  const [{ ...userDetails }, getUserDetails] = useAxios();
+
+  const handleGetUserDetails = async () => {
+    await getUserDetails({
+      method: "get",
+      url: "/iam/v1/users/me/",
+    });
+  };
+
+  // get user accounts detail
+
+  const [{ ...userAccountsDetail }, getUserAccountsDetail] = useAxios();
+
+  const handleGetUserAccountsDetail = async () => {
+    await getUserAccountsDetail({
+      method: "get",
+      url: "/iam/v1/accounts/",
+    });
+  };
+  return {
+    handleGetUserDetails,
+    userDetails,
+    handleGetUserAccountsDetail,
+    userAccountsDetail,
+  };
+};
+export default useHeader;

package/src/components/header/index.jsx

@@ -19,6 +19,7 @@ import {
   UserProfile,
   CountryFlagGroup,
 } from "./index.styled";
+import useHeader from "./getHeaderDetails";
 
 /**
  * @param {{
@@ -33,11 +34,17 @@ const HeaderComponent = (props) => {
   const [selected, setSelected] = useState("ES");
   const [isOpen, setIsOpen] = useState(false);
   const [searchResultOpen, setSearchResultOpen] = useState(false);
-
-  console.log(selected);
+  const {
+    handleGetUserAccountsDetail,
+    handleGetUserDetails,
+    userAccountsDetail,
+    userDetails,
+  } = useHeader();
 
   useEffect(() => {
     setIsOpen(false);
+    handleGetUserAccountsDetail();
+    // handleGetUserDetails();
   }, []);
 
   return (
@@ -118,13 +125,14 @@ const HeaderComponent = (props) => {
       {isOpen && (
         <AccountDropdown
           avatar={avatar}
-          activeAccountName={"Michael Ohaga"}
+          activeAccountName={"Default name"}
           activeAccountType={"Personal Account"}
-          accountName={"Jo Gulgowski"}
-          accountType={"Instructor Account"}
+          accountName={"Default name"}
+          accountType={"Default Account"}
           notificationCount={"5"}
           isOpen={isOpen}
           setIsOpen={setIsOpen}
+          data={userAccountsDetail}
         />
       )}
     </Navbar>

package/src/components/header/index.styled.js

@@ -370,6 +370,7 @@ export const Navbar2 = styled.nav`
   width: 100%;
   align-items: center;
   position: fixed;
+  z-index: 99;
 `;
 
 export const Nav2 = styled.ul`

package/src/components/sideBar/userCard/index.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import PropTypes from "prop-types";
 import {
   UserCardContainer,
@@ -7,15 +7,31 @@ import {
   Handle,
   UserDetail,
 } from "./styles";
+import useHeader from "../../header/getHeaderDetails";
+import Loader from "../../loader";
 
 const UserCard = ({ user, isOpen }) => {
+  const { handleGetUserDetails, userDetails } = useHeader();
+  useEffect(() => {
+    handleGetUserDetails();
+  }, []);
   return (
     <UserCardContainer isOpen={isOpen}>
-      <Avatar src={user.avatar} isOpen={isOpen} />
-      <UserDetail isOpen={isOpen}>
-        <UserName>{user.name}</UserName>
-        <Handle>{user.handle}</Handle>
-      </UserDetail>
+      {userDetails?.loading ? (
+        <Loader />
+      ) : (
+        <>
+          <Avatar src={user.avatar} isOpen={isOpen} />
+          <UserDetail isOpen={isOpen}>
+            <UserName>
+              {userDetails?.data?.first_name +
+                " " +
+                userDetails?.data?.last_name}
+            </UserName>
+            <Handle>{`@ ${userDetails?.data?.username}`}</Handle>
+          </UserDetail>
+        </>
+      )}
     </UserCardContainer>
   );
 };