fix: fix react-hooks deps issues

surrealdb · May 19, 2024 · 5e7ff55 · 5e7ff55
1 parent 61de373
commit 5e7ff55
Show file tree

Hide file tree

Showing 55 changed files with 93 additions and 96 deletions.
diff --git a/src/components/CodeEditor/index.tsx b/src/components/CodeEditor/index.tsx
@@ -83,6 +83,7 @@ export function CodeEditor(props: CodeEditorProps) {
  return () => {
  editor.destroy();
  };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
 
  useEffect(() => {

diff --git a/src/components/CodePreview/index.tsx b/src/components/CodePreview/index.tsx
@@ -70,6 +70,7 @@ export function CodePreview({
  return () => {
  editor.destroy();
  };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
 
  useEffect(() => {

diff --git a/src/components/DataTable/index.tsx b/src/components/DataTable/index.tsx
@@ -25,6 +25,8 @@ interface DataTableProps extends BoxProps{
 }
 
 export function DataTable(props: DataTableProps) {
+ const { onRowContextMenu } = props;
+
  const isLight = useIsLight();
  const { inspect } = useInspector();
 
@@ -90,7 +92,7 @@ export function DataTable(props: DataTableProps) {
  });
 
  return [headerNames, values];
- }, [data, headers, active]);
+ }, [data, headers]);
 
  const columnHeaders = useMemo(() => {
  return keys.map(key => (
@@ -113,7 +115,7 @@ export function DataTable(props: DataTableProps) {
  </Text>
  </Box>
  ));
- }, [isLight, keys, sorting]);
+ }, [keys, sorting, handleSortClick, onSortingChange]);
 
  const recordRows = useMemo(() => {
  return values.map((value, i) => {
@@ -134,7 +136,7 @@ export function DataTable(props: DataTableProps) {
  key={i}
  component="tr"
  onClick={() => value.id && inspect(value.id)}
- onContextMenu={(e) => props.onRowContextMenu?.(e, value)}
+ onContextMenu={(e) => onRowContextMenu?.(e, value)}
  style={{
  backgroundColor: `${isActive ? "var(--mantine-color-slate-6)" : undefined} !important`,
  }}
@@ -143,7 +145,7 @@ export function DataTable(props: DataTableProps) {
  </Box>
  );
  });
- }, [keys, values, isLight]);
+ }, [keys, values, active, inspect, onRowContextMenu]);
 
  if (!isRenderable(data)) {
  return <Text c="slate">Result could not be displayed as a table.</Text>;

diff --git a/src/components/Embedder/index.tsx b/src/components/Embedder/index.tsx
@@ -77,7 +77,7 @@ export function Embedder({
  if (value) {
  setState(value);
  }
- }, [value]);
+ }, [value, setState]);
 
  const frameUrl = useMemo(() => {
  const search = new URLSearchParams();
@@ -131,6 +131,7 @@ export function Embedder({
 
  useLayoutEffect(() => {
  onChangeURL?.(frameUrl);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [frameUrl]);
 
  return (

diff --git a/src/components/HoverIcon/index.tsx b/src/components/HoverIcon/index.tsx
@@ -22,7 +22,7 @@ export const HoverIcon = createPolymorphicComponent<'button', HoverIconProps>(fo
  return {
  '--icon-size': (getIconSize(iconSize || size) * 1.5) + 'em'
  };
- }, [iconSize]);
+ }, [iconSize, size]);
 
  const {
  ref: iconRef,

diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
@@ -26,7 +26,7 @@ export const Icon = ({ size, color, path, style, left, right, noStroke, ...rest
  marginLeft: right ? '0.5em' : undefined,
  flexShrink: 0,
  });
- }, [color, left, right, size, style, theme]);
+ }, [color, left, right, size, style]);
 
  return (
  <Box component="svg" viewBox="0 0 24 24" role="presentation" style={svgStyle} {...rest}>

diff --git a/src/components/Inputs/index.tsx b/src/components/Inputs/index.tsx
@@ -87,6 +87,7 @@ export function CodeInput({
  return () => {
  editor.destroy();
  };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
 
  useEffect(() => {
@@ -141,6 +142,7 @@ export function CodeInput({
  editor.dispatch({
  effects: keymaps.reconfigure(value)
  });
+ // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [multiline]);
 
  return (

diff --git a/src/components/Scaffold/modals/connection.tsx b/src/components/Scaffold/modals/connection.tsx
@@ -127,6 +127,7 @@ export function ConnectionEditor() {
  draft.name = generateName();
  });
  }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [details.name]);
 
  useLayoutEffect(() => {
@@ -144,6 +145,7 @@ export function ConnectionEditor() {
  setDetails(info || base);
  }
  }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [opened]);
 
  useIntent("new-connection", () => {

diff --git a/src/components/Scaffold/modals/legacy.tsx b/src/components/Scaffold/modals/legacy.tsx
@@ -31,6 +31,7 @@ export function LegacyModal() {
 
  useEffect(() => {
  checkLegacyConfig();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
 
  return (

diff --git a/src/components/Scaffold/modals/palette.tsx b/src/components/Scaffold/modals/palette.tsx
@@ -50,7 +50,7 @@ export function CommandPaletteModal({
  setCategories(cmds);
  setSelected(cmds[0]?.commands[0] ?? null);
  }
- }, [opened]);
+ }, [opened, setSearch]);
 
  const [filtered, flattened] = useMemo(() => {
  const filtered = categories.flatMap((cat) => {
@@ -90,7 +90,7 @@ export function CommandPaletteModal({
  ) {
  setSelected(flattened[0]);
  }
- }, [flattened]);
+ }, [flattened, selected]);
 
  const activate = (cmd: Command) => {
  switch (cmd.action.type) {

diff --git a/src/components/Scaffold/modals/sandbox.tsx b/src/components/Scaffold/modals/sandbox.tsx
@@ -18,6 +18,7 @@ export function SandboxModal() {
  openHandle.open();
  complete();
  }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [connection]);
 
  return (

diff --git a/src/components/Scaffold/modals/table.tsx b/src/components/Scaffold/modals/table.tsx
@@ -58,7 +58,7 @@ export function TableCreator() {
  setTableIn([]);
  setTableOut([]);
  }
- }, [opened]);
+ }, [opened, setTableName]);
 
  useIntent("new-table", openTableCreator);
 

diff --git a/src/components/Scaffold/settings/index.tsx b/src/components/Scaffold/settings/index.tsx
@@ -102,7 +102,7 @@ export function Settings({
  setFlags({ featureFlags: true });
  setLogoClicked([]);
  }
- }, [logoClicked]);
+ }, [logoClicked, setFlags]);
 
  useIntent("open-settings", ({ tab }) => {
  if (tab) {

diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
@@ -61,7 +61,7 @@ export function Sidebar({
 
  useLayoutEffect(() => {
  expandedHandle.set(hovered);
- }, [hovered]);
+ }, [expandedHandle, hovered]);
 
  const setViewMode = useStable((id: ViewMode) => {
  updateTitle();
@@ -79,7 +79,7 @@ export function Sidebar({
 
  return items.length > 0 ? [items] : [];
  });
- }, [flags, connection]);
+ }, [flags]);
 
  const shouldExpand = connection && expandable && expanded;
  const nudgeSidebar = adapter.platform === "darwin" && isDesktop;

diff --git a/src/components/Toolbar/components/Connections/index.tsx b/src/components/Toolbar/components/Connections/index.tsx
@@ -56,7 +56,7 @@ export function Connections() {
  con.name.toLowerCase().includes(needle)
  || con.connection.hostname.toLowerCase().includes(needle)
  );
- }, [connections, connection, search]);
+ }, [connections, search]);
 
  const connect = useStable(() => {
  openConnection().catch(err => {

diff --git a/src/components/Toolbar/components/NewsFeed/index.tsx b/src/components/Toolbar/components/NewsFeed/index.tsx
@@ -87,6 +87,7 @@ export function NewsFeed() {
 
  useEffect(() => {
  fetchFeed();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
 
  useEffect(() => {
@@ -98,6 +99,7 @@ export function NewsFeed() {
  } else {
  readingHandle.close();
  }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isOpen]);
 
  const isEmpty = items.length === 0;

diff --git a/src/docs/topics/authentication/sign-in.tsx b/src/docs/topics/authentication/sign-in.tsx
@@ -5,9 +5,12 @@ import { Snippets, TopicProps } from "~/docs/types";
 import { useActiveConnection } from "~/hooks/connection";
 import { connectionUri } from "~/util/helpers";
 
-export function DocsAuthSignIn({ language, topic }: TopicProps) {
+export function DocsAuthSignIn({ language }: TopicProps) {
  const { connection } = useActiveConnection();
  const endpoint = connectionUri(connection);
+ const esc_endpoint = JSON.stringify(endpoint);
+ const esc_namespace = JSON.stringify(connection.namespace);
+ const esc_database = JSON.stringify(connection.database);
 
  const descriptions = {
  cli: `With the SurrealDB CLI, you can only signin via system(Root, Namespace and Database) users. This example shows a command on how to signin with the username and password left blank.`,
@@ -17,7 +20,7 @@ export function DocsAuthSignIn({ language, topic }: TopicProps) {
  const snippets = useMemo<Snippets>(
  () => ({
  cli: `
- surreal sql -e ${endpoint} --ns ${connection.namespace} --db ${connection.database} --user ... --pass ...
+ surreal sql -e ${esc_endpoint} --ns ${esc_namespace} --db ${esc_database} --user ... --pass ...
  `,
  js: `
  // Authenticate with a root user
@@ -169,7 +172,7 @@ export function DocsAuthSignIn({ language, topic }: TopicProps) {
  $db = new SurrealDB();
  `,
  }),
- []
+ [esc_endpoint, esc_namespace, esc_database]
  );
 
  return (

diff --git a/src/docs/topics/authentication/sign-up.tsx b/src/docs/topics/authentication/sign-up.tsx
@@ -4,7 +4,7 @@ import { Article, DocsPreview } from "~/docs/components";
 import { Snippets, TopicProps } from "~/docs/types";
 import { useActiveConnection } from "~/hooks/connection";
 
-export function DocsAuthSignUp({ language, topic }: TopicProps) {
+export function DocsAuthSignUp({ language }: TopicProps) {
  const { connection } = useActiveConnection();
  const esc_namespace = JSON.stringify(connection.namespace);
  const esc_database = JSON.stringify(connection.database);
@@ -87,7 +87,7 @@ export function DocsAuthSignUp({ language, topic }: TopicProps) {
  $db = new SurrealDB();
  `,
  }),
- []
+ [esc_namespace, esc_database]
  );
 
  return (

diff --git a/src/docs/topics/concepts/graph-traversal.tsx b/src/docs/topics/concepts/graph-traversal.tsx
@@ -2,10 +2,8 @@ import { Box } from "@mantine/core";
 import { useMemo } from "react";
 import { Article, DocsPreview } from "~/docs/components";
 import { Snippets, TopicProps } from "~/docs/types";
-import { useSchema } from "~/hooks/schema";
 
 export function DocsConceptsGraphTraversal({ language, topic }: TopicProps) {
- const schema = useSchema();
 
  const snippets = useMemo<Snippets>(
  () => ({
@@ -57,7 +55,7 @@ export function DocsConceptsGraphTraversal({ language, topic }: TopicProps) {
  $db = new SurrealDB();
  `,
  }),
- []
+ [topic.extra]
  );
 
  return (

diff --git a/src/docs/topics/global/authentication.tsx b/src/docs/topics/global/authentication.tsx
@@ -2,10 +2,8 @@ import { Box } from "@mantine/core";
 import { useMemo } from "react";
 import { Article, DocsPreview } from "~/docs/components";
 import { Snippets, TopicProps } from "~/docs/types";
-import { useSchema } from "~/hooks/schema";
 
 export function DocsGlobalAuthentication({ language, topic }: TopicProps) {
- const schema = useSchema();
 
  const snippets = useMemo<Snippets>(
  () => ({
@@ -57,7 +55,7 @@ export function DocsGlobalAuthentication({ language, topic }: TopicProps) {
  $db = new SurrealDB();
  `,
  }),
- []
+ [topic.extra]
  );
 
  return (

diff --git a/src/docs/topics/global/connecting.tsx b/src/docs/topics/global/connecting.tsx
@@ -5,7 +5,7 @@ import { Snippets, TopicProps } from "~/docs/types";
 import { useActiveConnection } from "~/hooks/connection";
 import { connectionUri } from "~/util/helpers";
 
-export function DocsGlobalConnecting({ language, topic }: TopicProps) {
+export function DocsGlobalConnecting({ language }: TopicProps) {
  const { connection } = useActiveConnection();
  const endpoint = connectionUri(connection);
  const esc_endpoint = JSON.stringify(endpoint);
@@ -15,7 +15,7 @@ export function DocsGlobalConnecting({ language, topic }: TopicProps) {
  const snippets = useMemo<Snippets>(
  () => ({
  cli: `
- surreal sql --endpoint ${endpoint} --namespace ${esc_namespace} --database ${connection.database}
+ surreal sql --endpoint ${esc_endpoint} --namespace ${esc_namespace} --database ${esc_database}
  `,
  js: `
  await db.connect(${esc_endpoint}, {
@@ -53,7 +53,7 @@ export function DocsGlobalConnecting({ language, topic }: TopicProps) {
  $db = new SurrealDB();
  `,
  }),
- []
+ [esc_endpoint, esc_namespace, esc_database]
  );
 
  return (

diff --git a/src/docs/topics/global/databases.tsx b/src/docs/topics/global/databases.tsx
@@ -12,7 +12,7 @@ export function DocsGlobalDatabases({ language, topic }: TopicProps) {
  const snippets = useMemo<Snippets>(
  () => ({
  cli: `
- USE DB ${connection.database};
+ USE DB ${esc_database};
  `,
  js: `
  await db.use({
@@ -40,7 +40,7 @@ export function DocsGlobalDatabases({ language, topic }: TopicProps) {
  $db = new SurrealDB();
  `,
  }),
- []
+ [esc_namespace, esc_database]
  );
 
  return (

diff --git a/src/docs/topics/global/handling-errors.tsx b/src/docs/topics/global/handling-errors.tsx
@@ -21,7 +21,7 @@ export function DocsGlobalHandlingErrors({ language, topic }: TopicProps) {
  console.log(rows);
  });
  `,
- }), []);
+ }), [topic.extra, schema?.tables]);
 
  return (
  <Article title="Handling errors">

diff --git a/src/docs/topics/global/initialize.tsx b/src/docs/topics/global/initialize.tsx
@@ -5,7 +5,7 @@ import { Snippets, TopicProps } from "~/docs/types";
 import { useActiveConnection } from "~/hooks/connection";
 import { connectionUri } from "~/util/helpers";
 
-export function DocsGlobalInit({ language, topic }: TopicProps) {
+export function DocsGlobalInit({ language }: TopicProps) {
  const { connection } = useActiveConnection();
  const endpoint = connectionUri(connection);
  const esc_endpoint = JSON.stringify(endpoint);
@@ -15,7 +15,7 @@ export function DocsGlobalInit({ language, topic }: TopicProps) {
  const snippets = useMemo<Snippets>(
  () => ({
  cli: `
- surreal sql --endpoint ${endpoint} --namespace ${connection.namespace} --database ${connection.database}
+ surreal sql --endpoint ${esc_endpoint} --namespace ${esc_namespace} --database ${esc_database}
  `,
  js: `
  import { Surreal } from 'surrealdb.js';
@@ -68,7 +68,7 @@ export function DocsGlobalInit({ language, topic }: TopicProps) {
  $db = new SurrealDB();
  `,
  }),
- []
+ [esc_endpoint, esc_namespace, esc_database]
  );
 
  return (