[PUI] Api state extension/cleanup (#5934)

* added option to replace path parts

* use function instead of f-string

* remove doube defintion

* added user pk

* Update src/frontend/src/states/ApiState.tsx

Co-authored-by: Lukas <76838159+wolflu05@users.noreply.github.com>

* fix typing issue

---------

Co-authored-by: Lukas <76838159+wolflu05@users.noreply.github.com>

src/frontend/src/components/tables/settings/UserDrawer.tsx

@@ -86,7 +86,7 @@ export function UserDrawer({
   function setPermission(pk: number, data: any) {
     setLocked(true);
     api
-      .patch(`${apiUrl(ApiPaths.user_list)}${pk}/`, data)
+      .patch(apiUrl(ApiPaths.user_list, pk), data)
       .then(() => {
         notifications.show({
           title: t`User permission changed successfully`,
@@ -110,7 +110,7 @@ export function UserDrawer({
   function setActive(pk: number, active: boolean) {
     setLocked(true);
     api
-      .patch(`${apiUrl(ApiPaths.user_list)}${pk}/`, {
+      .patch(apiUrl(ApiPaths.user_list, pk), {
         is_active: active
       })
       .then(() => {

src/frontend/src/pages/Index/Settings/AccountSettings/SecurityContent.tsx

@@ -21,6 +21,7 @@ import { api, queryClient } from '../../../../App';
 import { PlaceholderPill } from '../../../../components/items/Placeholder';
 import { ApiPaths } from '../../../../enums/ApiEndpoints';
 import { apiUrl } from '../../../../states/ApiState';
+import { useUserState } from '../../../../states/UserState';
 
 export function SecurityContent() {
   const [isSsoEnabled, setIsSsoEnabled] = useState<boolean>(false);
@@ -91,6 +92,7 @@ export function SecurityContent() {
 function EmailContent({}: {}) {
   const [value, setValue] = useState<string>('');
   const [newEmailValue, setNewEmailValue] = useState('');
+  const [user] = useUserState((state) => [state.user]);
   const { isLoading, data, refetch } = useQuery({
     queryKey: ['emails'],
     queryFn: () => api.get(apiUrl(ApiPaths.user_emails)).then((res) => res.data)
@@ -98,7 +100,7 @@ function EmailContent({}: {}) {
 
   function runServerAction(url: ApiPaths) {
     api
-      .post(apiUrl(url).replace('$id', value), {})
+      .post(apiUrl(url, undefined, { id: value }), {})
       .then(() => {
         refetch();
       })
@@ -108,7 +110,8 @@ function EmailContent({}: {}) {
   function addEmail() {
     api
       .post(apiUrl(ApiPaths.user_emails), {
-        email: newEmailValue
+        email: newEmailValue,
+        user: user?.pk
       })
       .then(() => {
         refetch();
@@ -219,7 +222,7 @@ function SsoContent({ dataProvider }: { dataProvider: any | undefined }) {
 
   function removeProvider() {
     api
-      .post(apiUrl(ApiPaths.user_sso_remove).replace('$id', value))
+      .post(apiUrl(ApiPaths.user_sso_remove, undefined, { id: value }))
       .then(() => {
         queryClient.removeQueries({
           queryKey: ['sso-list']

src/frontend/src/states/ApiState.tsx

@@ -85,15 +85,15 @@ export function apiEndpoint(path: ApiPaths): string {
     case ApiPaths.user_sso:
       return 'auth/social/';
     case ApiPaths.user_sso_remove:
-      return 'auth/social/$id/disconnect/';
+      return 'auth/social/:id/disconnect/';
     case ApiPaths.user_emails:
       return 'auth/emails/';
     case ApiPaths.user_email_remove:
-      return 'auth/emails/$id/remove/';
+      return 'auth/emails/:id/remove/';
     case ApiPaths.user_email_verify:
-      return 'auth/emails/$id/verify/';
+      return 'auth/emails/:id/verify/';
     case ApiPaths.user_email_primary:
-      return 'auth/emails/$id/primary/';
+      return 'auth/emails/:id/primary/';
     case ApiPaths.currency_list:
       return 'currency/exchange/';
     case ApiPaths.currency_refresh:
@@ -116,8 +116,6 @@ export function apiEndpoint(path: ApiPaths): string {
       return 'version/';
     case ApiPaths.sso_providers:
       return 'auth/providers/';
-    case ApiPaths.user_list:
-      return 'user/';
     case ApiPaths.group_list:
       return 'user/group/';
     case ApiPaths.owner_list:
@@ -194,7 +192,11 @@ export function apiEndpoint(path: ApiPaths): string {
 /**
  * Construct an API URL with an endpoint and (optional) pk value
  */
-export function apiUrl(path: ApiPaths, pk?: any): string {
+export function apiUrl(
+  path: ApiPaths,
+  pk?: any,
+  data?: Record<string, string | number>
+): string {
   let _url = apiEndpoint(path);
 
   // If the URL does not start with a '/', add the API prefix
@@ -206,5 +208,11 @@ export function apiUrl(path: ApiPaths, pk?: any): string {
     _url += `${pk}/`;
   }
 
+  if (_url && data) {
+    for (const key in data) {
+      _url = _url.replace(`:${key}`, `${data[key]}`);
+    }
+  }
+
   return _url;
 }

src/frontend/src/states/UserState.tsx

@@ -42,6 +42,7 @@ export const useUserState = create<UserStateProps>((set, get) => ({
       })
       .then((response) => {
         const user: UserProps = {
+          pk: response.data.pk,
           first_name: response.data?.first_name ?? '',
           last_name: response.data?.last_name ?? '',
           email: response.data.email,

src/frontend/src/states/states.tsx

@@ -9,6 +9,7 @@ export interface HostList {
 
 // Type interface fully defining the current user
 export interface UserProps {
+  pk: number;
   username: string;
   first_name: string;
   last_name: string;