-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(anni): wip interface server data fetching
- Loading branch information
1 parent
7dba73c
commit 9b12a58
Showing
6 changed files
with
130 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import axios from 'axios'; | ||
| import { NextApiHandler } from 'next'; | ||
|
|
||
| export type FetchDate = Date | null; | ||
| export interface LastUpdatesDto { | ||
| medications: FetchDate; | ||
| guidelines: FetchDate; | ||
| } | ||
|
|
||
| const serverUpdateApi: NextApiHandler = async (req, res) => { | ||
| const { method } = req; | ||
| try { | ||
| switch (method) { | ||
| case 'GET': | ||
| console.log('fetching dates'); | ||
| const [medicationsRes, guidelinesRes] = await Promise.all([ | ||
| axios.get<FetchDate>( | ||
| `http://${process.env.AS_API}/medications/last_update`, | ||
| ), | ||
| axios.get<FetchDate>( | ||
| `http://${process.env.AS_API}/guidelines/last_update`, | ||
| ), | ||
| ]); | ||
| const lastUpdates: LastUpdatesDto = { | ||
| medications: medicationsRes.data, | ||
| guidelines: guidelinesRes.data, | ||
| }; | ||
| console.log(lastUpdates); | ||
| res.status(200).json(lastUpdates); | ||
| return; | ||
| default: | ||
| throw new Error(); | ||
| } | ||
| } catch { | ||
| res.status(400).json({ success: false }); | ||
| } | ||
| }; | ||
|
|
||
| export default serverUpdateApi; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,78 @@ | ||
| import { CloudDownloadIcon, ExclamationIcon } from '@heroicons/react/solid'; | ||
| import axios from 'axios'; | ||
| import dayjs from 'dayjs'; | ||
| import LocalizedFormat from 'dayjs/plugin/localizedFormat'; | ||
| import RelativeTime from 'dayjs/plugin/relativeTime'; | ||
| import useSWR from 'swr'; | ||
|
|
||
| import PageHeading from '../components/common/PageHeading'; | ||
| import WithIcon from '../components/common/WithIcon'; | ||
| import { LastUpdatesDto } from './api/server-update'; | ||
|
|
||
| dayjs.extend(RelativeTime); | ||
| dayjs.extend(LocalizedFormat); | ||
|
|
||
| const fetchLastUpdateDates = async (url: string) => | ||
| await axios.get<LastUpdatesDto>(url); | ||
|
|
||
| const dateDisplay = ( | ||
| data: Awaited<ReturnType<typeof fetchLastUpdateDates>> | undefined, | ||
| key: keyof LastUpdatesDto, | ||
| ) => { | ||
| if (!data) return null; | ||
| const date = data.data[key]; | ||
| if (!date) return <WithIcon icon={ExclamationIcon}>missing</WithIcon>; | ||
| return ( | ||
| <p | ||
| data-bs-toggle="tooltip" | ||
| data-bs-placement="bottom" | ||
| title={dayjs(date).format('lll')} | ||
| > | ||
| Last updated {dayjs(date).fromNow()} | ||
| </p> | ||
| ); | ||
| }; | ||
|
|
||
| const Home = () => { | ||
| return <div>TODO</div>; | ||
| const { data } = useSWR('/api/server-update', fetchLastUpdateDates); | ||
| return ( | ||
| <> | ||
| <PageHeading title="PharMe's Annotation Interface"> | ||
| Welcome to the curator's interface to the{' '} | ||
| <span className="italic">Annotation Server</span>: PharMe's | ||
| hub for all user-agnostic data. PharMe uses{' '} | ||
| <span className="italic">external data</span> from{' '} | ||
| <a className="underline" href="https://go.drugbank.com"> | ||
| DrugBank | ||
| </a>{' '} | ||
| and{' '} | ||
| <a className="underline" href="https://cpicpgx.org"> | ||
| CPIC | ||
| </a>{' '} | ||
| as well as <span className="italic">internal data</span> defined | ||
| by{' '} | ||
| <a className="underline" href="https://cpicpgx.org"> | ||
| Annotations | ||
| </a> | ||
| . | ||
| </PageHeading> | ||
|
|
||
| <div className="pb-2 border-b border-black border-opacity-10 flex justify-between"> | ||
| <h2 className="font-bold">External data status</h2> | ||
| <WithIcon as="button" icon={CloudDownloadIcon} reverse={true}> | ||
| Fetch new data | ||
| </WithIcon> | ||
| </div> | ||
| <div className="p-2 flex justify-between"> | ||
| <p>DrugBank: drug names, synonyms, descriptions</p> | ||
| {dateDisplay(data, 'medications')} | ||
| </div> | ||
| <div className="p-2 flex justify-between"> | ||
| <p>CPIC: PGx guidelines</p> | ||
| {dateDisplay(data, 'guidelines')} | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default Home; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters