chore: Migrate isResourceEditedState to Jotai (#4116)

* chore: Migrate isResourceEditedState to Jotai

* fix: add debug label

Author: OliwiaGowor

src/components/Modules/KymaModulesEdit.js

@@ -35,6 +35,7 @@ import {
 } from './kymaModulesQueries';
 import { findModuleSpec, findModuleStatus, setChannel } from './support';
 import CommunityModulesEdit from 'components/Modules/community/CommunityModulesEdit';
+import { useSetAtom } from 'jotai';
 
 const addChannelsToModules = moduleReleaseMetas => {
   return (acc, module) => {
@@ -113,7 +114,7 @@ export default function KymaModulesEdit({ resource, ...props }) {
   const [kymaResource, setKymaResource] = useState(cloneDeep(resource));
   const [initialResource] = useState(resource);
   const [initialUnchangedResource] = useState(cloneDeep(resource));
-  const setIsResourceEdited = useSetRecoilState(isResourceEditedState);
+  const setIsResourceEdited = useSetAtom(isResourceEditedState);
   const setIsFormOpen = useSetRecoilState(isFormOpenState);
 
   const resourceName = kymaResource?.metadata.name;

src/components/Modules/community/CommunityModulesAddModule.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router';
-import { SetterOrUpdater, useSetRecoilState } from 'recoil';
-import { useAtom } from 'jotai';
+import { SetterOrUpdater } from 'recoil';
+import { useAtom, useSetAtom } from 'jotai';
 import { useFeature } from 'hooks/useFeature';
 import { columnLayoutState } from 'state/columnLayoutAtom';
 import { ResourceForm } from 'shared/ResourceForm';
@@ -118,7 +118,7 @@ export default function CommunityModulesAddModule(props: any) {
   );
   const notification = useNotification();
   const post = usePost();
-  const setIsResourceEdited = useSetRecoilState(isResourceEditedState);
+  const setIsResourceEdited = useSetAtom(isResourceEditedState);
   const [resourcesToApply, setResourcesToApply] = useState<{ value: any }[]>(
     [],
   );

src/components/Modules/community/CommunityModulesEdit.tsx

@@ -20,7 +20,7 @@ import { Button, Form, FormItem, MessageStrip } from '@ui5/webcomponents-react';
 import { useContext, useEffect, useMemo, useState } from 'react';
 import { UnsavedMessageBox } from 'shared/components/UnsavedMessageBox/UnsavedMessageBox';
 import { createPortal } from 'react-dom';
-import { SetterOrUpdater, useSetRecoilState } from 'recoil';
+import { SetterOrUpdater } from 'recoil';
 import { isResourceEditedState } from 'state/resourceEditedAtom';
 import { useUploadResources } from 'resources/Namespaces/YamlUpload/useUploadResources';
 import { usePost } from 'shared/hooks/BackendAPI/usePost';
@@ -32,6 +32,7 @@ import {
 import { ModuleTemplatesContext } from 'components/Modules/providers/ModuleTemplatesProvider';
 
 import 'components/Modules/community/CommunityModule.scss';
+import { useSetAtom } from 'jotai';
 
 const isModuleInstalled = (
   foundModuleTemplate: ModuleTemplateType,
@@ -146,7 +147,7 @@ export default function CommunityModulesEdit() {
   );
   const notification = useNotification();
   const post = usePost();
-  const setIsResourceEdited = useSetRecoilState(isResourceEditedState);
+  const setIsResourceEdited = useSetAtom(isResourceEditedState);
   const [resourcesToApply, setResourcesToApply] = useState<{ value: any }[]>(
     [],
   );

src/shared/components/DynamicPageComponent/DynamicPageComponent.js

@@ -117,7 +117,7 @@ export const DynamicPageComponent = ({
   const [showTitleDescription, setShowTitleDescription] = useState(false);
   const [layoutColumn, setLayoutColumn] = useAtom(columnLayoutState);
   const { t } = useTranslation();
-  const [isResourceEdited, setIsResourceEdited] = useRecoilState(
+  const [isResourceEdited, setIsResourceEdited] = useAtom(
     isResourceEditedState,
   );
   const [isFormOpen, setIsFormOpen] = useRecoilState(isFormOpenState);

src/shared/hooks/useFormEditTracking.js

@@ -1,6 +1,7 @@
+import { useSetAtom } from 'jotai';
 import { cloneDeep, isEqual } from 'lodash';
 import { useEffect, useMemo } from 'react';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { useRecoilValue } from 'recoil';
 import { isFormOpenState } from 'state/formOpenAtom';
 import { isResourceEditedState } from 'state/resourceEditedAtom';
 
@@ -20,7 +21,7 @@ export function useFormEditTracking(
   editorError = false,
 ) {
   const { formOpen } = useRecoilValue(isFormOpenState);
-  const setIsResourceEdited = useSetRecoilState(isResourceEditedState);
+  const setIsResourceEdited = useSetAtom(isResourceEditedState);
 
   const excludedResource = useMemo(() => excludeStatus(resource), [resource]);
 

src/shared/hooks/useFormNavigation.ts

@@ -2,9 +2,10 @@ import { useCallback } from 'react';
 import { useRecoilState } from 'recoil';
 import { isResourceEditedState } from 'state/resourceEditedAtom';
 import { isFormOpenState } from 'state/formOpenAtom';
+import { useAtom } from 'jotai';
 
 export function useFormNavigation() {
-  const [isResourceEdited, setIsResourceEdited] = useRecoilState(
+  const [isResourceEdited, setIsResourceEdited] = useAtom(
     isResourceEditedState,
   );
   const [{ formOpen }, setIsFormOpen] = useRecoilState(isFormOpenState);

src/state/resourceEditedAtom.ts

@@ -1,4 +1,4 @@
-import { atom, RecoilState } from 'recoil';
+import { atom } from 'jotai';
 
 export interface IsResourceEditedState {
   isEdited: boolean;
@@ -7,9 +7,5 @@ export interface IsResourceEditedState {
 
 const defaultValue = { isEdited: false };
 
-export const isResourceEditedState: RecoilState<IsResourceEditedState> = atom<
-  IsResourceEditedState
->({
-  key: 'isResourceEditedState',
-  default: defaultValue,
-});
+export const isResourceEditedState = atom<IsResourceEditedState>(defaultValue);
+isResourceEditedState.debugLabel = 'isResourceEditedState';