feat: zettel references (#87)

* feat: zettel references input

* feat: add references page

Author: arantespp

.husky/commit-msg

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 pnpm commitlint --edit

.husky/pre-commit

@@ -1,6 +1,3 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 pnpm syncpack:list
 pnpm lint-staged
 pnpm run build-graph

.ncurc.js

@@ -1,3 +1,9 @@
 module.exports = {
-  reject: ['next', 'typescript'],
+  reject: [
+    /**
+     * https://github.com/vercel/next.js/issues/61116
+     */
+    'next',
+    'typescript',
+  ],
 };

apps/tereza/.env.Production

@@ -1,3 +1,4 @@
+NEXT_PUBLIC_ENVIRONMENT=Production
 NEXT_PUBLIC_USER_POOL_ID=us-east-1_VTH2qhNx4
 NEXT_PUBLIC_APP_CLIENT_ID=3e01h8f1qtdoinbdebqv69j949
 NEXT_PUBLIC_REGION=us-east-1

apps/tereza/.env.Staging

@@ -1,3 +1,4 @@
+NEXT_PUBLIC_ENVIRONMENT=Staging
 NEXT_PUBLIC_USER_POOL_ID=us-east-2_xa2k7Tam6
 NEXT_PUBLIC_APP_CLIENT_ID=76cflrh2rrh1u7lh923eg1i9ia
 NEXT_PUBLIC_REGION=us-east-2

apps/tereza/package.json

@@ -14,13 +14,17 @@
   },
   "dependencies": {
     "@aws-amplify/adapter-nextjs": "^1.0.13",
+    "@emotion/react": "^11.11.3",
     "@tereza-tech/components": "workspace:^",
-    "@ttoss/forms": "^0.21.9",
-    "@ttoss/react-auth": "^1.7.25",
-    "@ttoss/react-i18n": "^1.25.8",
-    "@ttoss/react-notifications": "^1.24.24",
+    "@ttoss/components": "^1.30.1",
+    "@ttoss/forms": "^0.22.1",
+    "@ttoss/react-auth": "^1.7.27",
+    "@ttoss/react-hooks": "^1.25.2",
+    "@ttoss/react-i18n": "^1.26.0",
+    "@ttoss/react-icons": "^0.3.0",
+    "@ttoss/react-notifications": "^1.24.25",
     "@ttoss/relay-amplify": "^0.5.5",
-    "@ttoss/ui": "^4.0.7",
+    "@ttoss/ui": "^4.1.0",
     "aws-amplify": "^6.0.13",
     "date-fns": "^3.3.1",
     "next": "14.0.4",
@@ -33,8 +37,8 @@
   "devDependencies": {
     "@ttoss/config": "^1.31.4",
     "@ttoss/i18n-cli": "^0.7.5",
-    "@types/node": "^20.11.10",
-    "@types/react": "^18.2.48",
+    "@types/node": "^20.11.16",
+    "@types/react": "^18.2.52",
     "@types/react-dom": "^18.2.18",
     "babel-plugin-relay": "^16.2.0",
     "graphql": "^16.8.1",

apps/tereza/schema/schema.graphql

@@ -63,6 +63,10 @@ enum SortConnectionJournalHistoryEnum {
   NEWEST
 }
 
+enum SortConnectionReferenceEnum {
+  CREATED_AT_DESC
+}
+
 enum SortConnectionZettelNoteEnum {
   CREATED_AT_DESC
 }
@@ -237,6 +241,22 @@ type QueryJournal {
 }
 
 type QueryZettel {
+  references(
+    """Forward pagination argument for returning at most first edges"""
+    first: Int
+
+    """Forward pagination argument for returning at most first edges"""
+    after: String
+
+    """Backward pagination argument for returning at most last edges"""
+    last: Int
+
+    """Backward pagination argument for returning at most last edges"""
+    before: String
+
+    """Sort argument for data ordering"""
+    sort: SortConnectionReferenceEnum = CREATED_AT_DESC
+  ): ReferenceConnection
   insights(content: String!): ZettelInsight!
   note(id: ID!): ZettelNote
   notes(
@@ -258,6 +278,33 @@ type QueryZettel {
   search(text: String!, limit: Int): [ZettelNote!]!
 }
 
+type Reference {
+  id: ID!
+  reference: String!
+  notes: [ZettelNote!]!
+}
+
+"""A connection to a list of items."""
+type ReferenceConnection {
+  """Total object count."""
+  count: Int!
+
+  """Information to aid in pagination."""
+  pageInfo: PageInfo!
+
+  """Information to aid in pagination."""
+  edges: [ReferenceEdge!]!
+}
+
+"""An edge in a connection."""
+type ReferenceEdge {
+  """The item at the end of the edge"""
+  node: Reference!
+
+  """A cursor for use in pagination"""
+  cursor: String!
+}
+
 type Tag {
   id: ID!
   name: String!
@@ -282,6 +329,7 @@ type ZettelNote implements Node {
   embedding: [Float!]
   insights: [String!]
   division: [String!]
+  references: [Reference!]!
   tags: [Tag!]!
 }
 
@@ -364,4 +412,5 @@ input ZettelNoteInput {
   content: String
   insights: [String!]
   division: [String!]
+  references: [String!]
 }

apps/tereza/src/app/my/@sidebar/default.tsx

@@ -47,6 +47,10 @@ const LINKS: {
       href: '/my/zettel/new',
       label: 'New',
     },
+    {
+      href: '/my/zettel/references',
+      label: 'References',
+    },
     {
       href: '/my/zettel/all',
       label: 'All',

apps/tereza/src/app/my/zettel/ZettelHome.tsx

@@ -1,23 +1,29 @@
 'use client';
 
 import * as React from 'react';
-import { Input, Stack } from '@ttoss/ui';
 import {
   type PreloadedQuery,
   graphql,
   usePreloadedQuery,
   useQueryLoader,
 } from 'react-relay';
+import { Search } from '@ttoss/components';
 import {
   SerializablePreloadedQuery,
   useSerializablePreloadedQuery,
 } from 'src/relay/useSerializablePreloadedQuery';
+import { Stack } from '@ttoss/ui';
 import { ZettelHomeSearchQuery } from './__generated__/ZettelHomeSearchQuery.graphql';
 import Link from 'next/link';
 import ZettelHomeQueryNode, {
   ZettelHomeQuery,
 } from './__generated__/ZettelHomeQuery.graphql';
 
+type SearchResult = {
+  id: string;
+  title?: string | null;
+};
+
 const zettelHomeSearchQuery = graphql`
   query ZettelHomeSearchQuery($searchText: String!) {
     zettel {
@@ -29,7 +35,22 @@ const zettelHomeSearchQuery = graphql`
   }
 `;
 
-const SearchResults = ({
+const SearchResults = ({ results = [] }: { results?: SearchResult[] }) => {
+  return (
+    <>
+      {results?.map((result) => {
+        const href = `/my/zettel/${result?.id}`;
+        return (
+          <Link key={result?.id} href={href}>
+            {result?.title || '(No title)'}
+          </Link>
+        );
+      })}
+    </>
+  );
+};
+
+const HandleSearch = ({
   searchQueryRef,
 }: {
   searchQueryRef: PreloadedQuery<ZettelHomeSearchQuery>;
@@ -39,7 +60,9 @@ const SearchResults = ({
     searchQueryRef
   );
 
-  return <pre>{JSON.stringify(data.zettel?.search, null, 2)}</pre>;
+  const results = [...(data.zettel?.search || [])];
+
+  return <SearchResults results={results} />;
 };
 
 export const ZettelHome = ({
@@ -73,40 +96,45 @@ export const ZettelHome = ({
     queryRef
   );
 
-  const notes = data.zettel?.notes?.edges?.map((edge) => {
-    return { ...edge?.node, title: edge?.node?.title || '(No title)' };
-  });
+  const defaultResults =
+    data.zettel?.notes?.edges.map((edge) => {
+      return edge?.node;
+    }) || [];
 
-  const [searchText, setSearchText] = React.useState<string>('');
+  const [searchText, setSearchText] = React.useState<string | undefined>('');
 
   const [searchQueryRef, search, disposeSearchQuery] =
     useQueryLoader<ZettelHomeSearchQuery>(zettelHomeSearchQuery);
 
+  const [isPending, startTransition] = React.useTransition();
+
   React.useEffect(() => {
     if (searchText) {
-      search({ searchText });
+      startTransition(() => {
+        search({ searchText });
+      });
     }
 
     return disposeSearchQuery;
   }, [disposeSearchQuery, search, searchText]);
 
   return (
     <Stack>
-      <Input
+      <Search
+        sx={{
+          marginBottom: 'lg',
+        }}
         value={searchText}
-        onChange={(e) => {
-          setSearchText(e.target.value);
+        onChange={(newSearchText) => {
+          setSearchText(newSearchText as string);
         }}
+        loading={isPending}
       />
-      {searchQueryRef && <SearchResults searchQueryRef={searchQueryRef} />}
-      {notes?.map((note) => {
-        const href = `/my/zettel/${note?.id}`;
-        return (
-          <Link key={note?.id} href={href}>
-            {note?.title}
-          </Link>
-        );
-      })}
+      {searchQueryRef ? (
+        <HandleSearch searchQueryRef={searchQueryRef} />
+      ) : (
+        <SearchResults results={defaultResults} />
+      )}
     </Stack>
   );
 };

apps/tereza/src/app/my/zettel/[id]/editor/ZettelEditor.tsx

@@ -46,6 +46,9 @@ export const ZettelEditor = ({
         }
         insights
         division
+        references {
+          reference
+        }
       }
     `,
     query.zettel?.note
@@ -61,6 +64,9 @@ export const ZettelEditor = ({
     }),
     insights: [...(data?.insights ?? [])],
     division: [...(data?.division ?? [])],
+    references: (data?.references ?? []).map((reference) => {
+      return reference.reference;
+    }),
   };
 
   return <ZettelNoteForm note={note} />;