ui: add conference contribution link to detail page

* ref: cern-sis/issues-inspire#443

ui/src/conferences/components/ConferenceContributionLink.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { LoginOutlined } from '@ant-design/icons';
+import { Link } from 'react-router-dom';
+
+import IconText from '../../common/components/IconText';
+import UserAction from '../../common/components/UserAction';
+import { LITERATURE } from '../../common/routes';
+import { pluralizeUnlessSingle } from '../../common/utils';
+import { getContributionsQueryString } from '../utils';
+
+const ConferenceContributionLink = ({
+  recordId,
+  contributionsCount,
+}: {
+  recordId: string;
+  contributionsCount: number;
+}) => {
+  return (
+    <UserAction>
+      <Link
+        to={`${LITERATURE}?q=${getContributionsQueryString(
+          recordId
+        )}&doc_type=conference%20paper`}
+      >
+        <IconText
+          text={`${contributionsCount} ${pluralizeUnlessSingle(
+            'contribution',
+            contributionsCount
+          )}`}
+          icon={<LoginOutlined />}
+        />
+      </Link>
+    </UserAction>
+  );
+};
+
+export default ConferenceContributionLink;

ui/src/conferences/components/ConferenceDates.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import moment from 'moment';
+
+import { hasDayMonthAndYear, hasMonthAndYear } from '../../common/utils';
+
+function getDisplayFormatForDateString(date: any) {
+  if (hasDayMonthAndYear(date)) {
+    return 'D MMMM YYYY';
+  }
+
+  if (hasMonthAndYear(date)) {
+    return 'MMMM YYYY';
+  }
+
+  return 'YYYY';
+}
+
+function ConferenceDates({
+  openingDate,
+  closingDate,
+}: {
+  openingDate: string;
+  closingDate?: string;
+}) {
+  if (!openingDate) {
+    return null;
+  }
+
+  const displayFormat = getDisplayFormatForDateString(openingDate);
+  const openingMoment = moment(openingDate);
+  if (!closingDate) {
+    return <>{openingMoment.format(displayFormat)}</>;
+  }
+
+  const closingMoment = moment(closingDate);
+
+  if (openingMoment.isSame(closingMoment)) {
+    return <>{openingMoment.format(displayFormat)}</>;
+  }
+
+  if (openingMoment.isSame(closingMoment, 'month')) {
+    if (hasDayMonthAndYear(openingDate)) {
+      return (
+        <>{`${openingMoment.format('D')}-${closingMoment.format(
+          displayFormat
+        )}`}</>
+      );
+    }
+    return <>{openingMoment.format(displayFormat)}</>;
+  }
+
+  if (openingMoment.isSame(closingMoment, 'year')) {
+    if (hasDayMonthAndYear(openingDate)) {
+      return (
+        <>{`${openingMoment.format('D MMMM')}-${closingMoment.format(
+          displayFormat
+        )}`}</>
+      );
+    }
+
+    if (hasMonthAndYear(openingDate)) {
+      return (
+        <>{`${openingMoment.format('MMMM')}-${closingMoment.format(
+          displayFormat
+        )}`}</>
+      );
+    }
+    return <>{openingMoment.format(displayFormat)}</>;
+  }
+
+  return (
+    <>{`${openingMoment.format(displayFormat)}-${closingMoment.format(
+      displayFormat
+    )}`}</>
+  );
+}
+
+export default ConferenceDates;