chore: Refactoring all import directories to alias and all .js|.jsx renamed to be .ts|.tsx

src/containers/Preferences/Users/Roles/RolesLanding/RolesListProvider.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import classNames from 'classnames';
+import { CLASSES } from '@/constants/classes';
+import { useRoles } from '@/hooks/query';
+
+const RolesListContext = React.createContext();
+
+/**
+ * Roles list provider.
+ */
+function RolesListProvider({ ...props }) {
+  // Fetch roles list.
+  const {
+    data: roles,
+    isFetching: isRolesFetching,
+    isLoading: isRolesLoading,
+  } = useRoles();
+
+  // Provider state.
+  const provider = {
+    roles,
+    isRolesFetching,
+    isRolesLoading,
+  };
+  return (
+    <div
+      className={classNames(
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_USERS,
+      )}
+    >
+      <RolesListContext.Provider value={provider} {...props} />
+    </div>
+  );
+}
+
+const useRolesContext = () => React.useContext(RolesListContext);
+
+export { RolesListProvider, useRolesContext };