feat(client): show basic metadata for notes and tags on their page

- owner, createdAt, updatedAt
neopostmodern · Jan 13, 2023 · 3c53b79 · 3c53b79
1 parent 39a7a23
commit 3c53b79
Show file tree

Hide file tree

Showing 10 changed files with 131 additions and 19 deletions.
diff --git a/client/src/renderer/components/ButtonLike.tsx b/client/src/renderer/components/ButtonLike.tsx
@@ -0,0 +1,22 @@
+import { Button, Tooltip } from '@mui/material';
+import { FC, PropsWithChildren } from 'react';
+
+const ButtonLike: FC<
+  PropsWithChildren<{ startIcon: JSX.Element; tooltip?: string }>
+> = ({ children, tooltip, startIcon }) => {
+  const buttonLike = (
+    <Button disabled startIcon={startIcon}>
+      {children}
+    </Button>
+  );
+  if (!tooltip) {
+    return buttonLike;
+  }
+  return (
+    <Tooltip title={tooltip} placement="top">
+      <div>{buttonLike}</div>
+    </Tooltip>
+  );
+};
+
+export default ButtonLike;
diff --git a/client/src/renderer/components/EntityMetadata.tsx b/client/src/renderer/components/EntityMetadata.tsx
@@ -0,0 +1,42 @@
+import { AccountCircle, Add, Edit } from '@mui/icons-material';
+import {
+  DateOrTimestamp,
+  dateToCustomizedLongISO8061,
+  dateToShortISO8601,
+} from '../utils/textHelpers';
+import ButtonLike from './ButtonLike';
+
+const EntityMetadata = ({
+  entity,
+}: {
+  entity: {
+    createdAt: DateOrTimestamp;
+    updatedAt: DateOrTimestamp;
+    user: {
+      name: string;
+    };
+  };
+}) => (
+  <>
+    <ButtonLike
+      startIcon={<AccountCircle />}
+      tooltip={`Owned by ${entity.user.name}`}
+    >
+      {entity.user.name}
+    </ButtonLike>
+    <ButtonLike
+      startIcon={<Add />}
+      tooltip={`Created at ${dateToCustomizedLongISO8061(entity.createdAt)}`}
+    >
+      Created {dateToShortISO8601(entity.createdAt)}
+    </ButtonLike>
+    <ButtonLike
+      startIcon={<Edit />}
+      tooltip={`Updated at ${dateToCustomizedLongISO8061(entity.updatedAt)}`}
+    >
+      Updated {dateToShortISO8601(entity.updatedAt)}
+    </ButtonLike>
+  </>
+);
+
+export default EntityMetadata;
diff --git a/client/src/renderer/components/Menu.tsx b/client/src/renderer/components/Menu.tsx
@@ -23,16 +23,6 @@ export const Menu = styled.div<{
         }
       }
     `}
-
-  a,
-  button {
-    &:disabled,
-    &.disabled {
-      text-decoration: line-through;
-      color: gray;
-      cursor: default;
-    }
-  }
 `;
 
 export const StickyMenu = styled(Menu)`

diff --git a/client/src/renderer/components/NotePageMenu.tsx b/client/src/renderer/components/NotePageMenu.tsx
@@ -5,6 +5,7 @@ import useDeleteNote from '../hooks/useDeleteNote';
 import useToggleArchivedNote from '../hooks/useToggleArchivedNote';
 import { DateOrTimestamp, dateToShortISO8601 } from '../utils/textHelpers';
 import DeleteNoteTrigger from './DeleteNoteTrigger';
+import EntityMetadata from './EntityMetadata';
 import { Menu } from './Menu';
 
 const NotePageMenu = ({
@@ -13,7 +14,12 @@ const NotePageMenu = ({
   note: {
     _id: string;
     name: string;
+    createdAt: DateOrTimestamp;
+    updatedAt: DateOrTimestamp;
     archivedAt?: DateOrTimestamp | null;
+    user: {
+      name: string;
+    };
   };
 }) => {
   const {
@@ -31,6 +37,7 @@ const NotePageMenu = ({
       {toggleArchivedNoteErrorSnackbar}
       {deleteLinkErrorSnackbar}
       <Menu>
+        <EntityMetadata entity={note} />
         <Tooltip title={note.archivedAt ? 'Unarchive note' : 'Archive note'}>
           <LoadingButton
             startIcon={<Archive />}
@@ -39,7 +46,7 @@ const NotePageMenu = ({
             endIcon={note.archivedAt ? <Replay /> : undefined}
           >
             {note.archivedAt
-              ? `Archived at ${dateToShortISO8601(note.archivedAt)}`
+              ? `Archived ${dateToShortISO8601(note.archivedAt)}`
               : 'Archive'}
           </LoadingButton>
         </Tooltip>

diff --git a/client/src/renderer/containers/LinkPage.tsx b/client/src/renderer/containers/LinkPage.tsx
@@ -15,6 +15,7 @@ import {
 } from '../generated/graphql';
 import gracefulNetworkPolicy from '../utils/gracefulNetworkPolicy';
 import { useIsDesktopLayout } from '../utils/mediaQueryHooks';
+import { BASE_USER_FRAGMENT } from '../utils/sharedQueriesAndFragments';
 import useDataState, { DataState } from '../utils/useDataState';
 import ComplexLayout from './ComplexLayout';
 
@@ -25,6 +26,9 @@ const LINK_QUERY = gql`
       createdAt
       updatedAt
       archivedAt
