Method render

frontend/src/app/Profile/Profile.tsx:49–115

()

    };

    render() {
        const { user: { username, id, default_weight_unit }, updateUser, fetchUser } = this.props;
        const { loading, packs } = this.state;
        return (
            <DocumentTitle title={`Packstack | My Packs`}>
                <>
                    <PageTitle>
                        <h1>My Packs</h1>
                    </PageTitle>
                    <Grid>
                        <div className="two-thirds">
                            <h3>Packs</h3>
                            <PackList loading={loading} packs={packs} currentUserId={id} deletePack={this.deletePack}/>
                        </div>
                        <div className="third">
                            <h3>Settings</h3>
                            <Box>
                                <Formik
                                    initialValues={{ username, default_weight_unit }}
                                    validationSchema={Yup.object().shape({
                                        username: Yup.string().required("Username cannot be empty.")
                                    })}
                                    onSubmit={(values) => {
                                        updateUser(values.username, values.default_weight_unit)
                                            .then(() => {
                                                fetchUser();
                                                alertSuccess({ message: 'User settings updated!' });
                                            })
                                            .catch(() => alertError({ message: 'Unable to update user' }));
                                    }}>
                                    {(props: FormikProps<ProfileSpecs.SettingsForm>) => {
                                        const { values, setFieldValue, submitForm, submitCount, errors } = props;
                                        const wasSubmitted = submitCount > 0;
                                        const saveChanges = username !== values.username || default_weight_unit !== values.default_weight_unit;

                                        return (
                                            <>
                                                <Input label="Username"
                                                       value={values.username}
                                                       error={wasSubmitted && !!errors.username}
                                                       errorMsg={errors.username}
                                                       onChange={v => setFieldValue('username', v)}/>

                                                <Select label="Default Weight Unit"
                                                        defaultValue={{
                                                            value: values.default_weight_unit,
                                                            label: default_weight_unit
                                                        }}
                                                        options={weightUnitOptions()}
                                                        onChange={(option: Option) => setFieldValue('default_weight_unit', option.value)}/>
                                                <Button onClick={submitForm}
                                                        block={true}
                                                        type="primary"
                                                        disabled={!saveChanges}>
                                                    Save Changes
                                                </Button>
                                            </>
                                        )