github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/webapp/javascript/components/Settings/Preferences/index.tsx (about)

     1  /* eslint-disable prettier/prettier */
     2  import React, { useState } from 'react';
     3  import Button from '@webapp/ui/Button';
     4  import { useAppDispatch } from '@webapp/redux/hooks';
     5  
     6  import { editMe, withCurrentUser } from '@webapp/redux/reducers/user';
     7  import { addNotification } from '@webapp/redux/reducers/notifications';
     8  
     9  import StatusMessage from '@webapp/ui/StatusMessage';
    10  import InputField from '@webapp/ui/InputField';
    11  
    12  function Preferences(props: ShamefulAny) {
    13    const { currentUser } = props;
    14    const dispatch = useAppDispatch();
    15  
    16    const [form, setForm] = useState(currentUser);
    17    const handleFormSubmit = (evt: ShamefulAny) => {
    18      evt.preventDefault();
    19  
    20      dispatch(editMe(form))
    21        .unwrap()
    22        .then(() => {
    23          dispatch(
    24            addNotification({
    25              type: 'success',
    26              title: 'Success',
    27              message: 'User has been successfully edited',
    28            })
    29          );
    30        });
    31      return false;
    32    };
    33  
    34    const handleFormChange = (event: ShamefulAny) => {
    35      const { name } = event.target;
    36      const { value } = event.target;
    37      setForm({ ...form, [name]: value });
    38    };
    39  
    40    const isEditDisabled = !!(currentUser && currentUser.isExternal);
    41  
    42    if (!currentUser) return <></>;
    43    return (
    44      <>
    45        <h2>Edit profile</h2>
    46        <form onSubmit={handleFormSubmit}>
    47          <StatusMessage type="error" message={form.errors} />
    48          <InputField
    49            label="Username"
    50            type="text"
    51            placeholder="username"
    52            value={form?.name}
    53            name="name"
    54            required
    55            disabled={isEditDisabled}
    56            onChange={handleFormChange}
    57          />
    58          <InputField
    59            label="Full Name"
    60            type="text"
    61            placeholder="Full Name"
    62            name="fullName"
    63            value={form?.fullName}
    64            onChange={handleFormChange}
    65          />
    66          <InputField
    67            label="Email"
    68            type="text"
    69            placeholder="email"
    70            value={form?.email}
    71            name="email"
    72            onChange={handleFormChange}
    73          />
    74          <Button type="submit" kind="secondary">
    75            Save
    76          </Button>
    77        </form>
    78      </>
    79    );
    80  }
    81  
    82  export default withCurrentUser(Preferences);