diff --git a/src/components/ProfileDeactive/ProfileDeactive.tsx b/src/components/ProfileDeactivate/ProfileDeactivate.tsx similarity index 94% rename from src/components/ProfileDeactive/ProfileDeactive.tsx rename to src/components/ProfileDeactivate/ProfileDeactivate.tsx index 2ee8972b..5ca8a662 100644 --- a/src/components/ProfileDeactive/ProfileDeactive.tsx +++ b/src/components/ProfileDeactivate/ProfileDeactivate.tsx @@ -4,13 +4,13 @@ import Button from "../Button/Button"; import { RiErrorWarningFill } from "react-icons/ri"; import DeactiveAccountModal from "../../modals/DeactiveAccountModal"; -interface IProfileDeactive { +interface IProfileDeactivate { className?: string; } -export default function ProfileDeactive({ +export default function ProfileDeactivate({ className, -}: IProfileDeactive): ReactElement { +}: IProfileDeactivate): ReactElement { const [isShowDeactiveModal, setIsShowDeactiveModal] = useState(false); diff --git a/src/components/ProfileHeader/ProfileHeader.tsx b/src/components/ProfileHeader/ProfileHeader.tsx index 83627668..b469486f 100644 --- a/src/components/ProfileHeader/ProfileHeader.tsx +++ b/src/components/ProfileHeader/ProfileHeader.tsx @@ -2,66 +2,16 @@ import React, { ReactElement } from "react"; import CardLayout from "../../layouts/CardLayout"; import Gravatar from "react-gravatar"; import { useKeycloak } from "@react-keycloak/web"; -// import { useAppDispatch, useAppSelector } from "../../hooks/redux"; -// import { updateUrls } from "../../resources/UserSlice"; +import useProfile from "../../hooks/useProfile"; +import { ProfileActiveTab } from "../../interfaces/profileInterfaces"; -interface IProfileHeader { - className?: string; - activeTab: string; - handleChangeActiveTab: (tab: string) => void; -} - -export default function ProfileHeader({ - className, - activeTab, - handleChangeActiveTab, -}: IProfileHeader): ReactElement { +export default function ProfileHeader(): ReactElement { const { keycloak } = useKeycloak(); - // const { urls } = useAppSelector((state) => state.user); - // const dispatch = useAppDispatch(); - - // const inputs = ( - //
- // - // - // - //
- // ); + const { activeTab, setActiveTab, tabs } = useProfile(); return ( - +
- {/* {inputs} */}
    - {[ - "Overview", - "Profile Info", - "Connected Apps", - "Email Preferances", - "Notifications", - "Change Password", - "Deactive Account", - ].map((tab: any, index: number) => { + {tabs.map((tab: ProfileActiveTab, index: number) => { return (
    handleChangeActiveTab(tab)} + onClick={() => setActiveTab(tab)} key={index} >
  • (null); + +// eslint-disable-next-line +export default ({ children }: any) => { + const [activeTab, setActiveTab] = useState("Overview"); + + const tabs: Itabs = [ + "Overview", + "Profile Info", + "Connected Apps", + "Email Preferences", + "Notifications", + "Change Password", + "Deactivate Account", + ]; + + return ( + + {children} + + ); +}; diff --git a/src/contexts/RobotContext.tsx b/src/contexts/RobotContext.tsx index 574a2901..79233e21 100644 --- a/src/contexts/RobotContext.tsx +++ b/src/contexts/RobotContext.tsx @@ -282,6 +282,16 @@ export default ({ children }: any) => { }, 500); } + function handleForceReloadRobotPage() { + setResponseRobot(undefined); + setResponseBuildManager(undefined); + setResponseLaunchManagers(undefined); + setIsSettedCookie(null); + setRos(null); + setTopicList([]); + setActiveTab("Overview"); + } + return ( { isSettedCookie, setIsSettedCookie, handleForceUpdate, + handleForceReloadRobotPage, }} > {children} diff --git a/src/hooks/useProfile.tsx b/src/hooks/useProfile.tsx new file mode 100644 index 00000000..f375839f --- /dev/null +++ b/src/hooks/useProfile.tsx @@ -0,0 +1,11 @@ +import { useContext } from "react"; +import { IuseProfile } from "../interfaces/profileInterfaces"; +import { ProfileContext } from "../contexts/ProfileContext"; + +const useProfile = () => { + const useProfile: IuseProfile = useContext(ProfileContext); + + return useProfile; +}; + +export default useProfile; diff --git a/src/hooks/useRobot.tsx b/src/hooks/useRobot.tsx index cf97014c..cd4e85e8 100644 --- a/src/hooks/useRobot.tsx +++ b/src/hooks/useRobot.tsx @@ -14,6 +14,7 @@ interface IuseRobot { isSettedCookie: boolean | null; setIsSettedCookie: any; handleForceUpdate: any; + handleForceReloadRobotPage: any; } const useRobot = () => { diff --git a/src/interfaces/organizationInterfaces.ts b/src/interfaces/organizationInterfaces.ts index 9429082c..04936e4a 100644 --- a/src/interfaces/organizationInterfaces.ts +++ b/src/interfaces/organizationInterfaces.ts @@ -6,3 +6,22 @@ export interface IOrganization { teamCount: number; userCount: number; } + +export interface IcreateOrganizationRequest { + name: string; +} + +export interface IgetOrganizationUsersRequest { + name: string; + organizationId: string; +} + +export interface IgetOrganizationAdminsRequest { + name: string; + organizationId: string; +} + +export interface IgetOrganizationGuestsRequest { + name: string; + organizationId: string; +} diff --git a/src/interfaces/profileInterfaces.ts b/src/interfaces/profileInterfaces.ts new file mode 100644 index 00000000..0e338257 --- /dev/null +++ b/src/interfaces/profileInterfaces.ts @@ -0,0 +1,24 @@ +export interface IuseProfile { + activeTab: ProfileActiveTab; + setActiveTab: React.Dispatch>; + tabs: Itabs; +} + +export type Itabs = [ + "Overview", + "Profile Info", + "Connected Apps", + "Email Preferences", + "Notifications", + "Change Password", + "Deactivate Account" +]; + +export type ProfileActiveTab = + | "Overview" + | "Profile Info" + | "Connected Apps" + | "Email Preferences" + | "Notifications" + | "Change Password" + | "Deactivate Account"; diff --git a/src/layouts/ProfileSubPageLayout.tsx b/src/layouts/ProfileSubPageLayout.tsx new file mode 100644 index 00000000..580c43df --- /dev/null +++ b/src/layouts/ProfileSubPageLayout.tsx @@ -0,0 +1,36 @@ +import { Fragment, ReactElement } from "react"; +import ProfileOverview from "../components/ProfileOverview/ProfileOverview"; +import ProfileInfo from "../components/ProfileInfo/ProfileInfo"; +import ProfileConnectedApps from "../components/ProfileConnectedApps/ProfileConnectedApps"; +import ProfileEmailPreferances from "../components/ProfileEmailPreferances/ProfileEmailPreferances"; +import ProfileNotifications from "../components/ProfileNotifications/ProfileNotifications"; +import ProfileChangePassword from "../components/ProfileChangePassword/ProfileChangePassword"; +import ProfileDeactivate from "../components/ProfileDeactivate/ProfileDeactivate"; +import useProfile from "../hooks/useProfile"; + +export default function ProfileSubPageLayout(): ReactElement { + const { activeTab } = useProfile(); + + return ( + + {(() => { + switch (activeTab) { + case "Overview": + return ; + case "Profile Info": + return ; + case "Connected Apps": + return ; + case "Email Preferences": + return ; + case "Notifications": + return ; + case "Change Password": + return ; + case "Deactivate Account": + return ; + } + })()} + + ); +} diff --git a/src/pages/Profile/ProfilePage.tsx b/src/pages/Profile/ProfilePage.tsx index e19c434c..1ba006b7 100644 --- a/src/pages/Profile/ProfilePage.tsx +++ b/src/pages/Profile/ProfilePage.tsx @@ -1,41 +1,12 @@ -import React, { ReactElement, useState } from "react"; +import React, { ReactElement } from "react"; import ProfileHeader from "../../components/ProfileHeader/ProfileHeader"; -import ProfileConnectedApps from "../../components/ProfileConnectedApps/ProfileConnectedApps"; -import ProfileInfo from "../../components/ProfileInfo/ProfileInfo"; -import ProfileEmailPreferances from "../../components/ProfileEmailPreferances/ProfileEmailPreferances"; -import ProfileDeactive from "../../components/ProfileDeactive/ProfileDeactive"; -import ProfileNotifications from "../../components/ProfileNotifications/ProfileNotifications"; -import ProfileChangePassword from "../../components/ProfileChangePassword/ProfileChangePassword"; -import ProfileOverview from "../../components/ProfileOverview/ProfileOverview"; +import ProfileSubPageLayout from "../../layouts/ProfileSubPageLayout"; export default function Profile(): ReactElement { - const [activeTab, setActiveTab] = useState("Overview"); - return (
    - - {(() => { - switch (activeTab) { - case "Overview": - return ; - case "Profile Info": - return ; - case "Connected Apps": - return ; - case "Email Preferances": - return ; - case "Notifications": - return ; - case "Change Password": - return ; - case "Deactive Account": - return ; - } - })()} + +
    ); } diff --git a/src/routes/AppRoutes.tsx b/src/routes/AppRoutes.tsx index 8fa3ccba..3f76b41d 100644 --- a/src/routes/AppRoutes.tsx +++ b/src/routes/AppRoutes.tsx @@ -14,6 +14,7 @@ import PrivateProvider from "../providers/PrivateProvider"; import RobotPage from "../pages/RobotPage/RobotPage"; import Page404 from "../pages/Page404/Page404"; import RobotContext from "../contexts/RobotContext"; +import ProfileContext from "../contexts/ProfileContext"; // import BillingPage from "../pages/BillingPage/BillingPage"; export default function AppRoutes(): ReactElement { @@ -30,7 +31,14 @@ export default function AppRoutes(): ReactElement { path={`/marketplace/:productName`} element={} /> - } /> + + + + } + /> {/* Dashboard Pages */} } /> diff --git a/src/toolkit/OrganizationSlice.ts b/src/toolkit/OrganizationSlice.ts index 33978d77..50fcef64 100644 --- a/src/toolkit/OrganizationSlice.ts +++ b/src/toolkit/OrganizationSlice.ts @@ -1,10 +1,16 @@ import { createAsyncThunk, createSlice } from "@reduxjs/toolkit"; import { organizationApi } from "../api/api"; import { toast } from "sonner"; +import { + IcreateOrganizationRequest, + IgetOrganizationAdminsRequest, + IgetOrganizationGuestsRequest, + IgetOrganizationUsersRequest, +} from "../interfaces/organizationInterfaces"; export const createOrganization = createAsyncThunk( "organizations/createOrganization", - async (values: { name: string }) => { + async (values: IcreateOrganizationRequest) => { const response = await organizationApi.createOrganization({ name: values.name, }); @@ -22,7 +28,7 @@ export const getOrganizations = createAsyncThunk( export const getOrganizationUsers = createAsyncThunk( "organizations/getOrganizationUsers", - async (values: any) => { + async (values: IgetOrganizationUsersRequest) => { const response = await organizationApi.getOrganizationUsers({ name: values.name, organizationId: values.organizationId, @@ -33,7 +39,7 @@ export const getOrganizationUsers = createAsyncThunk( export const getOrganizationAdmins = createAsyncThunk( "organizations/getOrganizationAdmins", - async (values: any) => { + async (values: IgetOrganizationAdminsRequest) => { const response = await organizationApi.getOrganizationAdmins({ name: values.name, organizationId: values.organizationId, @@ -44,7 +50,7 @@ export const getOrganizationAdmins = createAsyncThunk( export const getOrganizationGuests = createAsyncThunk( "organizations/getOrganizationGuests", - async (values: any) => { + async (values: IgetOrganizationGuestsRequest) => { const response = await organizationApi.getOrganizationGuests({ name: values.name, organizationId: values.organizationId,