feat: refactor profiles calls to services and controllers

package.json

@@ -41,7 +41,7 @@
   "dependencies": {
     "@adyen/adyen-web": "^5.42.1",
     "@codeceptjs/allure-legacy": "^1.0.2",
-    "@inplayer-org/inplayer.js": "^3.13.12",
+    "@inplayer-org/inplayer.js": "^3.13.13",
     "classnames": "^2.3.1",
     "date-fns": "^2.28.0",
     "dompurify": "^2.3.8",

src/containers/AppRoutes/AppRoutes.tsx

@@ -25,8 +25,8 @@ export default function AppRoutes() {
   const userModal = useQueryParam('u');
 
   const { accessModel } = useConfigStore(({ config, accessModel }) => ({ config, accessModel }), shallow);
-  const { canManageProfiles, profile } = useAccountStore(({ canManageProfiles, profile }) => ({ canManageProfiles, profile }), shallow);
-  const shouldManageProfiles = canManageProfiles && !profile && (accessModel === 'SVOD' || accessModel === 'AUTHVOD') && !userModal;
+  const { canManageProfiles, profile, user } = useAccountStore(({ canManageProfiles, profile, user }) => ({ canManageProfiles, profile, user }), shallow);
+  const shouldManageProfiles = !!user && canManageProfiles && !profile && (accessModel === 'SVOD' || accessModel === 'AUTHVOD') && !userModal;
 
   return (
     <Routes>

src/containers/Profiles/CreateProfile.tsx

@@ -6,10 +6,9 @@ import profileStyles from './Profiles.module.scss';
 import Form from './Form';
 
 import styles from '#src/pages/User/User.module.scss';
-import { createProfile } from '#src/services/inplayer.account.service';
 import { useAccountStore } from '#src/stores/AccountStore';
-import type { ProfilePayload, ListProfiles } from '#types/account';
-import { listProfiles } from '#src/stores/AccountController';
+import type { ProfilePayload, ListProfilesResponse } from '#types/account';
+import { createProfile, listProfiles } from '#src/stores/AccountController';
 import LoadingOverlay from '#src/components/LoadingOverlay/LoadingOverlay';
 import type { UseFormOnSubmitHandler } from '#src/hooks/useForm';
 
@@ -30,28 +29,30 @@ const CreateProfile = () => {
   }, [canManageProfiles, navigate]);
 
   // this is only needed so we can set different avatar url which will be temporary
-  const { data, isLoading }: UseQueryResult<ListProfiles> = useQuery(['listProfiles'], () => listProfiles(null), { staleTime: 0 });
+  const { data, isLoading }: UseQueryResult<ListProfilesResponse> = useQuery(['listProfiles'], () => listProfiles(), { staleTime: 0 });
   const activeProfiles = data?.collection?.length || 0;
 
   const initialValues = {
     name: '',
     adult: true,
     avatar_url: '',
-    pin: null,
+    pin: undefined,
   };
 
   const createProfileHandler: UseFormOnSubmitHandler<ProfilePayload> = async (formData, { setSubmitting, setErrors }) => {
     try {
-      const profile = await createProfile(null, true, {
-        name: formData.name,
-        adult: formData.adult,
-        avatar_url: AVATARS[activeProfiles],
-      });
+      const profile = (
+        await createProfile({
+          name: formData.name,
+          adult: formData.adult,
+          avatar_url: AVATARS[activeProfiles],
+        })
+      )?.responseData;
       if (profile?.id) {
         setSubmitting(false);
         navigate('/u/profiles');
       } else {
-        setErrors({ form: profile?.message || 'Something went wrong. Please try again later.' });
+        setErrors({ form: 'Something went wrong. Please try again later.' });
         setSubmitting(false);
       }
     } catch {

src/containers/Profiles/DeleteProfile.tsx

@@ -7,8 +7,8 @@ import Button from '#src/components/Button/Button';
 import Dialog from '#src/components/Dialog/Dialog';
 import { removeQueryParam } from '#src/utils/location';
 import useQueryParam from '#src/hooks/useQueryParam';
-import { deleteProfile } from '#src/services/inplayer.account.service';
 import LoadingOverlay from '#src/components/LoadingOverlay/LoadingOverlay';
+import { deleteProfile } from '#src/stores/AccountController';
 
 const DeleteProfile = () => {
   const navigate = useNavigate();
@@ -25,8 +25,11 @@ const DeleteProfile = () => {
   const deleteHandler = async () => {
     try {
       setIsDeleting(true);
-      const profile = await deleteProfile(null, true, id);
-      if (profile.code === 200) {
+      if (!id) {
+        return;
+      }
+      const response = await deleteProfile({ id });
+      if (response?.errors.length === 0) {
         closeHandler();
         setIsDeleting(false);
         navigate('/u/profiles');

src/containers/Profiles/EditProfile.tsx

@@ -1,59 +1,62 @@
 import React, { useMemo, useState } from 'react';
-import { useQuery, UseQueryResult } from 'react-query';
+import { useQuery } from 'react-query';
 import { useLocation, useNavigate, useParams } from 'react-router';
 
 import profileStyles from './Profiles.module.scss';
 import Form from './Form';
 import DeleteProfile from './DeleteProfile';
 
 import styles from '#src/pages/User/User.module.scss';
-import { getProfileDetails, updateProfile } from '#src/services/inplayer.account.service';
-import type { Profile, ProfilePayload } from '#types/account';
+import type { ProfilePayload } from '#types/account';
 import LoadingOverlay from '#src/components/LoadingOverlay/LoadingOverlay';
 import type { UseFormOnSubmitHandler } from '#src/hooks/useForm';
 import Button from '#src/components/Button/Button';
 import { addQueryParam } from '#src/utils/location';
 import FormFeedback from '#src/components/FormFeedback/FormFeedback';
+import { getProfileDetails, updateProfile } from '#src/stores/AccountController';
 
 const EditProfile = () => {
   const { id } = useParams();
   const location = useLocation();
   const navigate = useNavigate();
   const [fullName, setFullName] = useState<string>('');
 
-  const {
-    data: profileDetails,
-    isLoading,
-    isFetching,
-  }: UseQueryResult<Profile> = useQuery(['getProfileDetails'], () => getProfileDetails(null, true, id), {
+  const { data, isLoading, isFetching } = useQuery(['getProfileDetails'], () => getProfileDetails({ id: id || '' }), {
     staleTime: 0,
   });
 
+  const profileDetails = data?.responseData;
+
   const initialValues = useMemo(() => {
     return {
       id: profileDetails?.id || '',
       name: profileDetails?.name || '',
       adult: profileDetails?.adult ?? true,
       avatar_url: profileDetails?.avatar_url || '',
-      pin: null,
+      pin: undefined,
     };
   }, [profileDetails]);
 
+  if (!id) {
+    navigate('/u/profiles');
+  }
+
   const updateProfileHandler: UseFormOnSubmitHandler<ProfilePayload> = async (formData, { setErrors, setSubmitting }) => {
     try {
-      const adult = formData.adult.toString() === 'true' ? true : false;
-      const profile = await updateProfile(null, true, {
-        id: formData.id,
+      const response = await updateProfile({
+        id: id,
         name: formData.name,
-        adult,
-        avatar_url: formData.avatar_url,
+        adult: formData.adult,
+        avatar_url: formData.avatar_url || profileDetails?.avatar_url,
       });
 
+      const profile = response?.responseData;
+
       if (profile?.id) {
         setSubmitting(false);
         navigate('/u/profiles');
       } else {
-        setErrors({ form: profile?.message || 'Something went wrong. Please try again later.' });
+        setErrors({ form: 'Something went wrong. Please try again later.' });
         setSubmitting(false);
       }
     } catch {

src/containers/Profiles/Profiles.tsx

@@ -1,18 +1,17 @@
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router';
-import { useQuery, UseQueryResult } from 'react-query';
+import { useQuery } from 'react-query';
 import shallow from 'zustand/shallow';
 
 import styles from './Profiles.module.scss';
 
 import * as persist from '#src/utils/persist';
 import ProfileBox from '#src/components/ProfileBox/ProfileBox';
 import { useAccountStore } from '#src/stores/AccountStore';
-import { initializeAccount, listProfiles } from '#src/stores/AccountController';
-import type { AuthData, ListProfiles, Profile } from '#types/account';
+import { enterProfile, initializeAccount, listProfiles } from '#src/stores/AccountController';
+import type { AuthData, Profile } from '#types/account';
 import AddNewProfile from '#src/components/ProfileBox/AddNewProfile';
 import LoadingOverlay from '#src/components/LoadingOverlay/LoadingOverlay';
-import { enterProfile } from '#src/services/inplayer.account.service';
 import Button from '#src/components/Button/Button';
 import { useFavoritesStore } from '#src/stores/FavoritesStore';
 import { useWatchHistoryStore } from '#src/stores/WatchHistoryStore';
@@ -34,16 +33,17 @@ const Profiles = ({ editMode = false }: Props) => {
     if (!canManageProfiles) navigate('/');
   }, [canManageProfiles, navigate]);
 
-  const { data, isLoading, isFetching }: UseQueryResult<ListProfiles> = useQuery(['listProfiles'], () => listProfiles(null), {
+  const { data, isLoading, isFetching } = useQuery(['listProfiles'], listProfiles, {
     staleTime: 0,
   });
-  const activeProfiles = data?.collection?.length || 0;
+  const activeProfiles = data?.responseData.collection.length || 0;
   const canAddNew = activeProfiles < MAX_PROFILES;
 
   const handleProfileSelection = async (id: string) => {
     try {
       useAccountStore.setState({ loading: true });
-      const profile = await enterProfile(null, true, { id });
+      const response = await enterProfile({ id });
+      const profile = response?.responseData;
 
       if (profile?.credentials?.access_token) {
         const authData: AuthData = {
@@ -82,7 +82,7 @@ const Profiles = ({ editMode = false }: Props) => {
         <h2 className={styles.heading}>{!editMode ? 'Who’s watching?' : 'Manage profiles'}</h2>
       )}
       <div className={styles.flex}>
-        {data?.collection?.map((profile: Profile) => (
+        {data?.responseData.collection?.map((profile: Profile) => (
           <ProfileBox
             editMode={editMode}
             onEdit={() => navigate(`/u/profiles/edit/${profile.id}`)}

src/services/cleeng.account.service.ts

@@ -257,9 +257,9 @@ export const canUpdatePaymentMethod = true;
 export const canShowReceipts = true;
 export const canManageProfiles = false;
 
-export const listProfiles = async () => {
-  return {
-    canManageProfiles: false,
-    collection: [],
-  };
-};
+export const listProfiles = () => null;
+export const createProfile = () => null;
+export const enterProfile = () => null;
+export const updateProfile = () => null;
+export const getProfileDetails = () => null;
+export const deleteProfile = () => null;