Use our own table component. Closes #457

crosshare-org · Jun 17, 2024 · 0f9a650 · 0f9a650
1 parent 6e8ec1d
commit 0f9a650
Show file tree

Hide file tree

Showing 25 changed files with 299 additions and 147 deletions.
diff --git a/app/__tests__/bitArray.test.ts b/app/__tests__/bitArray.test.ts
@@ -31,7 +31,7 @@ const testCases: [
   number,
   string,
   string,
-  number[]
+  number[],
 ][] = [];
 for (let i = 0; i < 1000; i += 1) {
   const a = randomB32();

diff --git a/app/components/Buttons.tsx b/app/components/Buttons.tsx
@@ -1,4 +1,4 @@
-import { MouseEvent, ReactNode } from 'react';
+import { CSSProperties, MouseEvent, ReactNode } from 'react';
 import { clsx } from '../lib/utils.js';
 import styles from './Buttons.module.css';
 
@@ -7,6 +7,7 @@ interface ButtonCommonProps {
   disabled?: boolean;
   className?: string;
   hoverText?: string;
+  style?: CSSProperties;
 }
 interface ButtonTextProps extends ButtonCommonProps {
   text: ReactNode;

diff --git a/app/components/Cell.tsx b/app/components/Cell.tsx
@@ -161,8 +161,8 @@ export const Cell = memo(function Cell(props: CellProps) {
                 props.isVerified
                   ? styles.contentsVerified
                   : filledValue
-                  ? styles.contentsFilled
-                  : null
+                    ? styles.contentsFilled
+                    : null
               )}
             >
               {props.isWrong ? (

diff --git a/app/components/ClueSuggestionOverlay.module.css b/app/components/ClueSuggestionOverlay.module.css
diff --git a/app/components/ClueSuggestionOverlay.tsx b/app/components/ClueSuggestionOverlay.tsx
@@ -1,16 +1,12 @@
-import orderBy from 'lodash/orderBy';
 import { useEffect, useMemo, useState } from 'react';
-import { Table } from 'react-fluid-table';
 import { FaCheck } from 'react-icons/fa';
 import { ClueEntryT, ClueListT, parseClueList } from '../lib/ginsbergCommon.js';
 import { logAsyncErrors } from '../lib/utils.js';
-import styles from './ClueSuggestionOverlay.module.css';
 import { Overlay } from './Overlay.js';
+import { ColumnSpec, Table } from './Table.js';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const NYTIcon = ({ row }: { row: any }) => {
-  // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions, @typescript-eslint/no-unsafe-member-access
-  if (row?.n) {
+const NYTIcon = (row: ClueEntryT) => {
+  if (row.n) {
     return <FaCheck />;
   }
   return <></>;
@@ -22,9 +18,7 @@ const ExternalSites: [string, string][] = [
 ];
 
 const Weekday = ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat'];
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Difficulty = ({ row }: { row: any }) => {
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
+const Difficulty = (row: ClueEntryT) => {
   return <>{Weekday[Math.round(row.d)] || '-'}</>;
 };
 
@@ -39,17 +33,17 @@ export const SuggestOverlay = (props: SuggestOverlayProps) => {
   const [onlyNYT, setOnlyNYT] = useState(false);
   const loading = clueList === null && !error;
 
-  const onSort = (col: string | null, dir: string | null) => {
-    if (!clueList || !col || !dir) {
+  const onSort = (col: keyof ClueEntryT, dir: 1 | -1) => {
+    if (!clueList) {
       return;
     }
-    setClueList(
-      orderBy(
-        clueList,
-        [col as keyof ClueEntryT],
-        [dir.toLowerCase() === 'asc' ? 'asc' : 'desc']
-      )
-    );
+    const newCL = [...clueList];
+    newCL.sort((x, y) => {
+      if (x[col] < y[col]) return dir;
+      if (x[col] > y[col]) return -dir;
+      return 0;
+    });
+    setClueList(newCL);
   };
 
   const displayList = useMemo(
@@ -69,13 +63,10 @@ export const SuggestOverlay = (props: SuggestOverlayProps) => {
         });
       // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
       if (!didCancel && res) {
-        const clues = orderBy(
-          parseClueList(res).map((c) => {
-            return { ...c, d: c.d / c.f - 1 };
-          }),
-          ['f'],
-          ['desc']
-        );
+        const clues = parseClueList(res).map((c) => {
+          return { ...c, d: c.d / c.f - 1 };
+        });
+        clues.sort((x, y) => y.f - x.f);
         const nytOnly = clues.filter((c) => c.n);
         if (nytOnly.length > 5) {
           setOnlyNYT(true);
@@ -88,7 +79,7 @@ export const SuggestOverlay = (props: SuggestOverlayProps) => {
       didCancel = true;
     };
   }, [props.word]);
-  const columns = [
+  const columns: ColumnSpec<ClueEntryT>[] = [
     { key: 'c', header: 'Clue', sortable: false },
     { key: 'y', header: 'Last Seen', sortable: true, width: 110 },
     { key: 'f', header: 'Uses', sortable: true, width: 70 },
@@ -128,19 +119,12 @@ export const SuggestOverlay = (props: SuggestOverlayProps) => {
             </label>
           </div>
           <Table
-            data={displayList}
             columns={columns}
-            tableHeight={400}
             onSort={onSort}
-            sortColumn={'f'}
-            sortDirection={'DESC'}
-            onRowClick={(data) => {
-              const clicked = displayList[data.index];
-              if (clicked) {
-                props.select(clicked.c);
-              }
+            data={displayList}
+            onRowClick={(clicked) => {
+              props.select(clicked.c);
             }}
-            className={styles.table}
           />
           <h3 className="marginTop1em">External Sources</h3>
           <ul>

diff --git a/app/components/Puzzle.tsx b/app/components/Puzzle.tsx
@@ -1332,13 +1332,13 @@ export const Puzzle = ({
                         isSlate
                           ? 'Show Stats'
                           : puzzle.contestAnswers?.length
-                          ? !isMetaSolution(
-                              state.contestSubmission,
-                              puzzle.contestAnswers
-                            ) && !state.contestRevealed
-                            ? t`Contest Prompt / Submission`
-                            : t`Comments / Leaderboard`
-                          : t`Show Comments`
+                            ? !isMetaSolution(
+                                state.contestSubmission,
+                                puzzle.contestAnswers
+                              ) && !state.contestRevealed
+                              ? t`Contest Prompt / Submission`
+                              : t`Comments / Leaderboard`
+                            : t`Show Comments`
                       }
                       onClick={() => {
                         window.parent.postMessage(

diff --git a/app/components/PuzzleLink.module.css b/app/components/PuzzleLink.module.css
@@ -62,7 +62,11 @@
 
   font-size: 0.6em;
   text-align: center;
-  text-shadow: 2px 0 0 white, -2px 0 0 white, 0 2px 0 white, 0 -2px 0 white;
+  text-shadow:
+    2px 0 0 white,
+    -2px 0 0 white,
+    0 2px 0 white,
+    0 -2px 0 white;
 }
 
 .taglist {

diff --git a/app/components/PuzzleStats.module.css b/app/components/PuzzleStats.module.css
@@ -1,12 +1,5 @@
 @value small-and-up from '../lib/definitions.module.css';
 
-.metaTable :global(.cell) {
-  overflow: hidden;
-  display: block !important;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .page {
   display: flex;
   flex-direction: column;

diff --git a/app/components/PuzzleStats.tsx b/app/components/PuzzleStats.tsx
@@ -1,10 +1,8 @@
 import useEventListener from '@use-it/event-listener';
 import { arrayRemove, arrayUnion, updateDoc } from 'firebase/firestore';
-import orderBy from 'lodash/orderBy';
 import Head from 'next/head';
 import { useCallback, useMemo, useReducer, useState } from 'react';
 import { CSVLink } from 'react-csv';
-import { ColumnProps, Table } from 'react-fluid-table';
 import { FaShareSquare } from 'react-icons/fa';
 import {
   MetaSubmissionForStatsViewT,
@@ -42,6 +40,7 @@ import { Overlay } from './Overlay.js';
 import { SquareAndCols } from './Page.js';
 import styles from './PuzzleStats.module.css';
 import { useSnackbar } from './Snackbar.js';
+import { ColumnSpec, Table } from './Table.js';
 import { DefaultTopBar, TopBarLink } from './TopBar.js';
 
 export enum StatsMode {
@@ -76,26 +75,26 @@ const MetaSubmissionList = (props: MetaSubmissionListProps) => {
     return <p>No submissions yet - data is updated once per hour.</p>;
   }
 
-  const onSort = (col: string | null, dir: string | null) => {
-    if (!col || !dir) {
-      return;
-    }
-    setSubs(
-      orderBy(
-        subs,
-        [col as keyof (typeof subs)[number]],
-        [dir.toLowerCase() === 'asc' ? 'asc' : 'desc']
-      )
-    );
+  const onSort = (col: keyof TableData, dir: 1 | -1) => {
+    const newSubs = [...subs];
+    newSubs.sort((x, y) => {
+      const xcol = x[col]?.toString().trim().toLocaleLowerCase() || '',
+        ycol = y[col]?.toString().trim().toLocaleLowerCase() || '';
+      if (xcol < ycol) return dir;
+      if (xcol > ycol) return -dir;
+      return 0;
+    });
+    console.log(newSubs);
+    setSubs(newSubs);
   };
 
-  const columns: ColumnProps<TableData>[] = [
+  const columns: ColumnSpec<TableData>[] = [
     { key: 'n', header: 'Submitter', sortable: true },
     {
       key: 's',
       header: 'Submission',
       sortable: true,
-      content: ({ row }) => {
+      content: (row) => {
         const isSolution = isMetaSolution(
           row.s,
           props.puzzle.contestAnswers ?? []
@@ -189,14 +188,7 @@ const MetaSubmissionList = (props: MetaSubmissionListProps) => {
         </CSVLink>
       </p>
       <div className="margin1em">
-        <Table
-          className={styles.metaTable}
-          data={subs}
-          columns={columns}
-          onSort={onSort}
-          sortColumn={'t'}
-          sortDirection={'ASC'}
-        />
+        <Table data={subs} columns={columns} onSort={onSort} />
       </div>
     </>
   );

diff --git a/app/components/ReactionButton.tsx b/app/components/ReactionButton.tsx
@@ -127,8 +127,8 @@ export function ReactionButton(props: ReactionButtonProps) {
         newUser && !newUser.isAnonymous
           ? newUser.uid
           : user && !user.isAnonymous
-          ? user.uid
-          : null;
+            ? user.uid
+            : null;
       if (!userId) {
         return Promise.resolve();
       }

diff --git a/app/components/Table.module.css b/app/components/Table.module.css
@@ -0,0 +1,52 @@
+@value small-and-up from '../lib/definitions.module.css';
+@value large-and-up from '../lib/definitions.module.css';
+
+.table {
+  background-color: var(--overlay-inner) !important;
+}
+
+.row {
+  overflow: scroll;
+  display: flex;
+  height: 75px;
+}
+
+.rowClick {
+  cursor: pointer;
+}
+
+/* stylelint-disable-next-line media-feature-name-no-unknown */
+@media (small-and-up) {
+  .row {
+    height: 50px;
+  }
+}
+
+/* stylelint-disable-next-line media-feature-name-no-unknown */
+@media (large-and-up) {
+  .row {
+    height: 35px;
+  }
+}
+
+.row:hover {
+  background-color: var(--secondary);
+}
+
+.headerContent {
+  font-weight: bold;
+  text-align: left;
+}
+
+.content {
+  margin: auto;
+  text-align: left;
+}
+
+.content:first-of-type {
+  padding-left: 0.5em;
+}
+
+.content:last-of-type {
+  padding-right: 0.5em;
+}