Prettify

Co-Authored-By: Tom Richards <[email protected]>
guardian · Aug 18, 2023 · 46861fd · 46861fd
1 parent a7f9de8
commit 46861fd
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 92 deletions.
diff --git a/bootstrapping-lambda/local/index.html b/bootstrapping-lambda/local/index.html
@@ -10,23 +10,25 @@
     <a href="?expandPinboard=true"
       >Expand pinboard via query param <code>?expandPinboard=true</code></a
     >
-    <h4>Open Pinboard via query param (for workflow/pinboard ID <code>65299</code>)</h4>
-      <ul>
-        <li>
-          <a href="?pinboardId=65299">?pinboardId=65299</a>
-        </li>
-        <li>
-          <a href="?pinboardId=65299&pinboardItemId=2885"
-            >?pinboardId=65299&pinboardItemId=2885</a
-          >
-        </li>
-        <li>
-          <a href="?"><em>REMOVE QUERY PARAM</em></a>
-        </li>
-      </ul>
+    <h4>
+      Open Pinboard via query param (for workflow/pinboard ID
+      <code>65299</code>)
+    </h4>
+    <ul>
+      <li>
+        <a href="?pinboardId=65299">?pinboardId=65299</a>
+      </li>
+      <li>
+        <a href="?pinboardId=65299&pinboardItemId=2885"
+          >?pinboardId=65299&pinboardItemId=2885</a
+        >
+      </li>
+      <li>
+        <a href="?"><em>REMOVE QUERY PARAM</em></a>
+      </li>
+    </ul>
     <h3>Pinboard pre-selection</h3>
     <ul>
-
       <h4>
         via hidden element (for composer ID
         <code>649975868f08c7d8da8802ff</code>)

diff --git a/client/src/app.tsx b/client/src/app.tsx
@@ -45,7 +45,10 @@ import { getAgateFontFaceIfApplicable } from "../fontNormaliser";
 import { Global } from "@emotion/react";
 import { TourStateProvider } from "./tour/tourState";
 import { demoMentionableUsers, demoUser } from "./tour/tourConstants";
-import { STARRED_MESSAGES_HTML_TAG, StarredMessagesPortal } from "./starred/starredMessages";
+import {
+  STARRED_MESSAGES_HTML_TAG,
+  StarredMessagesPortal,
+} from "./starred/starredMessages";
 
 const PRESELECT_PINBOARD_HTML_TAG = "pinboard-preselect";
 const PRESET_UNREAD_NOTIFICATIONS_COUNT_HTML_TAG = "pinboard-bubble-preset";
