dashboard.js

import React, { Component } from 'react';
import { Grid, Container } from 'semantic-ui-react';
import PrivateLayout from './layouts/PrivateLayout';
import { app } from '../feathers';
import ApplyForAUserCategory from './components/ApplyForAUserCategory';
import SuperUserMenu from './superuser/SuperUserMenu';
import JoinVillage from './components/JoinVillage';
import ProvideFALicense from './fa/ProvideFALicense';
import FADashboard from './fa/FADashboard';

const INITIAL_STATE = {
  user: {
    id: null,
    avatar: '',
    firstname: '',
    lastname: '',
    story: null,
    license: null
  }
};

const getUser = userId => app.service('users').get(userId);

class Page extends Component {
  _isMounted = false;

  state = INITIAL_STATE;

  componentDidMount() {
    this._isMounted = true;
    app.service('users').on('patched', this.refreshUser); // refresh user information when user is edited
    app.service('licenses').on('created', this.refreshUser);
    app.service('licenses').on('patched', this.refreshUser);
    app.service('address').on('created', this.refreshUser);
    app.service('address').on('patched', this.refreshUser);
  }

  componentWillUnmount() {
    this._isMounted = false;
  }

  static getDerivedStateFromProps(props, state) {
    // console.log(props)
    if (props.user !== state.user) {
      return {
        user: props.user // update user state whenever the props is not the same as state
      };
    }
    return null;
  }

  refreshUser = async () => { 
    const {
      userId,
    } = this.props;
    const { user } = await getUser(userId);
    // run when the user is patched event occurs
    console.log('updated user: ',user) // contains new info when event triggers ... eg if i change username from brandy to sam it prints sam
    if (this._isMounted) {
      this.setState({user});
    }
  };

  render() {
    const { user, } = this.state;
    const {authUser}=this.props
    const isOwner = (user && user.id) === (authUser && authUser.id);
    // run when the user is patched event occurs
   console.log("rendered user: ", user) // but contains old info when event triggers ... prints brandy.
    return (
      <PrivateLayout
        {...{ user }}
        {...{ authUser }}
        mobile={<PageComponent {...{ user }} {...{ isOwner }} />}
        desktop={<PageComponent {...{ user }} {...{ isOwner }} />}
      />
    );
  }
}

function PageComponent({ user, isOwner }) {
  const { category, story, license, address, id } = user;
  return (
    <Container fluid>
      <Grid textAlign="center" style={{ height: '100vh' }}>
        <Grid.Column>
          {category ? (
            <>
              {category.category === 'Super User' ? (
                <>{isOwner && <SuperUserMenu />}</>
              ) : (
                <>
                  {category.category === 'Students' && (
                    <>
                      {!story ? (
                        <>Set up Student Campaign</>
                      ) : (
                        <>
                          {!address ? (
                                <>{
                                  isOwner && <JoinVillage userId={id} />
                                }</>
                          ) : (
                            <>Student Dashboard</>
                          )}
                        </>
                      )}
                    </>
                  )}
                  {category.category === 'Financial Advisors' && (
                    <>
                      {!license ? (
                        <ProvideFALicense userId={id} />
                      ) : (
                        <>{!address ? <>{
                              isOwner && <JoinVillage userId={id} />
                        }</> : <FADashboard {...{user}}/>}</>
                      )}
                    </>
                  )}

                  {category.category === 'Guardians' && (
                    <>
                      2/3 Set up your an education crowd funding Campaign for
                      the child under your care
                    </>
                  )}
                  {category.category === 'Members' && (
                    <>2/3 Agree to specific instructions</>
                  )}
                  {category.category === 'Takesavillage Staff' && (
                    <>2/3 Apply For Available Staff Roles</>
                  )}
                </>
              )}
            </>
          ) : (
            <>{isOwner && <ApplyForAUserCategory userId={id} />}</>
          )}
        </Grid.Column>
      </Grid>
    </Container>
  );
}

Page.getInitialProps = async ({ query: { userId }, authUser }) => {
  const user = await getUser(userId);
  return { userId, user, authUser }; // initial props set here to allow for proper ssr
};

export default Page;