re-structure to monorepo.

packages/webapp/src/containers/Preferences/General/GeneralFormProvider.tsx

@@ -0,0 +1,69 @@
+// @ts-nocheck
+import React, { createContext } from 'react';
+import classNames from 'classnames';
+import styled from 'styled-components';
+
+import { Card } from '@/components';
+import { CLASSES } from '@/constants/classes';
+import {
+  useCurrentOrganization,
+  useUpdateOrganization,
+  useDateFormats,
+  useOrgBaseCurrencyMutateAbilities,
+} from '@/hooks/query';
+import PreferencesPageLoader from '../PreferencesPageLoader';
+
+const GeneralFormContext = createContext();
+
+/**
+ * General form provider.
+ */
+function GeneralFormProvider({ ...props }) {
+  // Fetches current organization information.
+  const { isLoading: isOrganizationLoading, data: organization } =
+    useCurrentOrganization();
+
+  const { data: dateFormats, isLoading: isDateFormatsLoading } =
+    useDateFormats();
+
+  const { data: baseCurrencyMutateAbility } =
+    useOrgBaseCurrencyMutateAbilities();
+
+  // Mutate organization information.
+  const { mutateAsync: updateOrganization } = useUpdateOrganization();
+
+  // Provider state.
+  const provider = {
+    isOrganizationLoading,
+    isDateFormatsLoading,
+    updateOrganization,
+    baseCurrencyMutateAbility,
+    organization,
+    dateFormats,
+  };
+
+  return (
+    <div
+      className={classNames(
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_GENERAL,
+      )}
+    >
+      <GeneralFormCard>
+        {isOrganizationLoading || isDateFormatsLoading ? (
+          <PreferencesPageLoader />
+        ) : (
+          <GeneralFormContext.Provider value={provider} {...props} />
+        )}
+      </GeneralFormCard>
+    </div>
+  );
+}
+
+const useGeneralFormContext = () => React.useContext(GeneralFormContext);
+
+export { GeneralFormProvider, useGeneralFormContext };
+
+const GeneralFormCard = styled(Card)`
+  padding: 25px;
+`;