Merge pull request #341 from shinyichen/SCIX-290-asso-articles

SCIX-290 Add related materials in abstract

src/api/resolver/index.ts

@@ -0,0 +1,2 @@
+export * from './resolver';
+export * from './types';

src/api/resolver/resolver.ts

@@ -0,0 +1,34 @@
+import api, { ApiRequestConfig } from '@api/api';
+import { ApiTargets } from '@api/models';
+import { ADSQuery } from '@api/types';
+import { QueryFunction, useQuery } from '@tanstack/react-query';
+import { IADSApiResolverParams, IADSApiResolverResponse } from './types';
+
+export enum ResolverKeys {
+  LINKS = 'resolver/links',
+}
+
+export const resolverKeys = {
+  links: (params: IADSApiResolverParams) => [params] as const,
+};
+
+export const useResolverQuery: ADSQuery<IADSApiResolverParams, IADSApiResolverResponse> = (params, options) => {
+  return useQuery({
+    queryKey: resolverKeys.links(params),
+    queryFn: fetchLinks,
+    meta: { params },
+    ...options,
+  });
+};
+
+export const fetchLinks: QueryFunction<IADSApiResolverResponse> = async ({ meta }) => {
+  const { params } = meta as { params: IADSApiResolverParams };
+
+  const config: ApiRequestConfig = {
+    method: 'GET',
+    url: `${ApiTargets.RESOLVER}/${params.bibcode}/${params.link_type}`,
+  };
+
+  const { data } = await api.request<IADSApiResolverResponse>(config);
+  return data;
+};

src/api/resolver/types.ts

@@ -0,0 +1,21 @@
+export interface IADSApiResolverParams {
+  bibcode: string;
+  link_type: string; // TODO: https://ui.adsabs.harvard.edu/help/api/api-docs.html#tag--resolver
+}
+
+export interface IADSApiResolverResponse {
+  action: string;
+  links: {
+    count: number;
+    link_type: string;
+    records: [
+      {
+        bibcode: string;
+        count: number;
+        title: string;
+        type: string;
+        url: string;
+      },
+    ];
+  };
+}

src/components/AbstractSources/AbstractSources.tsx

@@ -1,12 +1,24 @@
 import { IDocsEntity } from '@api';
-import { Button, HStack, Menu, MenuButton, MenuItem, MenuList, VStack } from '@chakra-ui/react';
+import {
+  Button,
+  HStack,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  VStack,
+  Text,
+  MenuGroup,
+  MenuDivider,
+} from '@chakra-ui/react';
 import { ChevronDownIcon, LockIcon, UnlockIcon } from '@chakra-ui/icons';
 import { SimpleLinkList } from '@components';
 import { ItemType } from '@components/Dropdown/types';
 import { useIsClient } from '@lib/useIsClient';
 import { HTMLAttributes, MouseEvent, MouseEventHandler, ReactElement, useMemo } from 'react';
 import { IDataProductSource, IFullTextSource, IRelatedWorks, processLinkData } from './linkGenerator';
 import { useStore } from '@store';
+import { useResolverQuery } from '@api/resolver';
 
 export interface IAbstractSourcesProps extends HTMLAttributes<HTMLDivElement> {
   doc?: IDocsEntity;
@@ -23,6 +35,21 @@ export const AbstractSources = ({ doc }: IAbstractSourcesProps): ReactElement =>
     return processLinkData(doc);
   }, [doc, linkServer, isClient, processLinkData]);
 
+  const { data: relatedWorksResp } = useResolverQuery(
+    { bibcode: doc.bibcode, link_type: 'associated' },
+    { enabled: !!doc?.bibcode },
+  );
+
+  const relatedWorks = useMemo(() => {
+    const res = [] as IRelatedWorks[];
+    if (relatedWorksResp && relatedWorksResp.links.count > 0) {
+      for (const link of relatedWorksResp.links.records) {
+        res.push({ url: link.url, name: link.title, description: link.type });
+      }
+    }
+    return res;
+  }, [relatedWorksResp]);
+
   if (!doc) {
     return <></>;
   }
@@ -37,7 +64,7 @@ export const AbstractSources = ({ doc }: IAbstractSourcesProps): ReactElement =>
       ) : (
         <HStack as="section" wrap="wrap" spacing={0.5} columnGap={1} rowGap={1} alignItems="start">
           <FullTextDropdown sources={sources.fullTextSources} />
-          <DataProductDropdown dataProducts={sources.dataProducts} relatedWorks={[]} />
+          <DataProductDropdown dataProducts={sources.dataProducts} relatedWorks={relatedWorks} />
           <Button hidden={true}>Add to library</Button>
         </HStack>
       )}
@@ -82,11 +109,11 @@ const FullTextDropdown = (props: IFullTextDropdownProps): ReactElement => {
 
   return (
     <>
-      {!isClient ? (
+      {!isClient && (
         <span>
           <SimpleLinkList items={fullSourceItems} minWidth="180px" label="Full text sources" showLabel={true} asRow />
         </span>
-      ) : null}
+      )}
       {isClient ? (
         <Menu>
           <MenuButton as={Button} rightIcon={<ChevronDownIcon />} isDisabled={fullSourceItems.length === 0}>
@@ -177,22 +204,40 @@ const DataProductDropdown = (props: IRelatedMaterialsDropdownProps): ReactElemen
           <SimpleLinkList items={items} minWidth="150px" label="Other Resources" showLabel={true} asRow />
         </span>
       ) : null}
-      {isClient ? (
+      {isClient && (
         <Menu>
-          <MenuButton as={Button} rightIcon={<ChevronDownIcon />} isDisabled={items.length === 0}>
+          <MenuButton
+            as={Button}
+            rightIcon={<ChevronDownIcon />}
+            isDisabled={dataProducts.length === 0 && relatedWorks.length === 0}
+          >
             Other Resources
           </MenuButton>
-          {items.length > 0 && (
-            <MenuList>
-              {items.map((item) => (
-                <MenuItem key={item.id} data-id={item.id} onClick={handleSelect} isDisabled={item.disabled}>
-                  {item.label}
-                </MenuItem>
-              ))}
-            </MenuList>
-          )}
+          <MenuList>
+            {dataProductItems.length > 0 && (
+              <MenuGroup title="Data Products">
+                {dataProductItems.map((item) => (
+                  <MenuItem key={item.id} data-id={item.id} onClick={handleSelect}>
+                    <Text ml={2}>{item.label}</Text>
+                  </MenuItem>
+                ))}
+              </MenuGroup>
+            )}
+            {relatedWorkItems.length > 0 && (
+              <>
+                {dataProductItems.length > 0 && <MenuDivider />}
+                <MenuGroup title="Related Materials">
+                  {relatedWorkItems.map((item) => (
+                    <MenuItem key={item.id} data-id={item.id} onClick={handleSelect}>
+                      <Text ml={2}>{item.label}</Text>
+                    </MenuItem>
+                  ))}
+                </MenuGroup>
+              </>
+            )}
+          </MenuList>
         </Menu>
-      ) : null}
+      )}
     </>
   );
 };