+      user {
+        ...BaseUser
+      }
       url
       name
       description
@@ -36,6 +40,7 @@ const LINK_QUERY = gql`
       }
     }
   }
+  ${BASE_USER_FRAGMENT}
 `;
 
 const UPDATE_LINK_MUTATION = gql`

diff --git a/client/src/renderer/containers/TagPage.tsx b/client/src/renderer/containers/TagPage.tsx
@@ -5,6 +5,7 @@ import { useDispatch } from 'react-redux';
 import { useParams } from 'react-router';
 import { goBack } from 'redux-first-history';
 import DeleteTagTrigger from '../components/DeleteTagTrigger';
+import EntityMetadata from '../components/EntityMetadata';
 import FatalApolloError from '../components/FatalApolloError';
 import { Menu } from '../components/Menu';
 import NetworkOperationsIndicator from '../components/NetworkOperationsIndicator';
@@ -20,7 +21,10 @@ import {
   UpdateTagMutationVariables,
 } from '../generated/graphql';
 import gracefulNetworkPolicy from '../utils/gracefulNetworkPolicy';
-import { BASE_TAG_FRAGMENT } from '../utils/sharedQueriesAndFragments';
+import {
+  BASE_TAG_FRAGMENT,
+  BASE_USER_FRAGMENT,
+} from '../utils/sharedQueriesAndFragments';
 import useDataState, { DataState } from '../utils/useDataState';
 import ComplexLayout from './ComplexLayout';
 import { TAGS_QUERY } from './TagsPage';
@@ -30,6 +34,10 @@ const TAG_QUERY = gql`
     tag(tagId: $tagId) {
       ...BaseTag
 
+      user {
+        ...BaseUser
+      }
+
       notes {
         ... on INote {
           type
@@ -53,6 +61,7 @@ const TAG_QUERY = gql`
   }
 
   ${BASE_TAG_FRAGMENT}
+  ${BASE_USER_FRAGMENT}
 `;
 const UPDATE_TAG_MUTATION = gql`
   mutation UpdateTag($tag: InputTag!) {
@@ -180,6 +189,7 @@ const TagPage: FC = () => {
     <ComplexLayout
       secondaryActions={
         <Menu>
+          <EntityMetadata entity={tagQuery.data.tag} />
           <DeleteTagTrigger
             tag={tagQuery.data.tag}
             loading={deleteTagMutation.loading}

diff --git a/client/src/renderer/containers/TextPage.tsx b/client/src/renderer/containers/TextPage.tsx
@@ -14,6 +14,7 @@ import {
 } from '../generated/graphql';
 import gracefulNetworkPolicy from '../utils/gracefulNetworkPolicy';
 import { useIsDesktopLayout } from '../utils/mediaQueryHooks';
+import { BASE_USER_FRAGMENT } from '../utils/sharedQueriesAndFragments';
 import useDataState, { DataState } from '../utils/useDataState';
 import ComplexLayout from './ComplexLayout';
 
@@ -24,6 +25,9 @@ const TEXT_QUERY = gql`
       createdAt
       updatedAt
       archivedAt
+      user {
+        ...BaseUser
+      }
       name
       description
       tags {
@@ -33,6 +37,7 @@ const TEXT_QUERY = gql`
       }
     }
   }
+  ${BASE_USER_FRAGMENT}
 `;
 
 const UPDATE_TEXT_MUTATION = gql`

diff --git a/client/src/renderer/generated/graphql.ts b/client/src/renderer/generated/graphql.ts
@@ -321,7 +321,7 @@ export type LinkQueryVariables = Exact<{
 }>;
 
 
-export type LinkQuery = { __typename: 'Query', link: { __typename: 'Link', _id: string, createdAt: any, updatedAt: any, archivedAt?: any | null, url: string, name: string, description: string, domain: string, tags: Array<{ __typename: 'Tag', _id: string, name: string, color: string }> } };
+export type LinkQuery = { __typename: 'Query', link: { __typename: 'Link', _id: string, createdAt: any, updatedAt: any, archivedAt?: any | null, url: string, name: string, description: string, domain: string, user: { __typename: 'User', _id: string, name: string }, tags: Array<{ __typename: 'Tag', _id: string, name: string, color: string }> } };
 
 export type UpdateLinkMutationVariables = Exact<{
   link: InputLink;
@@ -345,7 +345,7 @@ export type TagWithNotesQueryVariables = Exact<{
 }>;
 
 
-export type TagWithNotesQuery = { __typename: 'Query', tag: { __typename: 'Tag', _id: string, createdAt: any, updatedAt: any, name: string, color: string, notes?: Array<{ __typename: 'Link', type: NoteType, _id: string, name: string, createdAt: any, archivedAt?: any | null, description: string, url: string, domain: string, tags: Array<{ __typename: 'Tag', _id: string, name: string, color: string }> } | { __typename: 'Text', type: NoteType, _id: string, name: string, createdAt: any, archivedAt?: any | null, description: string, tags: Array<{ __typename: 'Tag', _id: string, name: string, color: string }> } | null> | null } };
+export type TagWithNotesQuery = { __typename: 'Query', tag: { __typename: 'Tag', _id: string, createdAt: any, updatedAt: any, name: string, color: string, user: { __typename: 'User', _id: string, name: string }, notes?: Array<{ __typename: 'Link', type: NoteType, _id: string, name: string, createdAt: any, archivedAt?: any | null, description: string, url: string, domain: string, tags: Array<{ __typename: 'Tag', _id: string, name: string, color: string }> } | { __typename: 'Text', type: NoteType, _id: string, name: string, createdAt: any, archivedAt?: any | null, description: string, tags: Array<{ __typename: 'Tag', _id: string, name: string, color: string }> } | null> | null } };
 
 export type UpdateTagMutationVariables = Exact<{
   tag: InputTag;
@@ -378,7 +378,7 @@ export type TextQueryVariables = Exact<{
 }>;
 
 
-export type TextQuery = { __typename: 'Query', text: { __typename: 'Text', _id: string, createdAt: any, updatedAt: any, archivedAt?: any | null, name: string, description: string, tags: Array<{ __typename: 'Tag', _id: string, name: string, color: string }> } };
+export type TextQuery = { __typename: 'Query', text: { __typename: 'Text', _id: string, createdAt: any, updatedAt: any, archivedAt?: any | null, name: string, description: string, user: { __typename: 'User', _id: string, name: string }, tags: Array<{ __typename: 'Tag', _id: string, name: string, color: string }> } };
 
 export type UpdateTextMutationVariables = Exact<{
   text: InputText;
@@ -449,6 +449,8 @@ export type ProfileQueryVariables = Exact<{
 
 export type ProfileQuery = { __typename: 'Query', currentUser?: { __typename: 'User', _id: string, name: string } | null, versions: { __typename: 'Versions', current: string, minimum?: string | null } };
 
+export type BaseUserFragment = { __typename: 'User', _id: string, name: string };
+
 export type BaseTagFragment = { __typename: 'Tag', _id: string, createdAt: any, updatedAt: any, name: string, color: string };
 
 type BaseNote_Link_Fragment = { __typename: 'Link', _id: string, name: string, createdAt: any, updatedAt: any, archivedAt?: any | null, deletedAt?: any | null, description: string, url: string, domain: string, tags: Array<{ __typename: 'Tag', _id: string }> };
@@ -491,6 +493,12 @@ export const UserCredentialsFragmentFragmentDoc = gql`
   }
 }
     `;
+export const BaseUserFragmentDoc = gql`
+    fragment BaseUser on User {
+  _id
+  name
+}
+    `;
 export const BaseTagFragmentDoc = gql`
     fragment BaseTag on Tag {
   _id
@@ -678,6 +686,9 @@ export const LinkDocument = gql`
     createdAt
     updatedAt
     archivedAt
+    user {
+      ...BaseUser
+    }
     url
     name
     description
@@ -689,7 +700,7 @@ export const LinkDocument = gql`
     }
   }
 }
