Merge pull request #4656 from coralproject/develop

v9.2.0
coralproject · Aug 6, 2024 · 2be4a9b · 2be4a9b
2 parents e0c7cfd + 91a49de
commit 2be4a9b
Show file tree

Hide file tree

Showing 10 changed files with 220 additions and 65 deletions.
diff --git a/client/package.json b/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coralproject/talk",
-  "version": "9.1.2",
+  "version": "9.2.0",
   "author": "The Coral Project",
   "homepage": "https://coralproject.net/",
   "sideEffects": [

diff --git a/client/src/core/client/stream/tabs/Comments/TenorInput/TenorGrid.css b/client/src/core/client/stream/tabs/Comments/TenorInput/TenorGrid.css
@@ -0,0 +1,37 @@
+.grid {
+  max-height: 300px;
+  overflow: auto;
+}
+
+.gridColumns {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.gridColumn {
+  display: flex;
+  flex-direction: column;
+}
+
+.gridControls {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.gridItem {
+  width: 85px;
+  background: var(--palette-background-body);
+  border-style: none;
+  padding: 2px;
+
+  display: flex;
+  justify-content: center;
+}
+
+.gridImage {
+  width: 100%;
+  height: auto;
+}
diff --git a/client/src/core/client/stream/tabs/Comments/TenorInput/TenorGrid.tsx b/client/src/core/client/stream/tabs/Comments/TenorInput/TenorGrid.tsx
@@ -0,0 +1,158 @@
+import { Localized } from "@fluent/react/compat";
+import React, {
+  FunctionComponent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+import { useCoralContext } from "coral-framework/lib/bootstrap";
+import { Button } from "coral-ui/components/v2";
+
+import { GifResult } from "./TenorInput";
+
+import styles from "./TenorGrid.css";
+
+interface GridItemProps {
+  gif: GifResult;
+  onSelect: (gif: GifResult) => void;
+}
+
+const TenorGridItem: FunctionComponent<GridItemProps> = ({ gif, onSelect }) => {
+  const onClick = useCallback(() => {
+    onSelect(gif);
+  }, [gif, onSelect]);
+
+  return (
+    <button className={styles.gridItem} onClick={onClick}>
+      <img className={styles.gridImage} alt={gif.title} src={gif.preview}></img>
+    </button>
+  );
+};
+
+interface GridColumnsProps {
+  gifs: GifResult[];
+  onSelectGif: (gif: GifResult) => void;
+  numColumns: number;
+}
+
+const TenorGridColumns: FunctionComponent<GridColumnsProps> = ({
+  gifs,
+  onSelectGif,
+  numColumns,
+}) => {
+  const columns = useMemo(() => {
+    const resultColumns: GifResult[][] = [];
+    for (let i = 0; i < numColumns; i++) {
+      resultColumns.push(new Array<GifResult>());
+    }
+
+    let columnIndex = 0;
+    // eslint-disable-next-line @typescript-eslint/prefer-for-of
+    for (let j = 0; j < gifs.length; j++) {
+      const column = resultColumns[columnIndex];
+      const gif = gifs[j];
+
+      column.push(gif);
+
+      columnIndex++;
+      if (columnIndex >= numColumns) {
+        columnIndex = 0;
+      }
+    }
+
+    return resultColumns;
+  }, [gifs, numColumns]);
+
+  return (
+    <div className={styles.gridColumns}>
+      {columns.map((colGifs, colIndex) => {
+        return (
+          <div
+            key={`tenor-gif-result-column-${colIndex}`}
+            className={styles.gridColumn}
+          >
+            {colGifs &&
+              colGifs.map((gif, index) => {
+                return (
+                  <TenorGridItem
+                    key={`${gif.id}-${index}`}
+                    gif={gif}
+                    onSelect={onSelectGif}
+                  />
+                );
+              })}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+interface Props {
+  gifs: GifResult[];
+  showLoadMore?: boolean;
+
+  onSelectGif: (gif: GifResult) => void;
+  onLoadMore: () => void;
+}
+
+const TenorGrid: FunctionComponent<Props> = ({
+  gifs,
+  showLoadMore,
+  onSelectGif,
+  onLoadMore,
+}) => {
+  const { window } = useCoralContext();
+
+  const gridRef = useRef<HTMLDivElement>(null);
+  const [cols, setCols] = useState<number>(0);
+
+  const resizeGrid = useCallback(() => {
+    if (!gridRef || !gridRef.current) {
+      setCols(0);
+      return;
+    }
+
+    const rect = gridRef.current.getBoundingClientRect();
+    const numCols = rect.width / 90;
+
+    setCols(numCols);
+  }, [gridRef, setCols]);
+
+  useEffect(() => {
+    window.requestAnimationFrame(resizeGrid);
+    window.addEventListener("resize", resizeGrid);
+
+    return () => {
+      window.removeEventListener("resize", resizeGrid);
+    };
+    // include gifs so we re-calc grid col's on gif change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [gifs]);
+
+  return (
+    <div className={styles.grid}>
+      {gifs && cols > 0 && (
+        <TenorGridColumns
+          gifs={gifs}
+          onSelectGif={onSelectGif}
+          numColumns={cols}
+        />
+      )}
+      {showLoadMore && (
+        <div className={styles.gridControls} ref={gridRef}>
+          <Localized id="comments-postComment-gifSearch-search-loadMore">
+            <Button color="stream" onClick={onLoadMore}>
+              Load More
+            </Button>
+          </Localized>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TenorGrid;
diff --git a/client/src/core/client/stream/tabs/Comments/TenorInput/TenorInput.css b/client/src/core/client/stream/tabs/Comments/TenorInput/TenorInput.css
@@ -29,35 +29,6 @@
   max-width: 100%;
 }
 
-.grid {
-  max-height: 300px;
-  overflow: auto;
-
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 8px;
-}
-
-.gridControls {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.gridItem {
-  width: 85px;
-  background: var(--palette-background-body);
-  border-style: none;
-  padding: 0px;
-}
-
-.gridImage {
-  width: 100%;
-  height: auto;
-}
-
 .input {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;

diff --git a/client/src/core/client/stream/tabs/Comments/TenorInput/TenorInput.tsx b/client/src/core/client/stream/tabs/Comments/TenorInput/TenorInput.tsx
@@ -18,6 +18,7 @@ import { ButtonSvgIcon, SearchIcon } from "coral-ui/components/icons";
 import { Button, HorizontalGutter, TextField } from "coral-ui/components/v2";
 
 import TenorAttribution from "./TenorAttribution";
+import TenorGrid from "./TenorGrid";
 
 import styles from "./TenorInput.css";
 
@@ -181,34 +182,14 @@ const TenorInput: FunctionComponent<Props> = ({ onSelect }) => {
           }
           ref={inputRef}
         />
-        <div className={styles.grid}>
-          {query &&
-            gifs &&
-            gifs.map((gif, index) => {
-              return (
-                <button
-                  className={styles.gridItem}
-                  key={`${gif.id}-${index}`}
-                  onClick={() => onGifClick(gif)}
-                >
-                  <img
-                    className={styles.gridImage}
-                    alt={gif.title}
-                    src={gif.preview}
-                  ></img>
-                </button>
-              );
-            })}
-          {next && gifs && gifs.length > 0 && query?.length > 0 && (
-            <div className={styles.gridControls}>
-              <Localized id="comments-postComment-gifSearch-search-loadMore">
-                <Button color="stream" onClick={onLoadMore}>
-                  Load More
-                </Button>
-              </Localized>
-            </div>
-          )}
-        </div>
+        <TenorGrid
+          gifs={query ? gifs : []}
+          showLoadMore={
+            !!(next && gifs && gifs.length > 0 && query?.length > 0)
+          }
+          onSelectGif={onGifClick}
+          onLoadMore={onLoadMore}
+        />
         <TenorAttribution />
       </HorizontalGutter>
     </div>

diff --git a/common/package.json b/common/package.json
@@ -1,6 +1,6 @@
 {
   "name": "common",
-  "version": "9.1.2",
+  "version": "9.2.0",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/config/package.json b/config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "common",
-  "version": "9.1.2",
+  "version": "9.2.0",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/server/package.json b/server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coralproject/talk",
-  "version": "9.1.2",
+  "version": "9.2.0",
   "author": "The Coral Project",
   "homepage": "https://coralproject.net/",
   "sideEffects": [

diff --git a/server/src/core/server/services/comments/pipeline/phases/index.ts b/server/src/core/server/services/comments/pipeline/phases/index.ts
@@ -62,11 +62,11 @@ export const moderationPhases: IntermediateModerationPhase[] = [
   spam,
   detectLinks,
 
-  // Apply any pre-existing conditions to these comments.
+  // Run any external moderation phase that missed other filters.
+  external,
+
+  // Apply any pre-moderation conditions to these comments.
   statusPreModerateNewCommenter,
   statusPreModerate,
   statusPreModerateUser,
-
-  // Run any external moderation phase that missed other filters.
-  external,
 ];
diff --git a/utilities/externalModPhase/src/main.ts b/utilities/externalModPhase/src/main.ts
@@ -52,6 +52,14 @@ const run = async () => {
     res.send(result);
   });
 
+  app.post("/api/none", (req, res) => {
+    console.log(req.body);
+
+    const result = {};
+
+    res.send(result);
+  });
+
   app.listen(PORT, HOST, () => {
     console.log(`external mod phase tester is listening on "${HOST}:${PORT}"...`);
   });