hooks#useProvider JavaScript Examples
The following examples show how to use
hooks#useProvider.
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 apps with GNU Affero General Public License v3.0 | 6 votes |
|
Setup = ({ route }) => {
const provider = useProvider();
const router = useRouter();
useEffectOnce(async () => {
if (provider.data !== null && provider.data.submittedAt)
router.navigateToUrl('/provider/schedule');
if (provider.keyPairs === null) await provider.initialize();
if (Object.keys(route.hashParams).length > 0)
provider.data = route.hashParams; // pre-filled data
});
return (
<React.Fragment>
<Wizard
route={route}
page={route.handler.props.page || 'hi'}
status={route.handler.props.status}
/>
</React.Fragment>
);
}
Example #2
| Source File: index.jsx From apps with GNU Affero General Public License v3.0 | 5 votes |
|
Dashboard = ({
route: {
handler: {
props: { tab, action, secondaryAction, id },
},
},
route,
}) => {
const provider = useProvider();
useInterval(async () => {
const response = await provider.checkData().get();
}, 10000);
let content;
switch (tab) {
case 'settings':
content = <Settings key="settings" action={action} />;
break;
case 'schedule':
content = (
<Schedule
action={action}
route={route}
secondaryAction={secondaryAction}
id={id}
key="schedule"
/>
);
break;
}
let invalidKeyMessage;
if (provider.verifiedData === null) {
invalidKeyMessage = (
<Message waiting type="warning">
<T t={t} k="invalid-key" />
</Message>
);
}
return (
<CenteredCard size="fullwidth" tight>
<CardHeader>
<Tabs>
<Tab active={tab === 'schedule'} href="/provider/schedule">
<T t={t} k="schedule.title" />
</Tab>
<Tab active={tab === 'settings'} href="/provider/settings">
<T t={t} k="settings.title" />
</Tab>
<Tab
last
icon={<Icon icon="sign-out-alt" />}
active={tab === 'log-out'}
href="/provider/settings/logout"
>
<T t={t} k="log-out" />
</Tab>
</Tabs>
</CardHeader>
{invalidKeyMessage}
{content}
</CenteredCard>
);
}
Example #3
| Source File: schedule.jsx From apps with GNU Affero General Public License v3.0 | 4 votes |
|
Schedule = ({ action, secondaryAction, id, route }) => {
const [view, setView] = useState('calendar');
const [lastUpdated, setLastUpdated] = useState(new Date().toLocaleString());
const provider = useProvider();
let startDate;
if (action !== undefined) {
const result = /^(\d{4})-(\d{2})-(\d{2})$/.exec(action);
if (result) {
const [, year, month, day] = result;
startDate = getMonday(
new Date(Number(year), Number(month) - 1, Number(day))
);
}
}
if (startDate === undefined)
startDate = getMonday(new Date().setHours(0, 0, 0, 0));
useEffectOnce(async () => {
const endDate = new Date(startDate);
endDate.setUTCDate(endDate.getUTCDate() + 7);
// we load all the necessary data
const response = await provider
.appointments()
.get({ from: startDate.toISOString(), to: endDate.toISOString() });
console.log(response);
});
if (action === undefined) {
action = formatDate(startDate);
}
const dateString = formatDate(startDate);
const render = () => {
let newAppointmentModal;
let content;
const appointments = provider.appointments().result().data;
switch (view) {
case 'calendar':
content = (
<WeekCalendar
startDate={startDate}
action={action}
secondaryAction={secondaryAction}
id={id}
appointments={appointments}
/>
);
break;
case 'booking-list':
content = (
<AppointmentsList
startDate={startDate}
id={id}
action={action}
secondaryAction={secondaryAction}
appointments={appointments}
/>
);
break;
}
if (secondaryAction === 'new' || secondaryAction === 'edit')
newAppointmentModal = (
<NewAppointment
route={route}
appointments={appointments}
action={action}
id={id}
/>
);
return (
<div className="kip-schedule">
<CardContent>
<div className="kip-non-printable">
{newAppointmentModal}
<Button href={`/provider/schedule/${dateString}/new`}>
<T t={t} k="schedule.appointment.add" />
</Button>
<DropdownMenu
title={
<>
<Icon icon="calendar" />{' '}
<T t={t} k={`schedule.${view}`} />
</>
}
>
<DropdownMenuItem
icon="calendar"
onClick={() => setView('calendar')}
>
<T t={t} k={`schedule.calendar`} />
</DropdownMenuItem>
<DropdownMenuItem
icon="list"
onClick={() => setView('booking-list')}
>
<T t={t} k={`schedule.booking-list`} />
</DropdownMenuItem>
</DropdownMenu>
<hr />
</div>
{content}
</CardContent>
<Message type="info" waiting>
<T t={t} k="schedule.updating" lastUpdated={lastUpdated} />
</Message>
</div>
);
};
// we wait until all resources have been loaded before we display the form
return (
<WithLoader
resources={[provider.appointments().result()]}
renderLoaded={render}
/>
);
}
Example #4
| Source File: provider-data.jsx From apps with GNU Affero General Public License v3.0 | 4 votes |
|
BaseProviderData = ({
embedded,
form: { set, data, error, valid, reset },
}) => {
const [modified, setModified] = useState(false);
const router = useRouter();
const provider = useProvider();
const onSubmit = () => {
if (!valid) return;
provider.data = data;
// we redirect to the 'verify' step
router.navigateToUrl(`/provider/setup/verify`);
};
useEffectOnce(() => {
reset(provider.data || {});
setModified(false);
});
const setAndMarkModified = (key, value) => {
setModified(true);
set(key, value);
};
const controls = (
<React.Fragment>
<ErrorFor error={error} field="name" />
<RetractingLabelInput
value={data.name || ''}
onChange={(value) => setAndMarkModified('name', value)}
label={<T t={t} k="provider-data.name" />}
/>
<ErrorFor error={error} field="street" />
<RetractingLabelInput
value={data.street || ''}
onChange={(value) => setAndMarkModified('street', value)}
label={<T t={t} k="provider-data.street" />}
/>
<ErrorFor error={error} field="zipCode" />
<RetractingLabelInput
value={data.zipCode || ''}
onChange={(value) => setAndMarkModified('zipCode', value)}
label={<T t={t} k="provider-data.zip-code" />}
/>
<ErrorFor error={error} field="city" />
<RetractingLabelInput
value={data.city || ''}
onChange={(value) => setAndMarkModified('city', value)}
label={<T t={t} k="provider-data.city" />}
/>
<ErrorFor error={error} field="website" />
<RetractingLabelInput
value={data.website || ''}
onChange={(value) => setAndMarkModified('website', value)}
label={<T t={t} k="provider-data.website" />}
/>
<ErrorFor error={error} field="description" />
<label htmlFor="description">
<T t={t} k="provider-data.description" />
</label>
<textarea
id="description"
className="bulma-textarea"
value={data.description || ''}
onChange={(e) =>
setAndMarkModified('description', e.target.value)
}
/>
<h3>
<T t={t} k="provider-data.for-mediator" />
</h3>
<ErrorFor error={error} field="phone" />
<RetractingLabelInput
value={data.phone || ''}
onChange={(value) => setAndMarkModified('phone', value)}
label={<T t={t} k="provider-data.phone" />}
/>
<ErrorFor error={error} field="email" />
<RetractingLabelInput
value={data.email || ''}
onChange={(value) => setAndMarkModified('email', value)}
label={<T t={t} k="provider-data.email" />}
/>
<hr />
<ErrorFor error={error} field="code" />
<RetractingLabelInput
value={data.code || ''}
onChange={(value) => setAndMarkModified('code', value)}
description={
<T t={t} k="provider-data.access-code.description" />
}
label={<T t={t} k="provider-data.access-code.label" />}
/>
<hr />
<ul className="kip-properties">
<li className="kip-property">
<Switch
id="accessible"
checked={
data.accessible !== undefined
? data.accessible
: false
}
onChange={(value) =>
setAndMarkModified('accessible', value)
}
>
</Switch>
<label htmlFor="accessible">
<T t={t} k="provider-data.accessible" />
</label>
</li>
</ul>
</React.Fragment>
);
return (
<React.Fragment>
<div className="kip-provider-data">
<FormComponent onSubmit={onSubmit}>
<FieldSet>
<CardContent>{controls}</CardContent>
<CardFooter>
<SubmitField
disabled={!valid || embedded & !modified}
type={'success'}
onClick={onSubmit}
title={
<T
t={t}
k="provider-data.save-and-continue"
/>
}
/>
</CardFooter>
</FieldSet>
</FormComponent>
</div>
</React.Fragment>
);
}
Example #5
| Source File: verify.jsx From apps with GNU Affero General Public License v3.0 | 4 votes |
|
ProviderData = ({ changeHref, verified }) => {
const provider = useProvider({ name: 'main', attributes: ['data'] });
let data;
if (verified) {
if (provider.data === null)
return (
<p>
<T t={t} k="provider-data.not-verified-yet" />
</p>
);
data = provider.verifiedData;
} else data = provider.data;
return (
<>
<div
className={classNames('kip-provider-data', 'kip-is-box', {
'kip-is-verified': verified,
})}
>
<ul>
<li>
<span>
<T t={t} k="provider-data.name" />
</span>{' '}
{data.name}
</li>
<li>
<span>
<T t={t} k="provider-data.street" />
</span>{' '}
{data.street}
</li>
<li>
<span>
<T t={t} k="provider-data.zip-code" /> &
<T t={t} k="provider-data.city" />
</span>{' '}
{data.zipCode} -
{data.city}
</li>
<li>
<span>
<T t={t} k="provider-data.website" />
</span>{' '}
{data.website}
</li>
<li>
<span>
<T t={t} k="provider-data.description" />
</span>{' '}
{data.description || (
<T t={t} k="provider-data.not-given" />
)}
</li>
<li>
<span>
<T t={t} k="provider-data.phone" />
</span>{' '}
{data.phone || <T t={t} k="provider-data.not-given" />}
</li>
<li>
<span>
<T t={t} k="provider-data.email" />
</span>{' '}
{data.email || <T t={t} k="provider-data.not-given" />}
</li>
<li>
<span>
<T t={t} k="provider-data.access-code.label" />
</span>{' '}
{data.code || <T t={t} k="provider-data.not-given" />}
</li>
</ul>
<hr />
<ul className="kip-properties">
<li className="kip-property">
<Switch
id="accessible"
checked={data.accessible || false}
onChange={() => false}
>
</Switch>
<label htmlFor="accessible">
<T t={t} k="provider-data.accessible" />
</label>
</li>
</ul>
</div>
<div className="kip-provider-data-links">
<A
className="bulma-button bulma-is-small"
href={changeHref || '/provider/setup/enter-provider-data'}
>
<T t={t} k="provider-data.change" />
</A>
</div>
</>
);
}
Example #6
| Source File: verify.jsx From apps with GNU Affero General Public License v3.0 | 4 votes |
|
Verify = () => {
const router = useRouter();
const settings = useSettings();
const provider = useProvider();
const [submitting, setSubmitting] = useState(false);
const [response, setResponse] = useState(null);
const submit = async () => {
if (submitting) return;
setSubmitting(true);
const response = await provider.storeData();
setSubmitting(false);
setResponse(response);
if (response.status === Status.Succeeded)
router.navigateToUrl('/provider/setup/store-secrets');
};
let failedMessage;
let failed;
if (response && response.status === Status.Failed) {
console.log(response);
failed = true;
if (
response.error.error !== undefined &&
response.error.error.code === 401
) {
failedMessage = (
<Message type="danger">
<T t={t} k="wizard.failed.invalid-code" />
</Message>
);
}
}
if (failed && !failedMessage)
failedMessage = (
<Message type="danger">
<T t={t} k="wizard.failed.notice" />
</Message>
);
return (
<>
<CardContent>
{failedMessage}
<p className="kip-verify-notice">
<T
t={t}
k="verify.text"
link={
<A
key="letUsKnow"
external
href={settings.get('supportEmail')}
>
<T t={t} k="wizard.letUsKnow" key="letUsKnow" />
</A>
}
/>
</p>
<ProviderData />
</CardContent>
<CardFooter>
<Button
type={failed ? 'danger' : 'success'}
disabled={submitting}
onClick={submit}
>
<T
t={t}
k={
failed
? 'wizard.failed.title'
: submitting
? 'wizard.please-wait'
: 'wizard.continue'
}
/>
</Button>
</CardFooter>
</>
);
}