-    `;
+    ${BaseUserFragmentDoc}`;
 
 /**
  * __useLinkQuery__
@@ -841,6 +852,9 @@ export const TagWithNotesDocument = gql`
     query TagWithNotes($tagId: ID!) {
   tag(tagId: $tagId) {
     ...BaseTag
+    user {
+      ...BaseUser
+    }
     notes {
       ... on INote {
         type
@@ -862,7 +876,8 @@ export const TagWithNotesDocument = gql`
     }
   }
 }
-    ${BaseTagFragmentDoc}`;
+    ${BaseTagFragmentDoc}
+${BaseUserFragmentDoc}`;
 
 /**
  * __useTagWithNotesQuery__
@@ -1057,6 +1072,9 @@ export const TextDocument = gql`
     createdAt
     updatedAt
     archivedAt
+    user {
+      ...BaseUser
+    }
     name
     description
     tags {
@@ -1066,7 +1084,7 @@ export const TextDocument = gql`
     }
   }
 }
-    `;
+    ${BaseUserFragmentDoc}`;
 
 /**
  * __useTextQuery__

diff --git a/client/src/renderer/utils/sharedQueriesAndFragments.ts b/client/src/renderer/utils/sharedQueriesAndFragments.ts
@@ -13,6 +13,13 @@ export const PROFILE_QUERY = gql`
   }
 `;
 
+export const BASE_USER_FRAGMENT = gql`
+  fragment BaseUser on User {
+    _id
+    name
+  }
+`;
+
 export const BASE_TAG_FRAGMENT = gql`
   fragment BaseTag on Tag {
     _id

diff --git a/server/lib/resolvers.js b/server/lib/resolvers.js
@@ -11,13 +11,16 @@ import {
   revokeCredential,
   submitLink,
 } from './methods.js'
-import { Link, Note, Tag, Text } from './mongo.js'
+import { Link, Note, Tag, Text, User } from './mongo.js'
 import schemaDefinition from './schema.js'
 
 const INoteResolvers = {
   async tags(note, args, context) {
     return Tag.find({ _id: { $in: note.tags } })
   },
+  async user(note, args, context) {
+    return User.findById(note.user, { name: 1 })
+  },
 }
 const typeEnumFixer = (notes) =>
   // eslint-disable-next-line no-underscore-dangle
@@ -57,6 +60,9 @@ const rootResolvers = {
       }
       return Note.find({ tags: tag, deletedAt: null }).then(typeEnumFixer)
     },
+    async user(note, args, context) {
+      return User.findById(note.user)
+    },
   },
   Query: {
     currentUser(root, args, context) {