hooks#useMediator JavaScript Examples
The following examples show how to use
hooks#useMediator.
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 | 5 votes |
|
UploadKeyPairsModal = () => {
const mediator = useMediator();
const [invalidFile, setInvalidFile] = useState(false);
const readFile = (e) => {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = function (e) {
const json = JSON.parse(e.target.result);
if (
json.signing === undefined ||
json.encryption === undefined ||
json.provider === undefined
)
setInvalidFile(true);
else mediator.keyPairs = json;
};
reader.readAsBinaryString(file);
};
let notice;
if (invalidFile)
notice = (
<Message type="danger">
<T t={t} k="upload-key-pairs.invalid-file" />
</Message>
);
else notice = <T t={t} k="upload-key-pairs.notice" />;
const footer = (
<Form>
<FieldSet>
<label htmlFor="file-upload" className="custom-file-upload">
<T t={t} k="upload-key-pairs.input" />
<input
id="file-upload"
className="bulma-input"
type="file"
onChange={(e) => readFile(e)}
/>
</label>
</FieldSet>
</Form>
);
return (
<Modal
footer={footer}
className="kip-upload-key-pairs"
title={<T t={t} k="upload-key-pairs.title" />}
>
{notice}
</Modal>
);
}
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 },
},
},
}) => {
const settings = useSettings();
const mediator = useMediator();
let content, modal;
if (mediator.keyPairs === null) {
modal = <UploadKeyPairsModal />;
}
if (mediator.keyPairs !== null) {
switch (tab) {
case 'settings':
content = (
<Settings
action={action}
secondaryAction={secondaryAction}
id={id}
/>
);
break;
case 'providers':
content = <Providers action={action} id={secondaryAction} />;
break;
case 'stats':
content = (
<Stats
action={action}
secondaryAction={secondaryAction}
id={id}
/>
);
break;
}
}
let invalidKeyMessage;
// to do: implement validation flow
/*
if (mediator.validKeyPairs !== undefined && validKeyPairs.valid === false) {
invalidKeyMessage = (
<Message type="danger">
<T t={t} k="invalidKey" />
</Message>
);
}
*/
return (
<CenteredCard size="fullwidth" tight>
<CardHeader>
<Tabs>
<Tab
active={tab === 'providers'}
href="/mediator/providers"
>
<T t={t} k="providers.title" />
</Tab>
<Tab active={tab === 'stats'} href="/mediator/stats">
<T t={t} k="stats.title" />
</Tab>
<Tab active={tab === 'settings'} href="/mediator/settings">
<T t={t} k="settings.title" />
</Tab>
</Tabs>
</CardHeader>
{modal}
{content}
</CenteredCard>
);
}
Example #3
| Source File: providers.jsx From apps with GNU Affero General Public License v3.0 | 4 votes |
|
Providers = ({ action, id }) => {
const router = useRouter();
const mediator = useMediator();
const [view, setView] = useState('pending');
useInterval(async () => {
await mediator.pendingProviders().get();
await mediator.verifiedProviders().get();
}, 10000);
const render = () => {
const providers =
view === 'pending'
? mediator.pendingProviders().result()
: mediator.verifiedProviders().result();
const showProvider = (i) => {
const id = buf2hex(b642buf(i));
router.navigateToUrl(`/mediator/providers/show/${id}`);
};
let modal;
const closeModal = () => router.navigateToUrl('/mediator/providers');
if (action === 'show' && id !== undefined) {
const base64Id = buf2b64(hex2buf(id));
const provider = providers.data.find(
(provider) => provider.data.publicKeys.signing === base64Id
);
const doConfirmProvider = async () => {
const result = await mediator.confirmProvider(provider);
console.log(result);
};
if (provider !== undefined)
modal = (
<Modal
title={<T t={t} k="providers.edit" />}
save={<T t={t} k="providers.confirm" />}
onSave={doConfirmProvider}
saveType="success"
onClose={closeModal}
onCancel={closeModal}
>
<div className="kip-provider-data">
<T t={t} k="providers.confirmText" />
<table className="bulma-table bulma-is-fullwidth bulma-is-striped">
<thead>
<tr>
<th>
<T t={t} k="provider-data.field" />
</th>
<th>
<T t={t} k="provider-data.value" />
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<T t={t} k="provider-data.name" />
</td>
<td>{provider.data.name}</td>
</tr>
<tr>
<td>
<T t={t} k="provider-data.street" />
</td>
<td>{provider.data.street}</td>
</tr>
<tr>
<td>
<T t={t} k="provider-data.city" />
</td>
<td>{provider.data.city}</td>
</tr>
<tr>
<td>
<T
t={t}
k="provider-data.zipCode"
/>
</td>
<td>{provider.data.zipCode}</td>
</tr>
<tr>
<td>
<T t={t} k="provider-data.email" />
</td>
<td>{provider.data.email}</td>
</tr>
<tr>
<td>
<T t={t} k="provider-data.phone" />
</td>
<td>{provider.data.phone}</td>
</tr>
<tr>
<td>
<T
t={t}
k="provider-data.description"
/>
</td>
<td>{provider.data.description}</td>
</tr>
</tbody>
</table>
</div>
</Modal>
);
}
const providerItems = providers.data
.sort(sortProviderByDate)
.map((provider) => (
<ListItem
onClick={() =>
showProvider(provider.data.publicKeys.signing)
}
key={provider.data.publicKeys.signing}
isCard
>
<ListColumn size="md">{provider.data.name}</ListColumn>
<ListColumn size="md">
{provider.data.street} ยท {provider.data.city}
</ListColumn>
</ListItem>
));
return (
<CardContent>
<div className="kip-providers">
{modal}
<DropdownMenu
title={
<F>
<Icon icon="check-circle" />
<T t={t} k={`providers.${view}`} />
</F>
}
>
<DropdownMenuItem
icon="check-circle"
onClick={() => setView('verified')}
>
<T t={t} k="providers.verified" />
</DropdownMenuItem>
<DropdownMenuItem
icon="exclamation-circle"
onClick={() => setView('pending')}
>
<T t={t} k="providers.pending" />
</DropdownMenuItem>
</DropdownMenu>
<List>
<ListHeader>
<ListColumn size="md">
<T t={t} k="providers.name" />
</ListColumn>
<ListColumn size="md">
<T t={t} k="providers.address" />
</ListColumn>
</ListHeader>
{providerItems}
</List>
</div>
</CardContent>
);
};
return (
<WithLoader
resources={[
mediator.pendingProviders().result(),
mediator.verifiedProviders().result(),
]}
renderLoaded={render}
/>
);
}
Example #4
| Source File: stats.jsx From apps with GNU Affero General Public License v3.0 | 4 votes |
|
Stats = () => {
const mediator = useMediator();
useEffectOnce(() => {
const params = {
filter: { zipCode: null },
id: 'queues',
type: 'hour',
from: todayPlusN(-1).toISOString(),
to: todayPlusN(1).toISOString(),
};
mediator.stats().get(params);
});
const renderLoaded = () => {
const stats = mediator.stats().result();
const summary = prepareOverallStats(stats);
let content;
if (summary.show === 0) {
content = (
<div className="bulma-column bulma-is-fullwidth-desktop">
<Card size="fullwidth">
<Message type="warning">
<T t={t} k="noData" />
</Message>
</Card>
</div>
);
} else {
content = (
<React.Fragment>
<div className="bulma-column bulma-is-full-desktop">
<Card size="fullwidth" flex>
<CardContent>
<T
key="span"
t={t}
k="dateSpan"
from={
<strong key="s1">
{new Date(
summary.from
).toLocaleString('en-US', opts)}
</strong>
}
to={
<strong key="s2">
{new Date(
summary.to
).toLocaleString('en-US', opts)}
</strong>
}
/>
</CardContent>
</Card>
</div>
<div className="bulma-column bulma-is-one-quarter-desktop">
<SummaryBox
open={summary.open}
booked={summary.booked}
active={summary.active}
/>
</div>
<div className="bulma-column bulma-is-three-quarters-desktop bulma-is-flex">
<Card size="fullwidth" flex>
<CardHeader>
<h2>
<T t={t} k="bookingRate" />
</h2>
</CardHeader>
<CardContent className="kip-cm-overview">
<BarChart
hash={stats.hash}
data={prepareHourlyStats(stats)}
/>
</CardContent>
</Card>
</div>
</React.Fragment>
);
}
return (
<CardContent>
<div className="bulma-columns bulma-is-multiline bulma-is-desktop">
{content}
</div>
</CardContent>
);
};
return (
<WithLoader
resources={[mediator.stats().result()]}
renderLoaded={renderLoaded}
/>
);
}
