refactor(profile): 🎉 update profile sub-pages and interfaces

robolaunch · Aug 21, 2023 · 47d5950 · 47d5950
1 parent 3b11a24
commit 47d5950
Show file tree

Hide file tree

Showing 13 changed files with 167 additions and 108 deletions.
diff --git a/...nents/ProfileDeactive/ProfileDeactive.tsx → ...s/ProfileDeactivate/ProfileDeactivate.tsx b/...nents/ProfileDeactive/ProfileDeactive.tsx → ...s/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<boolean>(false);
 

diff --git 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 = (
-  //   <div className="flex flex-col gap-5">
-  //     <label className="flex gap-2" htmlFor="">
-  //       vdi (ws://localhost:8080/) (son ek "/" olmalı)
-  //       <input
-  //         className="border border-layer-light-200"
-  //         type="text"
-  //         value={urls?.vdi}
-  //         onChange={(e) => {
-  //           dispatch(updateUrls({ ...urls, vdi: e.target.value }));
-  //         }}
-  //       />
-  //     </label>
-  //     <label className="flex gap-2" htmlFor="">
-  //       ide (http://localhost:3000/) (son ek "/" olmalı)
-  //       <input
-  //         className="border border-layer-light-200"
-  //         type="text"
-  //         value={urls?.ide}
-  //         onChange={(e) => {
-  //           dispatch(updateUrls({ ...urls, ide: e.target.value }));
-  //         }}
-  //       />
-  //     </label>
-  //     <label className="flex gap-2" htmlFor="">
-  //       ros (ws://localhost:9090) (boş bırakılmamalı. bırakılacaksa örnekteki
-  //       yazılmalı)
-  //       <input
-  //         className="border border-layer-light-200"
-  //         type="text"
-  //         value={urls?.ros}
-  //         onChange={(e) => {
-  //           dispatch(updateUrls({ ...urls, ros: e.target.value }));
-  //         }}
-  //       />
-  //     </label>
-  //   </div>
-  // );
+  const { activeTab, setActiveTab, tabs } = useProfile();
 
   return (
-    <CardLayout className={`col-span-1 flex flex-col gap-6 ${className}`}>
+    <CardLayout className={`flex flex-col gap-6 col-span-2`}>
       <div className="flex gap-6 pt-6 px-8">
         <Gravatar
           email={keycloak?.tokenParsed?.email}
@@ -80,22 +30,13 @@ export default function ProfileHeader({
             {keycloak?.tokenParsed?.email}
           </p>
         </div>
-        {/* {inputs} */}
       </div>
       <ul className="flex gap-8 px-6 pt-5 -mb-1.5 overflow-x-auto">
-        {[
-          "Overview",
-          "Profile Info",
-          "Connected Apps",
-          "Email Preferances",
-          "Notifications",
-          "Change Password",
-          "Deactive Account",
-        ].map((tab: any, index: number) => {
+        {tabs.map((tab: ProfileActiveTab, index: number) => {
           return (
             <div
               className="flex flex-col gap-3 cursor-pointer "
-              onClick={() => handleChangeActiveTab(tab)}
+              onClick={() => setActiveTab(tab)}
               key={index}
             >
               <li

diff --git a/src/components/ProfileOverview/ProfileOverview.tsx b/src/components/ProfileOverview/ProfileOverview.tsx
@@ -4,7 +4,7 @@ import ProfileChangePassword from "../ProfileChangePassword/ProfileChangePasswor
 import ProfileEmailPreferances from "../ProfileEmailPreferances/ProfileEmailPreferances";
 import ProfileConnectedApps from "../ProfileConnectedApps/ProfileConnectedApps";
 import ProfileNotifications from "../ProfileNotifications/ProfileNotifications";
-import ProfileDeactive from "../ProfileDeactive/ProfileDeactive";
+import ProfileDeactive from "../ProfileDeactivate/ProfileDeactivate";
 
 export default function ProfileOverview(): ReactElement {
   return (

diff --git a/src/contexts/ProfileContext.tsx b/src/contexts/ProfileContext.tsx
@@ -0,0 +1,31 @@
+import React, { createContext, useState } from "react";
+import { Itabs, ProfileActiveTab } from "../interfaces/profileInterfaces";
+
+export const ProfileContext: any = createContext<any>(null);
+
+// eslint-disable-next-line
+export default ({ children }: any) => {
+  const [activeTab, setActiveTab] = useState<ProfileActiveTab>("Overview");
+
+  const tabs: Itabs = [
+    "Overview",
+    "Profile Info",
+    "Connected Apps",
+    "Email Preferences",
+    "Notifications",
+    "Change Password",
+    "Deactivate Account",
+  ];
+
+  return (
+    <ProfileContext.Provider
+      value={{
+        tabs,
+        activeTab,
+        setActiveTab,
+      }}
+    >
+      {children}
+    </ProfileContext.Provider>
+  );
+};
diff --git 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 (
     <RobotContext.Provider
       value={{
@@ -297,6 +307,7 @@ export default ({ children }: any) => {
         isSettedCookie,
         setIsSettedCookie,
         handleForceUpdate,
+        handleForceReloadRobotPage,
       }}
     >
       {children}

diff --git a/src/hooks/useProfile.tsx 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
@@ -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
@@ -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
@@ -0,0 +1,24 @@
+export interface IuseProfile {
+  activeTab: ProfileActiveTab;
+  setActiveTab: React.Dispatch<React.SetStateAction<ProfileActiveTab>>;
+  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
@@ -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 (
+    <Fragment>
+      {(() => {
+        switch (activeTab) {
+          case "Overview":
+            return <ProfileOverview />;
+          case "Profile Info":
+            return <ProfileInfo className="col-span-2" />;
+          case "Connected Apps":
+            return <ProfileConnectedApps className="col-span-2" />;
+          case "Email Preferences":
+            return <ProfileEmailPreferances className="col-span-2" />;
+          case "Notifications":
+            return <ProfileNotifications className="col-span-2" />;
+          case "Change Password":
+            return <ProfileChangePassword className="col-span-2" />;
+          case "Deactivate Account":
+            return <ProfileDeactivate className="col-span-2" />;
+        }
+      })()}
+    </Fragment>
+  );
+}
diff --git 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 (
     <div className="grid grid-cols-2 gap-6">
-      <ProfileHeader
-        className="col-span-2"
-        activeTab={activeTab}
-        handleChangeActiveTab={setActiveTab}
-      />
-      {(() => {
-        switch (activeTab) {
-          case "Overview":
-            return <ProfileOverview />;
-          case "Profile Info":
-            return <ProfileInfo className="col-span-2" />;
-          case "Connected Apps":
-            return <ProfileConnectedApps className="col-span-2" />;
-          case "Email Preferances":
-            return <ProfileEmailPreferances className="col-span-2" />;
-          case "Notifications":
-            return <ProfileNotifications className="col-span-2" />;
-          case "Change Password":
-            return <ProfileChangePassword className="col-span-2" />;
-          case "Deactive Account":
-            return <ProfileDeactive className="col-span-2" />;
-        }
-      })()}
+      <ProfileHeader />
+      <ProfileSubPageLayout />
     </div>
   );
 }
diff --git 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={<MarketplaceSingleItemPage />}
         />
-        <Route path={`/profile`} element={<ProfilePage />} />
+        <Route
+          path={`/profile`}
+          element={
+            <ProfileContext>
+              <ProfilePage />
+            </ProfileContext>
+          }
+        />
 
         {/* Dashboard Pages */}
         <Route path={`/`} element={<MainDashboardPage />} />

diff --git 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,