@material-ui/icons#Person JavaScript Examples

buttons = [
  {
    icon: <Person style={{ color: '#00ffba' }} />,
    name: 'me',
    link: '/my-activities',
  },
  {
    icon: <Group style={{ color: '#00ffba' }} />,
    name: 'family',
    link: '/family-activities',
  },
  {
    icon: <Map style={{ color: '#f1e200' }} />,
    name: 'map',
    link: '/map',
  },
  {
    icon: <Assignment style={{ color: '#f1e200' }} />,
    name: 'informing',
    link: '/informing',
  },
  // {
  //     icon: <Room style={{color: "#ff006f"}}/>,
  //     name: "places",
  //     link: "/places",
  // },
  // {
  //     icon: <Info style={{color: "#ff006f"}}/>,
  //     name: "about-us",
  //     link: "/about-us",
  // },
]

routes = [
  {
    to: '/home',
    label: 'خانه',
    icon: <Home />,
  },
  {
    to: '/map',
    label: 'نقشه',
    icon: <Map />,
  },
  {
    to: '/my-activities',
    label: 'من',
    icon: <Person />,
  },
  {
    to: '/family-activities',
    label: 'خانواده',
    icon: <People />,
  },
  {
    to: '/informing',
    label: 'آگاهی‌بخشی',
    icon: <Assignment />,
  },
]

PersonStyled = styled(Person)`
  margin-right: 0.5rem;
`

export default function MyActivityEvents(props) {
  let history = useHistory();
  const dispatch = useDispatch();
  return (
    <>
      <AppBar position="static" className="activity-header">
        <Toolbar variant="regular">
          <img src={logo} className="app-header-logo" />
          <IconButton
            color="inherit"
            onClick={() => {
              dispatch(showNav());
              history.push('/my-activities');
            }}
          >
            <KeyboardBackspace />
          </IconButton>
        </Toolbar>
      </AppBar>
      <div className={`contentWrapper MyActivityEventsWrapper`}>
        <div
          className="myActivityRow healthInfo"
          onClick={() => {
            history.push('/my-health-event');
          }}
        >
          <Person color="primary" style={{ fontSize: 50 }} />
          <div className="content">
            <h3>{PersianLan.myActivitiesTab.interHealthInfo}</h3>
            <p>{PersianLan.myActivitiesTab.interHealthInfoContent}</p>
          </div>
        </div>
        <div className="myActivityRow locationInfo disabled">
          <LocationOn color="primary" style={{ fontSize: 50 }} />
          <div className="content">
            <h3>{PersianLan.myActivitiesTab.interLocation}</h3>
            <p>{PersianLan.myActivitiesTab.interLocationContent}</p>
          </div>
        </div>
        <div className="myActivityRow meetings disabled">
          <People color="primary" style={{ fontSize: 50 }} />
          <div className="content">
            <h3>{PersianLan.myActivitiesTab.interMeetings}</h3>
            <p>{PersianLan.myActivitiesTab.interMeetingsContent}</p>
          </div>
        </div>
      </div>
    </>
  );
}

/**
 * @function
 * @name CustomTable
 * @description displays table containing  rows with data
 *
 * @param {Object} props - properties passed to component
 * @param {Object} props.sortBy - current sort by field and sort order
 * @param {Object} props.selectedRow - selected row
 * @param {Object[]} props.tableMetaData - meta data of the table (carries infomation about table columns etc..)
 * @param {function} props.handleGetData - handler function that triggers get data to be displayed in table
 * @param {function} props.openDateFilter - opens date filter
 * @param {function} props.openMainFilter - opens main filter
 * @param {function} props.setPage - sets current page number
 * @param {function} props.setRowsPerPage - sets number of rows per page number
 * @param {function} props.setSortBy - sets sort by field and sort order
 * @param {function} props.onSelectFile - callback function to be called when file is selected
 * @param {function} props.setSelectedRow - sets selected/clicked row
 * @param {string} props.headerTitle - title of the table header
 * @param {string} props.actionButtonType - determines which action button to render(value can either be 'export' or 'upload')
 * @param {string} props.activeDateRage - string representing the active date range (i.e. 'Oct 1 - Oct 5') in the date filter button
 * @param {boolean} props.isLoading - shows loading spinner when true
 * @param {number} props.page - current page number
 * @param {number} props.rowsPerPage - current number of rows per page
 * @param {number} props.totalCount - total number of rows to be displayed
 * @param {number} props.activeFiltersCount - number of active filters
 * @param {Array} props.rows - rows to be displayed in table
 * @param {React.Component}  props.rowDetails - row  component to display details of a selected row
 * @param {React.Component} props.mainFilterComponent - renders main filter component
 * @param {React.Component} props.dateFilterComponent - renders date filter component
 *
 * @returns {React.Component} custom table
 */
