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

     1  import React, { Dispatch, SetStateAction, useState } from "react"
     2  import { hasEnrollment } from "../../Helpers"
     3  import { useActions, useAppState } from "../../overmind"
     4  import FormInput from "../forms/FormInput"
     5  import { useHistory } from "react-router"
     6  
     7  const ProfileForm = ({ children, setEditing }: { children: React.ReactNode, setEditing: Dispatch<SetStateAction<boolean>> }): JSX.Element => {
     8      const state = useAppState()
     9      const actions = useActions()
    10      const history = useHistory()
    11  
    12      // Create a copy of the user object, so that we can modify it without affecting the original object.
    13      const [user, setUser] = useState(state.self.clone())
    14      const [isValid, setIsValid] = useState(state.isValid)
    15  
    16      // Update the user object when user input changes, and update the state.
    17      const handleChange = (event: React.FormEvent<HTMLInputElement>) => {
    18          const { name, value } = event.currentTarget
    19          switch (name) {
    20              case "name":
    21                  user.Name = value
    22                  break
    23              case "email":
    24                  user.Email = value
    25                  break
    26              case "studentid":
    27                  user.StudentID = value
    28                  break
    29          }
    30          setUser(user)
    31          if (user.Name !== "" && user.Email !== "" && user.StudentID !== "") {
    32              setIsValid(true)
    33          } else {
    34              setIsValid(false)
    35          }
    36      }
    37  
    38  
    39      // Sends the updated user object to the server on submit.
    40      const submitHandler = () => {
    41          actions.updateUser(user)
    42          // Disable editing after submission
    43          setEditing(false)
    44          if (!hasEnrollment(state.enrollments)) {
    45              history.push("/courses")
    46          }
    47      }
    48  
    49      return (
    50          <div>
    51              {!isValid ? children : null}
    52              <form className="form-group" onSubmit={e => { e.preventDefault(); submitHandler() }}>
    53                  <FormInput prepend="Name" name="name" defaultValue={user.Name} onChange={handleChange} />
    54                  <FormInput prepend="Email" name="email" defaultValue={user.Email} onChange={handleChange} type="email" />
    55                  <FormInput prepend="Student ID" name="studentid" defaultValue={user.StudentID} onChange={handleChange} type="number" />
    56                  <div className="col input-group mb-3">
    57                      <input className="btn btn-primary" disabled={!isValid} type="submit" value="Save" style={{ marginTop: "20px" }} />
    58                  </div>
    59              </form>
    60          </div>
    61      )
    62  }
    63  
    64  export default ProfileForm