Class Profile

frontend/src/app/Profile/Profile.tsx:17–116

import { PageTitle, Box, Grid } from "styles/common";

class Profile extends React.Component<ProfileSpecs.Props, ProfileSpecs.State> {
    constructor(props: ProfileSpecs.Props) {
        super(props);
        this.state = {
            loading: true,
            packs: []
        }
    }

    componentDidMount() {
        this.fetchPacks();
    }

    fetchPacks = () => {
        const { getPacks, user: { id } } = this.props;
        this.setState({ loading: true });
        getPacks(id)
            .then(packs => {
                this.setState({ packs, loading: false })
            })
            .catch(() => {
                alertError({ message: 'Unable to retrieve profile.' });
                this.setState({ loading: false });
            });
    };

    deletePack = (id: number) => {
        this.props.deletePack(id)
            .then(() => this.fetchPacks())
            .catch(() => alertError({ message: 'Error while deleting pack.' }))
    };

    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();