function CustomTable({
  tableMetaData,
  mainFilterComponent,
  dateFilterComponent,
  headerTitle,
  actionButtonType,
  exportDataFetch,
  setSelectedRow,
  selectedRow,
  sortBy,
  rows,
  totalCount,
  rowDetails,
  openDateFilter,
  openMainFilter,
  setPage,
  setRowsPerPage,
  rowsPerPage,
  setSortBy,
  isLoading,
  activeDateRange,
  onSelectFile,
  page,
  activeFiltersCount,
}) {
  // managing custom table  state
  const classes = useStyles();
  const [sortableColumnsObject, setSortableColumnsObject] = useState({});
  const [growerDetail, setGrowerDetail] = useState({
    isOpen: false,
    grower: {},
  });

  const handleChangePage = (event, newPage) => {
    setPage(newPage);
  };

  const handleChangeRowsPerPage = (event) => {
    setRowsPerPage(parseInt(event.target.value, 10));
    setPage(0);
  };

  const handleOpenRowDetails = (row) => {
    setSelectedRow(row);
  };

  const handleSortableColumns = (column) => {
    const sortableColumns = {
      ...sortableColumnsObject,
      [column.name]: sortableColumnsObject[column.name]
        ? sortableColumnsObject[column.name] === 'asc'
          ? 'desc'
          : 'asc'
        : 'asc',
    };
    setSortableColumnsObject(sortableColumns);
    setSortBy({ field: column.name, order: sortableColumns[column.name] });
  };

  const handleShowGrowerDetail = (e, grower) => {
    e.preventDefault();
    e.stopPropagation();
    setGrowerDetail({
      isOpen: true,
      growerId: grower.worker_id,
    });
  };

  function handleCloseGrowerDetail() {
    setGrowerDetail({
      isOpen: false,
      growerId: null,
    });
  }

  const isRowSelected = (id) => id === selectedRow?.id;

  const tablePagination = () => {
    return (
      <TablePagination
        rowsPerPageOptions={[20, 50, 100]}
        component="div"
        count={totalCount || 0}
        page={page}
        rowsPerPage={rowsPerPage}
        onChangePage={handleChangePage}
        onChangeRowsPerPage={handleChangeRowsPerPage}
        aria-label="rows per page"
      />
    );
  };

  return (
    <Paper className={classes.customTable}>
      <CustomTableHeader
        openDateFilter={openDateFilter}
        openMainFilter={openMainFilter}
        data={rows}
        headerTitle={headerTitle}
        activeDateRange={activeDateRange}
        actionButtonType={actionButtonType}
        onSelectFile={onSelectFile}
        activeFiltersCount={activeFiltersCount}
        exportDataFetch={exportDataFetch}
      />
      {tablePagination()}
      <TableContainer className={classes.tableHeight}>
        <Table stickyHeader aria-label="sticky table">
          <TableHead>
            <TableRow className={classes.customTableHeader}>
              {tableMetaData.map((column, i) => (
                <TableCell
                  key={`${i}-${column.description}`}
                  sortDirection={
                    sortableColumnsObject[column.name] || column.sortDirection
                  }
                  style={{
                    textAlign: column.align === 'right' ? 'right' : 'inherit',
                  }}
                >
                  {column?.sortable ? (
                    <TableSortLabel
                      active={sortBy?.field === column.name}
                      onClick={() => handleSortableColumns(column)}
                      direction={sortableColumnsObject[column.name]}
                      classes={{ icon: classes.customTableHeadSortIcon }}
                      IconComponent={ArrowDropDownIcon}
                    >
                      <Typography
                        variant="h6"
                        align={column.align === 'right' ? 'right' : 'inherit'}
                      >
                        {column.description}
                        {column?.showInfoIcon && (
                          <Tooltip title={column.showInfoIcon}>
                            <InfoOutlinedIcon className={classes.infoIcon} />
                          </Tooltip>
                        )}
                      </Typography>
                    </TableSortLabel>
                  ) : (
                    <Typography
                      variant="h6"
                      align={column.align === 'right' ? 'right' : 'inherit'}
                    >
                      {column.description}
                      {column?.showInfoIcon && (
                        <Tooltip title={column.showInfoIcon}>
                          <InfoOutlinedIcon className={classes.infoIcon} />
                        </Tooltip>
                      )}
                    </Typography>
                  )}
                </TableCell>
              ))}
            </TableRow>
          </TableHead>

          <TableBody>
            {isLoading ? (
              <TableRow>
                <TableCell>
                  <Grid item container className={classes.progressContainer}>
                    <CircularProgress />
                  </Grid>
                </TableCell>
              </TableRow>
            ) : rows.length > 0 ? (
              <>
                {rows.map((row, i) => (
                  <TableRow
                    key={`${i}-${row.id}`}
                    onClick={() => handleOpenRowDetails(row)}
                    className={
                      isRowSelected(row.id) ? classes.selectedRow : null
                    }
                  >
                    {tableMetaData.map((column, j) => (
                      <TableCell key={`${i}-${j}-${column.name}`}>
                        {column.name === 'grower' ? (
                          <Grid item>
                            <Typography
                              variant="body1"
                              style={{ textTransform: 'capitalize' }}
                            >
                              {row[column.name]}

                              <IconButton
                                onClick={(e) => {
                                  handleShowGrowerDetail(e, row);
                                }}
                                aria-label={`View/Edit Grower details`}
                                title={`View/Edit Grower details`}
                                style={{ padding: '0 2px 2px 0' }}
                                disabled
                              >
                                <Person color="disabled" />
                              </IconButton>
                            </Typography>
                          </Grid>
                        ) : (
                          <Typography
                            variant="body1"
                            style={{
                              textTransform: 'capitalize',
                              textAlign:
                                column.align === 'right' ? 'right' : 'inherit',
                            }}
                          >
                            {row[column.name]}
                          </Typography>
                        )}
                      </TableCell>
                    ))}
                  </TableRow>
                ))}
              </>
            ) : (
              <TableRow>
                <TableCell>
                  <Typography
                    variant="body1"
                    className={classes.noDataToDisplay}
                  >
                    No data to display
                  </Typography>
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </TableContainer>
      {tablePagination()}

      <GrowerProvider>
        <GrowerDetail
          open={growerDetail.isOpen}
          growerId={growerDetail.growerId}
          onClose={() => handleCloseGrowerDetail()}
        />
      </GrowerProvider>

      {/* start table main filter */}
      {mainFilterComponent}
      {/* end table main filter */}

      {/* start table date filter */}
      {dateFilterComponent}
      {/* end table date filter */}

      {/* start table row details */}
      {rowDetails}
      {/* end table row details */}
    </Paper>
  );
}

ContactUs = (props)=> {

    const [values, setValues] = useState(intialFieldValues);

    const [serverState, setServerState] = useState({
        submitting: false,
        status: null
    });

    const handleServerResponse = (ok, msg, form) => {
        setServerState({
          submitting: false,
          status: { ok, msg }
        });
        if (ok) {
          form.reset();
        }
    };

    const handleOnSubmit = e => {
        e.preventDefault();
        const form = e.target;
        setServerState({ submitting: true });
        axios({
          method: "post",
          url: "https://getform.io/f/c128f607-4510-4b63-8b70-42dca5b07a3a",
          data: new FormData(form)
        })
        .then(r => {
            handleServerResponse(true, "Thanks!", form);
        })
        .catch(r => {
            handleServerResponse(false, r.response.data.error, form);
        });
    };

    const handleInputChange = (e)=>{
        const {name, value} = e.target;
        setValues({
            ...values,
            [name]: value
        })
        handleEmailValidation();
    }

    const [validInput, setValidInput] = useState(false);
    const [validMail, setValidMail] = useState(true);

    const handleEmailValidation =() => {
        if (isEmpty(values.email) || validateEmail(values.email)) {
            setValidMail(true)
        } else {
            setValidMail(false)
        }
    }

    useEffect(() => {
        if (validMail && !(
                isEmpty(values.email) ||
                isEmpty(values.name) ||
                isEmpty(values.message)
            )) {
            setValidInput(true);
        } else {
            setValidInput(false);
        }
        // console.log(validInput);
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [values.email, values.name, values.message, validMail])

    return (
    <>
        <SEO title="Contact Us" />
        <div className="contact_container">
            <div className="contact_wrapper">   
                <div className="contact_header">
                    Contact Us
                </div>
                <div className="contact_content">
                    <form
                        onSubmit={handleOnSubmit}
                    >
                        <FormField 
                            variant="outlined"
                            name="name"
                            label="Name"
                            value={values.fullName}
                            onChange={handleInputChange}
                            InputProps={{
                                startAdornment: (
                                  <InputAdornment position="start">
                                    <Person />
                                  </InputAdornment>
                                ),
                            }}
                        />
                        <FormField
                            error={!validMail}
                            variant="outlined"
                            name="email"
                            label="Email"
                            value={values.email}
                            onChange={handleInputChange}
                            helperText={validMail? "" : "Invalid Email"}
                            InputProps={{
                                startAdornment: (
                                  <InputAdornment position="start">
                                    <AlternateEmail />
                                  </InputAdornment>
                                ),
                            }}
                        />
                        <FormField
                            id="outlined-multiline-static"
                            multiline
                            variant="outlined"
                            rows={5}
                            label="Message"
                            value={values.msg}
                            onChange={handleInputChange}
                            name="message"
                            InputProps={{
                                startAdornment: (
                                  <InputAdornment position="start">
                                    <Send />
                                  </InputAdornment>
                                ),
                            }}
                            inputProps={{
                                maxLength: 255,
                            }}
                            helperText={values.message.length>0? `${values.message.length}/${255}` : ""}
                        />
                        <SubmitButton 
                            className="contact_button" 
                            type="submit"
                            disabled={serverState.submitting || !validInput}
                        >Submit</SubmitButton>
                        <div className="contact_msg">
                            {serverState.status && (
                                <p className={!serverState.status.ok ? "ErrorMsg" : ""}>
                                {serverState.status.msg}
                                </p>
                            )}
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </>                          
    )
}

HeaderProfile = ({ fromSideBar, setIsMenuOpen }) => {
  const { userData } = useSelector(({ User }) => ({
    userData: User.userData
  }));

  const [, setLightMode] = useContext(ThemeContext);

  const [anchorEl, setAnchorEl] = useState(null);
  const { t } = useTranslation();

  const dispatch = useDispatch();
  const styles = useStyles({ fromSideBar });
  const history = useHistory();

  const configsUser = {
    currency: getFromLocalStorage('currency'),
    language: i18n.language,
    theme: getFromLocalStorage('theme')
  };

  const { firstName, lastName, email } = userData || {};

  const [saveConfigs] = useMutation(saveUserConfigs, {
    variables: {
      user: {
        firstName,
        lastName,
        email,
        configs: configsUser
      },
      id: userData?._id
    }
  });

  const handleKeyDown = (e) => {
    e.persist();
    return !(e.type === 'keydown' && e.key !== 'Enter');
  };

  const handleClick = (e) => {
    handleKeyDown(e) && setAnchorEl(e.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  useEffect(() => {
    if (userData && userData.configs) {
      const { theme, language, currency } = userData.configs;

      setLightMode(theme === 'light');
      setToLocalStorage('theme', theme);

      i18n.changeLanguage(language);
      setToLocalStorage(LANGUAGE, language);

      setToLocalStorage('currency', currency);
      dispatch(changeCurrency(currency));
    }
  }, [userData]);

  const handleLogIn = () => {
    setIsMenuOpen(false);
    const pathName = history.location.pathname;
    const returnPath =
      (pathName === pathToRegister || pathName === pathToLogin ? pathToMain : pathName) +
      history.location.search;
    sessionStorage.setItem(RETURN_PAGE, returnPath);
    handleRedirect(pathToLogin);
  };

  const handleLogout = async () => {
    setAnchorEl(null);
    await saveConfigs();
    dispatch(logoutUser());
  };

  const handleRedirect = (link) => {
    dispatch(push(link));
    setAnchorEl(null);
  };

  const PROFILE_DATA = [
    {
      value: t('headerProfile.profile'),
      icon: <Settings />,
      clickHandler: () => {
        setIsMenuOpen(false);
        return handleRedirect(pathToProfile);
      }
    },
    {
      value: t('headerProfile.orderHistory'),
      icon: <History />,
      clickHandler: () => {
        setIsMenuOpen(false);
        return handleRedirect(pathToOrderHistory);
      }
    },
    {
      value: t('headerProfile.myCertificates'),
      icon: <GiftCertificatesIcon viewBox='0 -3 24 24' />,
      clickHandler: () => {
        setIsMenuOpen(false);
        return handleRedirect(pathToMyCertificates);
      }
    },
    {
      value: t('common.logOut'),
      icon: <ExitToAppIcon />,
      clickHandler: () => {
        setIsMenuOpen(false);
        return handleLogout();
      }
    }
  ];

  const mappedProfileList = PROFILE_DATA.map(({ value, icon, clickHandler }) => (
    <MenuItem key={value} onClick={clickHandler} disableGutters data-testid='menuItem'>
      {icon}
      {value}
    </MenuItem>
  ));

  return (
    <div className={styles.profile} data-cy='profile'>
      {userData ? (
        <Person onClick={handleClick} onKeyDown={handleClick} tabIndex={0} data-testid='iconIn' />
      ) : (
        <PersonOutlineOutlined
          onClick={handleLogIn}
          onKeyDown={handleLogIn}
          tabIndex={0}
          data-cy='iconOut'
        />
      )}
      <Menu
        data-testid='menu'
        className={styles.list}
        anchorEl={anchorEl}
        keepMounted
        elevation={0}
        getContentAnchorEl={null}
        anchorOrigin={{
          horizontal: 'right',
          vertical: 'bottom'
        }}
        transformOrigin={{
          horizontal: 'left',
          vertical: 'top'
        }}
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        {mappedProfileList}
      </Menu>
    </div>
  );
}