@@ -65,7 +68,8 @@ export const PinBoardApp = ({
     null
   );
   const [assetHandles, setAssetHandles] = useState<HTMLElement[]>([]);
-  const [starredMessagesArea, setStarredMessagesArea] = useState<Element | null>(null);
+  const [starredMessagesArea, setStarredMessagesArea] =
+    useState<Element | null>(null);
 
   const [workflowPinboardElements, setWorkflowPinboardElements] = useState<
     HTMLElement[]
@@ -85,9 +89,7 @@ export const PinBoardApp = ({
     );
 
   const refreshStarredMessagesAreaNodes = () =>
-    setStarredMessagesArea(
-      document.querySelector(STARRED_MESSAGES_HTML_TAG)
-    );
+    setStarredMessagesArea(document.querySelector(STARRED_MESSAGES_HTML_TAG));
 
   const refreshWorkflowPinboardElements = () =>
     setWorkflowPinboardElements(
@@ -336,10 +338,10 @@ export const PinBoardApp = ({
     const newTags =
       preSelectedComposerId && composerSection
         ? {
-          composerId: preSelectedComposerId,
-          composerSection,
-          ...(tags || {}),
-        }
+            composerId: preSelectedComposerId,
+            composerSection,
+            ...(tags || {}),
+          }
         : tags;
     basicSendTelemetryEvent?.(type, newTags, value);
   };
@@ -349,9 +351,9 @@ export const PinBoardApp = ({
       PINBOARD_TELEMETRY_TYPE.PINBOARD_LOADED,
       preSelectedComposerId && composerSection
         ? {
-          composerId: preSelectedComposerId,
-          composerSection: composerSection,
-        }
+            composerId: preSelectedComposerId,
+            composerSection: composerSection,
+          }
         : {}
     );
   }, [preSelectedComposerId, composerSection]);

diff --git a/client/src/globalState.tsx b/client/src/globalState.tsx
@@ -209,16 +209,16 @@ export const GlobalStateProvider: React.FC<GlobalStateProviderProps> = ({
   const activePinboardIds = isDemoSelectedPinboard
     ? [demoPinboardData.id]
     : [
-      ...(preselectedPinboardId ? [preselectedPinboardId] : []),
-      ...(maybeOpenPinboardIdBasedOnQueryParam
-        ? [maybeOpenPinboardIdBasedOnQueryParam]
-        : []),
-      ...manuallyOpenedPinboardIds?.filter(
-        (_) =>
-          _ !== preselectedPinboardId &&
-          _ !== maybeOpenPinboardIdBasedOnQueryParam
-      ),
-    ];
+        ...(preselectedPinboardId ? [preselectedPinboardId] : []),
+        ...(maybeOpenPinboardIdBasedOnQueryParam
+          ? [maybeOpenPinboardIdBasedOnQueryParam]
+          : []),
+        ...manuallyOpenedPinboardIds?.filter(
+          (_) =>
+            _ !== preselectedPinboardId &&
+            _ !== maybeOpenPinboardIdBasedOnQueryParam
+        ),
+      ];
 
   const pinboardDataQuery = useQuery<{
     getPinboardsByIds: PinboardData[];
@@ -273,14 +273,14 @@ export const GlobalStateProvider: React.FC<GlobalStateProviderProps> = ({
     (
       isDemo: false // this asks the compiler to ensure we never call this in demo mode
     ) =>
-      (pinboardId: string, maybeEmailOverride?: string) =>
-        !isDemo &&
-        addManuallyOpenedPinboardIds({
-          variables: {
-            pinboardId,
-            maybeEmailOverride,
-          },
-        });
+    (pinboardId: string, maybeEmailOverride?: string) =>
+      !isDemo &&
+      addManuallyOpenedPinboardIds({
+        variables: {
+          pinboardId,
+          maybeEmailOverride,
+        },
+      });
 
   const [interTabChannel] = useState<BroadcastChannel>(
     new BroadcastChannel("pinboard-inter-tab-communication")
@@ -312,12 +312,13 @@ export const GlobalStateProvider: React.FC<GlobalStateProviderProps> = ({
       const hostname = window.location.hostname;
       const composerDomain =
         hostname.includes(".local.") ||
-          hostname.includes(".code.") ||
-          hostname.includes(".test.")
+        hostname.includes(".code.") ||
+        hostname.includes(".test.")
           ? "code.dev-gutools.co.uk"
           : "gutools.co.uk";
-      const composerUrl = `https://composer.${composerDomain}/content/${pinboardData.composerId || ".."
-        }?${EXPAND_PINBOARD_QUERY_PARAM}=true`;
+      const composerUrl = `https://composer.${composerDomain}/content/${
+        pinboardData.composerId || ".."
+      }?${EXPAND_PINBOARD_QUERY_PARAM}=true`;
 
       window?.open(composerUrl, "_blank")?.focus();
     }, 500);
@@ -329,7 +330,7 @@ export const GlobalStateProvider: React.FC<GlobalStateProviderProps> = ({
           clearTimeout(openInNewTabTimeoutId);
           alert(
             "The composer file you want to see is already open in another tab.\n\n" +
-            "You can see an alert message on that tab too to make it easier to find but, unfortunately, you’ll need to select the tab manually."
+              "You can see an alert message on that tab too to make it easier to find but, unfortunately, you’ll need to select the tab manually."
           );
         }
       },
@@ -344,26 +345,26 @@ export const GlobalStateProvider: React.FC<GlobalStateProviderProps> = ({
 
   const openPinboard =
     (isDemo: boolean) =>
-      (pinboardData: PinboardData, isOpenInNewTab: boolean) => {
-        if (!isDemo && !activePinboardIds.includes(pinboardData.id)) {
-          addManuallyOpenedPinboardId(isDemo)(pinboardData.id).then(
-            (result) =>
-              result.data
-                ? setManuallyOpenedPinboardIds(
+    (pinboardData: PinboardData, isOpenInNewTab: boolean) => {
+      if (!isDemo && !activePinboardIds.includes(pinboardData.id)) {
+        addManuallyOpenedPinboardId(isDemo)(pinboardData.id).then(
+          (result) =>
+            result.data
+              ? setManuallyOpenedPinboardIds(
                   result.data.addManuallyOpenedPinboardIds
                 )
-                : console.error(
+              : console.error(
                   "addManuallyOpenedPinboardIds did not return any data"
                 ) // TODO probably report to Sentry
-          );
-        }
+        );
+      }
 
-        if (isOpenInNewTab) {
-          openPinboardInNewTab(pinboardData);
-        } else {
-          setSelectedPinboardId(pinboardData.id);
-        }
-      };
+      if (isOpenInNewTab) {
+        openPinboardInNewTab(pinboardData);
+      } else {
+        setSelectedPinboardId(pinboardData.id);
+      }
+    };
 
   const [errors, setErrors] = useState<PerPinboard<ApolloError>>({});
 
@@ -418,11 +419,11 @@ export const GlobalStateProvider: React.FC<GlobalStateProviderProps> = ({
         (result) =>
           result.data
             ? setManuallyOpenedPinboardIds(
-              result.data.removeManuallyOpenedPinboardIds
-            )
+                result.data.removeManuallyOpenedPinboardIds
+              )
             : console.error(
-              "removeManuallyOpenedPinboardIds did not return any data"
-            ) // TODO probably report to Sentry
+                "removeManuallyOpenedPinboardIds did not return any data"
+              ) // TODO probably report to Sentry
       );
     }
     setSelectedPinboardId(null);
@@ -464,13 +465,13 @@ export const GlobalStateProvider: React.FC<GlobalStateProviderProps> = ({
       x: isTooFarLeft
         ? 10 + floatySize - viewportWidth
         : isTooFarRight
-          ? -10
-          : positionTranslation.x,
+        ? -10
+        : positionTranslation.x,
       y: isTooHigh
         ? top + floatySize - viewportHeight
         : isTooLow
-          ? -10
-          : positionTranslation.y,
+        ? -10
+        : positionTranslation.y,
     };
   };
 
@@ -501,7 +502,7 @@ export const GlobalStateProvider: React.FC<GlobalStateProviderProps> = ({
   useEffect(() => {
     const savedExplicitPositionTranslation = JSON.parse(
       window.localStorage.getItem(LOCAL_STORAGE_KEY_EXPLICIT_POSITION) ||
-      JSON.stringify({ x: 0 - right, y: 0 - bottom })
+        JSON.stringify({ x: 0 - right, y: 0 - bottom })
     );
     setExplicitPositionTranslation(savedExplicitPositionTranslation);
     updateBoundedPositionTranslation(savedExplicitPositionTranslation);

diff --git a/client/src/itemHoverMenu.tsx b/client/src/itemHoverMenu.tsx
@@ -140,7 +140,10 @@ export const ItemHoverMenu = ({
         }
       `}
     >
-      <button onClick={() => setIsStarred(isStarred => !isStarred)} title={isStarred ? "Unstar" : "Star"}>
+      <button
+        onClick={() => setIsStarred((isStarred) => !isStarred)}
+        title={isStarred ? "Unstar" : "Star"}
+      >
         {isStarred ? <SvgStar /> : <SvgStarOutline />}
       </button>
       <button onClick={() => setMaybeReplyingToItemId(item.id)} title="Reply">

diff --git a/client/src/pinboard.tsx b/client/src/pinboard.tsx
@@ -231,8 +231,8 @@ export const Pinboard: React.FC<PinboardProps> = ({
       setError(
         pinboardId,
         initialItemsQuery.error ||
-        itemSubscription.error ||
-        claimSubscription.error
+          itemSubscription.error ||
+          claimSubscription.error
       ),
     [initialItemsQuery.error, itemSubscription.error, claimSubscription.error]
   );
@@ -397,9 +397,11 @@ export const Pinboard: React.FC<PinboardProps> = ({
           />
         </div>
       )}
-      {isPinboardData(preselectedPinboard) && preselectedPinboard.id === pinboardId && maybeStarredMessagesArea && (
-        <StarredMessagesPortal node={maybeStarredMessagesArea} />
-      )}
+      {isPinboardData(preselectedPinboard) &&
+        preselectedPinboard.id === pinboardId &&
+        maybeStarredMessagesArea && (
+          <StarredMessagesPortal node={maybeStarredMessagesArea} />
+        )}
     </React.Fragment>
   );
 };
diff --git a/client/src/starred/starredMessages.tsx b/client/src/starred/starredMessages.tsx
@@ -3,21 +3,17 @@ import ReactDOM from "react-dom";
 
 export const STARRED_MESSAGES_HTML_TAG = "pinboard-starred-messages";
 
-interface StarredMessagesProps {
+interface StarredMessagesProps {}
 
-}
-
-const StarredMessages = (props: StarredMessagesProps) => <div>
+const StarredMessages = (props: StarredMessagesProps) => (
+  <div>
     <p>Starred Messages</p>
-</div>;
+  </div>
+);
 
 interface StarredMessagesPortalProps {
-    node: Element;
+  node: Element;
 }
 
-export const StarredMessagesPortal = ({
-    node
-}: StarredMessagesPortalProps) => ReactDOM.createPortal(
-    <StarredMessages />,
-    node
-);
+export const StarredMessagesPortal = ({ node }: StarredMessagesPortalProps) =>
+  ReactDOM.createPortal(<StarredMessages />, node);