[CORL-1134] Site Moderators (#2995)

* feat: added server support for site moderators

* feat: added unscoped property to @auth directive

* feat: added frontend support for site moderator feature

* feat: added site moderator support to stream

* fix: linting

* fix: updated snapshots

src/core/client/ui/components/AbsoluteTime/AbsoluteTime.tsx

@@ -1,31 +1,24 @@
 import React, { FunctionComponent, useMemo } from "react";
 
-import { Typography, useUIContext } from "coral-ui/components";
+import { Typography } from "coral-ui/components";
+import { useDateTimeFormatter } from "coral-ui/hooks";
 import { PropTypesOf } from "coral-ui/types";
 
 interface Props {
   date: string;
   className?: string;
-  locales?: string[];
 }
 
-const AbsoluteTime: FunctionComponent<Props> = ({
-  date,
-  className,
-  locales: localesFromProps,
-}) => {
-  const { locales: localesFromContext } = useUIContext();
-  const locales = localesFromProps || localesFromContext || ["en-US"];
-  const formatted = useMemo(() => {
-    const formatter = new Intl.DateTimeFormat(locales, {
-      year: "numeric",
-      month: "long",
-      day: "numeric",
-      hour: "numeric",
-      minute: "2-digit",
-    });
-    return formatter.format(new Date(date));
-  }, [locales, date]);
+const AbsoluteTime: FunctionComponent<Props> = ({ date, className }) => {
+  const formatter = useDateTimeFormatter({
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  });
+  const formatted = useMemo(() => formatter(date), [formatter, date]);
+
   return (
     <Typography className={className} variant="timestamp">
       {formatted}

src/core/client/ui/components/v2/AbsoluteTime/AbsoluteTime.tsx

@@ -1,31 +1,24 @@
 import React, { FunctionComponent, useMemo } from "react";
 
-import { useUIContext } from "coral-ui/components/v2";
+import { useDateTimeFormatter } from "coral-ui/hooks";
 import { PropTypesOf } from "coral-ui/types";
 
 interface Props {
   date: string;
   className?: string;
-  locales?: string[];
 }
 
-const AbsoluteTime: FunctionComponent<Props> = ({
-  date,
-  className,
-  locales: localesFromProps,
-}) => {
-  const { locales: localesFromContext } = useUIContext();
-  const locales = localesFromProps || localesFromContext || ["en-US"];
-  const formatted = useMemo(() => {
-    const formatter = new Intl.DateTimeFormat(locales, {
-      year: "numeric",
-      month: "long",
-      day: "numeric",
-      hour: "numeric",
-      minute: "2-digit",
-    });
-    return formatter.format(new Date(date));
-  }, [locales, date]);
+const AbsoluteTime: FunctionComponent<Props> = ({ date, className }) => {
+  const formatter = useDateTimeFormatter({
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  });
+
+  const formatted = useMemo(() => formatter(date), [formatter, date]);
+
   return <span className={className}>{formatted}</span>;
 };
 

src/core/client/ui/components/v2/Popover/Popover.tsx

@@ -40,7 +40,13 @@ interface ChildrenRenderProps {
 }
 
 interface PopoverProps {
-  body: (props: BodyRenderProps) => React.ReactNode | React.ReactElement<any>;
+  /**
+   * body supports render props from the body or a react node itself.
+   */
+  body:
+    | ((props: BodyRenderProps) => React.ReactNode | React.ReactElement<any>)
+    | React.ReactNode
+    | React.ReactElement<any>;
   children: (props: ChildrenRenderProps) => React.ReactNode;
   description?: string;
   id: string;

src/core/client/ui/hooks/index.ts

@@ -2,4 +2,6 @@ export { default as useFocus } from "./useFocus";
 export { default as usePreventFocusLoss } from "./usePreventFocusLoss";
 export { default as useBlurOnEsc } from "./useBlurOnEsc";
 export { default as useComboBox } from "./useComboBox";
+export { default as useDateTimeFormat } from "./useDateTimeFormat";
+export { default as useDateTimeFormatter } from "./useDateTimeFormatter";
 export { default as useHotkey } from "./useHotkey";

src/core/client/ui/hooks/useDateTimeFormat.ts

@@ -0,0 +1,11 @@
+import { useMemo } from "react";
+
+import { useUIContext } from "coral-ui/components";
+
+export default function useDateTimeFormat(options: Intl.DateTimeFormatOptions) {
+  const { locales } = useUIContext();
+  return useMemo(() => new Intl.DateTimeFormat(locales, options), [
+    locales,
+    options,
+  ]);
+}

src/core/client/ui/hooks/useDateTimeFormatter.ts

@@ -0,0 +1,21 @@
+import { useCallback } from "react";
+
+import useDateTimeFormat from "./useDateTimeFormat";
+
+export default function useDateTimeFormatter(
+  options: Intl.DateTimeFormatOptions
+) {
+  const formatter = useDateTimeFormat(options);
+  const format = useCallback(
+    (date: string | number | Date) => {
+      if (typeof date === "string" || typeof date === "number") {
+        return formatter.format(new Date(date));
+      }
+
+      return formatter.format(date);
+    },
+    [formatter]
+  );
+
+  return format;
+}