hooks#useFormatDate JavaScript Examples
The following examples show how to use
hooks#useFormatDate.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.jsx From react-firebase-admin with MIT License | 4 votes |
|
UserForm = ({ isEditing, isProfile, user, onSubmitHandler, schema }) => {
const { loading, success } = useSelector(
(state) => ({
loading: state.users.loading,
success: state.users.success,
}),
shallowEqual
);
const dispatch = useDispatch();
const { register, handleSubmit, errors, control, watch, setValue } = useForm({
defaultValues: { ...user },
resolver: yupResolver(schema),
});
useEffect(() => {
if (success) {
setValue('file', null);
}
return () => dispatch(usersCleanUp());
}, [dispatch, success, setValue]);
const invalidEmailMessage = useFormatMessage('UserForm.invalidEmail');
const imagePreviewUrl =
watch('file') && watch('file')[0]
? URL.createObjectURL(watch('file')[0])
: user.logoUrl;
const goBackMessage = useFormatMessage('UserForm.goBack');
const pickAnotherFileMessage = useFormatMessage('UserForm.pickAnotherFile');
const pickFileMessage = useFormatMessage('UserForm.pickFile');
const emailMessage = useFormatMessage('UserForm.email');
const adminMessage = useFormatMessage('UserForm.admin');
return (
<>
<div className="tile is-ancestor">
<div className="tile is-parent">
<div className="card tile is-child">
<header className="card-header">
<p className="card-header-title">
<span className="icon">
<i className="mdi mdi-account-edit default" />
</span>
{useFormatMessage('UserForm.userInfo')}
</p>
</header>
<div className="card-content">
<form onSubmit={handleSubmit(onSubmitHandler)}>
{isEditing ? (
<div className="field is-horizontal">
<div className="field-label is-normal">
<label className="label">{emailMessage}</label>
</div>
<div className="field-body">
<div className="field">
<div className="control">
<input
type="text"
readOnly="readOnly"
className="input is-static"
name="email"
ref={register}
/>
</div>
</div>
</div>
</div>
) : (
<>
<div className="field is-horizontal">
<div className="field-label is-normal">
<label className="label">{emailMessage}</label>
</div>
<div className="field-body">
<div className="field">
<div className="control">
<input
className={classNames(`input`, {
'is-danger': errors.email,
})}
ref={register}
name="email"
/>
</div>
</div>
</div>
</div>
{errors.email && (
<div className="field is-horizontal">
<div className="field-label is-normal" />
<div className="field-body">
<ErrorMessage text={invalidEmailMessage} />
</div>
</div>
)}
</>
)}
<div className="field is-horizontal">
<div className="field-label is-normal">
<label className="label">
{useFormatMessage('UserForm.name')}
</label>
</div>
<div className="field-body">
<div className="field">
<div className="control">
<input
name="name"
id="name"
className={classNames('input', {
'is-danger': errors.name,
})}
ref={register}
type="text"
/>
</div>
</div>
</div>
</div>
{errors.name && (
<div className="field is-horizontal">
<div className="field-label is-normal" />
<div className="field-body">
<ErrorMessage />
</div>
</div>
)}
<div className="field is-horizontal">
<div className="field-label is-normal">
<label className="label">
{useFormatMessage('UserForm.location')}
</label>
</div>
<div className="field-body">
<div className="field">
<div className="control">
<input
className="input"
type="text"
ref={register}
name="location"
/>
</div>
</div>
</div>
</div>
{!isProfile && (
<div className="field has-check is-horizontal">
<div className="field-label">
<label className="label">{adminMessage}</label>
</div>
<div className="field-body">
<div className="field">
<div className="field">
<div className="control">
<label className="b-checkbox checkbox">
<input
type="checkbox"
name="isAdmin"
ref={register}
/>
<span className="check is-primary" />
</label>
</div>
</div>
</div>
</div>
</div>
)}
<div className="field is-horizontal">
<div className="field-label is-normal">
<label className="label">
{useFormatMessage('UserForm.created')}
</label>
</div>
<div className="field-body">
<div className="field">
<Controller
control={control}
name="createdAt"
render={({ onChange, name, value }) => (
<DatePicker
name={name}
onChange={onChange}
date={new Date(value)}
/>
)}
/>
</div>
</div>
</div>
<hr />
<div className="field is-horizontal">
<div className="field-label is-normal">
<label className="label">
{useFormatMessage('UserForm.logo')}
</label>
</div>
<div className="field-body">
<div className="field">
<div className="file has-name">
<label className="file-label">
<input
className="file-input"
type="file"
name="file"
ref={register}
accept="image/*"
/>
<span className="file-cta">
<span className="file-icon">
<i className="mdi mdi-upload" />
</span>
<span className="file-label">
{watch('file') && watch('file').file
? pickAnotherFileMessage
: pickFileMessage}
</span>
</span>
<span className="file-name">
{watch('file') && watch('file')[0]?.name}
</span>
</label>
</div>
</div>
</div>
</div>
<hr />
<div className="field is-horizontal">
<div className="field-label" />
<div className="field-body">
<div className="field">
<div className="field is-grouped">
<div className="control">
<button
type="submit"
className={`button is-primary ${
loading && 'is-loading'
}`}
>
<span>{useFormatMessage('UserForm.submit')}</span>
</button>
</div>
{!isProfile && (
<Link to={paths.USERS} className="button">
{goBackMessage}
</Link>
)}
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div className="tile is-parent preview">
<div className="card tile is-child">
<header className="card-header">
<p className="card-header-title">
<span className="icon">
<i className="mdi mdi-account default" />
</span>
{useFormatMessage('UserForm.userPreview')}
</p>
</header>
<div className="card-content">
{imagePreviewUrl && (
<>
<div className="is-user-avatar image has-max-width is-aligned-center">
<img
className="user-avatar"
src={imagePreviewUrl}
alt="User profile logo preview"
/>
</div>
<hr />
</>
)}
{!isEditing && (
<div className="field">
<label className="label">{emailMessage}</label>
<div className="control is-clearfix">
<input
data-testid="email"
type="text"
readOnly="readOnly"
className="input is-static"
value={watch('email')}
/>
</div>
</div>
)}
<div className="field">
<label className="label">
{useFormatMessage('UserForm.name')}
</label>
<div className="control is-clearfix">
<input
data-testid="name"
type="text"
readOnly="readOnly"
className="input is-static"
value={watch('name')}
/>
</div>
</div>
<div className="field">
<label className="label">
{useFormatMessage('UserForm.location')}
</label>
<div className="control is-clearfix">
<input
data-testid="location"
type="text"
readOnly="readOnly"
className="input is-static"
value={watch('location')}
/>
</div>
</div>
{!isProfile && (
<div className="field">
<label className="label">{adminMessage}</label>
<div className="control is-clearfix" data-testid="admin">
{watch('isAdmin') ? (
<span className="icon">
<i className="mdi mdi-check" />
</span>
) : (
<span className="icon">
<i className="mdi mdi-close" />
</span>
)}
</div>
</div>
)}
<div className="field">
<label className="label">
{useFormatMessage('UserForm.created')}
</label>
<div className="control is-clearfix" data-testid="date">
<p className="date">
{useFormatDate(watch('createdAt'), {
weekday: 'short',
year: 'numeric',
month: 'short',
day: 'numeric',
})}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</>
);
}
Example #2
| Source File: index.jsx From react-firebase-admin with MIT License | 4 votes |
|
Users = () => {
const { usersList, isAdmin, error, loading, deleted } = useSelector(
(state) => ({
usersList: state.users.data,
isAdmin: state.auth.userData.isAdmin,
error: state.users.error,
loading: state.users.loading,
deleted: state.users.deleted,
}),
shallowEqual
);
const [deleteModal, setDeleteModal] = useState({
userId: null,
isOpen: false,
});
const dispatch = useDispatch();
const [search, setSearch] = useState('');
useEffect(() => {
if (isAdmin) {
dispatch(fetchUsers());
}
return () => dispatch(usersCleanUp());
}, [dispatch, isAdmin]);
useEffect(() => {
if (deleted && !loading) {
setDeleteModal((prevState) => ({
userId: null,
isOpen: !prevState.isOpen,
}));
}
}, [deleted, loading]);
const redirect = !isAdmin && <Redirect to={paths.ROOT} />;
const onRemoveButtonClickHandler = (userId) => {
setDeleteModal((prevState) => ({
userId,
isOpen: !prevState.isOpen,
}));
};
const onCloseModalHandler = () => {
setDeleteModal({ userId: null, isOpen: false });
};
const onDeleteUserHandler = () => {
dispatch(deleteUser(deleteModal.userId));
};
const columns = [
{
Header: '',
accessor: 'logoUrl',
Cell: ({ row }) => (
<div className="image">
<img src={row.original.logoUrl} alt="" className="is-rounded" />
</div>
),
disableSortBy: true,
},
{
Header: useFormatMessage('Users.name'),
accessor: 'name',
},
{
Header: useFormatMessage('Users.email'),
accessor: 'email',
},
{
Header: useFormatMessage('Users.location'),
accessor: 'location',
},
{
Header: useFormatMessage('Users.admin'),
accessor: 'isAdmin',
Cell: ({ row }) => (
<small className="has-text-grey is-abbr-like">
{row.original.isAdmin ? (
<span className="icon">
<i className="mdi mdi-check" />
</span>
) : (
<span className="icon">
<i className="mdi mdi-close" />
</span>
)}
</small>
),
},
{
Header: useFormatMessage('Users.created'),
accessor: 'created',
Cell: ({ row }) => (
<small className="has-text-grey is-abbr-like">
{useFormatDate(row.original.createdAt, {
weekday: 'short',
year: 'numeric',
month: 'short',
day: 'numeric',
})}
</small>
),
},
{
Header: '',
id: 'actions',
accessor: 'actions',
Cell: ({ row }) => (
<>
{!row.original.isAdmin && (
<div className="buttons is-right">
<Link
to={`/users/${row.original.id}`}
className="button is-small is-primary"
>
<span className="icon is-small">
<i className="mdi mdi-account-edit" />
</span>
</Link>
<button
type="button"
className="button is-small is-danger"
onClick={() => onRemoveButtonClickHandler(row.original.id)}
>
<span className="icon is-small">
<i className="mdi mdi-trash-can" />
</span>
</button>
</div>
)}
</>
),
disableSortBy: true,
},
];
const data = search
? usersList.filter((el) => {
const clonedElem = { ...el };
delete clonedElem.id;
delete clonedElem.isAdmin;
delete clonedElem.logoUrl;
return Object.values(clonedElem).some((field) =>
field.toLowerCase().includes(search.toLowerCase())
);
})
: usersList;
const deleteMessage = useFormatMessage('Users.delete');
const confirmMessage = useFormatMessage('Users.confirm');
const permDeleteMessage = useFormatMessage('Users.permDelete');
const cancelMessage = useFormatMessage('Users.cancel');
return (
<>
{redirect}
{deleteModal.isOpen && (
<ConfirmationModal
isActive={deleteModal.isOpen}
isLoading={loading}
confirmButtonMessage={deleteMessage}
title={confirmMessage}
body={permDeleteMessage}
cancelButtonMessage={cancelMessage}
onConfirmation={onDeleteUserHandler}
onCancel={onCloseModalHandler}
/>
)}
<section className="hero is-hero-bar">
<div className="hero-body">
<div className="level">
<div className="level-left">
<div className="level-item">
<h1 className="title">{useFormatMessage('Users.users')}</h1>
</div>
</div>
<div className="level-right">
<div className="level-item">
<Link to={paths.ADD_USER} className="button">
{useFormatMessage('Users.newUser')}
</Link>
</div>
</div>
</div>
</div>
</section>
<section className="section is-main-section">
<div className="card has-table has-mobile-sort-spaced">
<header className="card-header">
<p className={classNames('card-header-title', classes.tableHeader)}>
<span>{useFormatMessage('Users.search')}</span>
<input
type="text"
className="input"
value={search}
onChange={(e) => setSearch(e.target.value)}
/>
</p>
</header>
<div className="b-table">
{loading ? <ClipLoader /> : <Table columns={columns} data={data} />}
{error && 'Show error'}
</div>
</div>
</section>
</>
);
}
