github.com/quickfeed/quickfeed@v0.0.0-20240507093252-ed8ca812a09c/public/src/components/profile/Profile.tsx (about)

     1  import React, { useEffect, useState } from 'react'
     2  import { Redirect, useHistory } from 'react-router'
     3  import { useAppState } from '../../overmind'
     4  import ProfileForm from './ProfileForm'
     5  import ProfileCard from './ProfileCard'
     6  import ProfileInfo from './ProfileInfo'
     7  import SignupText from './SignupText'
     8  
     9  
    10  const Profile = (): JSX.Element => {
    11      const state = useAppState()
    12      const history = useHistory()
    13      // Holds a local state to check whether the user is editing their user information or not
    14      const [editing, setEditing] = useState(false)
    15  
    16      // Redirect from "/" to "/profile" when user object is invalid
    17      if (!state.isValid && history.location.pathname === "/") {
    18          history.push("/profile")
    19      }
    20  
    21      // Default to edit mode if user object does not contain valid information
    22      useEffect(() => {
    23          if (!state.isValid) {
    24              setEditing(true)
    25          }
    26      })
    27  
    28      if (state.isLoggedIn) {
    29          return (
    30              <div>
    31                  <div className="banner jumbotron">
    32                      <div className="centerblock container">
    33                          <h1>Hi, {state.self.Name}</h1>
    34                          <p>You can edit your user information here.</p>
    35                          <p><span className='font-weight-bold'>Use your real name as it appears on Canvas</span> to ensure that approvals are correctly attributed.</p>
    36                      </div>
    37                  </div>
    38                  <div className="container">
    39                      <ProfileCard>
    40                          {editing ?
    41                              <ProfileForm setEditing={setEditing} >
    42                                  {state.isValid ? null : <SignupText />}
    43                              </ProfileForm>
    44                              : <ProfileInfo setEditing={setEditing} />
    45                          }
    46                      </ProfileCard>
    47                  </div>
    48              </div>
    49          )
    50      }
    51      return <Redirect to="/" />
    52  }
    53  
    54  export default Profile