Untitled

import React, { useEffect, useState } from "react";

import { Typography, PageLoader } from "neetoui";

import settingsApi from "apis/settings";
import { useAuthState } from "contexts/auth";
import { useSettingsDispatch } from "contexts/settings";

import Form from "./Form";

const addPasswordField = settings => ({ ...settings, password: "" });

const General = () => {
  const [loading, setLoading] = useState(false);
  const [settings, setSettings] = useState({});

  const settingsDispatch = useSettingsDispatch();
  const authState = useAuthState();

  useEffect(() => {
    showSettings();
  }, [settingsDispatch, authState]);

  const showSettings = async () => {
    try {
      setLoading(true);
      const {
        data: { settings },
      } = await settingsApi.show();
      settingsDispatch({ type: "LOAD", payload: settings });
      setSettings(settings);
    } catch (error) {
      logger.error(error);
    } finally {
      setLoading(false);
    }
  };

  if (loading) return <PageLoader />;

  return (
    <div className="mx-auto my-5 flex flex-col">
      <Typography style="h2">General Settings</Typography>
      <Typography className="text-gray-600" style="body1">
        Configure general attributes of scribble.
      </Typography>
      <Form refetch={showSettings} settings={addPasswordField(settings)} />
    </div>
  );
};

export default General;