#25 Allow sorting of columns in table

data-browser/src/components/NewInstanceButton/NewTableButton.tsx

@@ -55,11 +55,12 @@ export function NewTableButton({
     await instanceResource.set(properties.shortname, stringToSlug(name), store);
     await instanceResource.set(
       properties.description,
-      `A row in the ${name} table`,
+      `Represents a row in the ${name} table`,
       store,
     );
     await instanceResource.set(properties.isA, [classes.class], store);
     await instanceResource.set(properties.parent, parent, store);
+    await instanceResource.set(properties.recommends, [properties.name], store);
     await instanceResource.save(store);
 
     createResourceAndNavigate('table', {

data-browser/src/hooks/useGlobalStylesWhileMounted.ts

@@ -1,4 +1,4 @@
-import { useEffect, useId } from 'react';
+import { useId, useInsertionEffect } from 'react';
 
 const getNode = (id: string) => {
   const existingNode = document.getElementById(id);
@@ -21,7 +21,7 @@ const getNode = (id: string) => {
 export function useGlobalStylesWhileMounted(cssText: string) {
   const id = useId();
 
-  useEffect(() => {
+  useInsertionEffect(() => {
     const node = getNode(id);
 
     node.innerHTML = cssText;

data-browser/src/views/File/useFileImageTransitionStyles.ts

@@ -2,9 +2,12 @@ import { getTransitionName } from '../../helpers/transitionName';
 import { useGlobalStylesWhileMounted } from '../../hooks/useGlobalStylesWhileMounted';
 
 export function useFileImageTransitionStyles(subject: string) {
-  const name = getTransitionName('file-image', subject);
+  let css = '';
+  let name = 'none';
 
-  useGlobalStylesWhileMounted(`
+  try {
+    name = getTransitionName('file-image', subject);
+    css = `
     ::view-transition-old(${name}),
     ::view-transition-new(${name}) {
       mix-blend-mode: normal;
@@ -20,8 +23,12 @@ export function useFileImageTransitionStyles(subject: string) {
       animation: none;
       object-fit: cover;
     }
+    `;
+  } catch (e) {
+    // Do nothing
+  }
 
-  `);
+  useGlobalStylesWhileMounted(css);
 
   return { viewTransitionName: name } as Record<string, string>;
 }

data-browser/src/views/ResourcePage.tsx

@@ -28,9 +28,14 @@ import styled from 'styled-components';
 import { FolderPage } from './FolderPage';
 import { ArticlePage } from './Article';
 import { ViewTransitionProps } from '../helpers/ViewTransitionProps';
-import { getTransitionName } from '../helpers/transitionName';
+import { transitionName } from '../helpers/transitionName';
 import { TablePage } from './TablePage';
 
+/** These properties are passed to every View at Page level */
+export type ResourcePageProps = {
+  resource: Resource;
+};
+
 type Props = {
   subject: string;
 };
@@ -48,7 +53,7 @@ function ResourcePage({ subject }: Props): JSX.Element {
   // we remove it to make the page becomes interavtive again.
   useEffect(() => {
     document.body.removeAttribute('inert');
-  });
+  }, []);
 
   if (resource.loading) {
     return (
@@ -82,15 +87,9 @@ const Main = React.memo(styled.main<ViewTransitionProps>`
   height: calc(
     100% - (${p => p.theme.heights.breadCrumbBar} + ${PARENT_PADDING_BLOCK} * 2)
   );
-  view-transition-name: ${props =>
-    getTransitionName('resource-page', props.subject)};
+  ${p => transitionName('resource-page', p.subject)}
 `);
 
-/** There properties are passed to every View at Page level */
-export type ResourcePageProps = {
-  resource: Resource;
-};
-
 function selectComponent(klass: string) {
   switch (klass) {
     case urls.classes.collection:

data-browser/src/views/TablePage/TableCell.tsx

@@ -1,11 +1,4 @@
-import {
-  JSONValue,
-  Property,
-  Resource,
-  urls,
-  useStore,
-  useValue,
-} from '@tomic/react';
+import { JSONValue, Property, Resource, urls, useValue } from '@tomic/react';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Cell } from '../../components/TableEditor';
 import { CellAlign } from '../../components/TableEditor/Cell';
@@ -28,11 +21,6 @@ interface TableCell {
   invalidateTable?: () => void;
 }
 
-const createdAtOpts = {
-  commitDebounce: 0,
-  commit: false,
-};
-
 function useIsEditing(row: number, column: number) {
   const { cursorMode, selectedColumn, selectedRow } = useTableEditorContext();
 
@@ -56,13 +44,12 @@ export function TableCell({
   property,
   invalidateTable,
 }: TableCell): JSX.Element {
-  const store = useStore();
   const [markForInvalidate, setMarkForInvalidate] = useState(false);
   const [value, setValue] = useValue(resource, property.subject, valueOpts);
   const [createdAt, setCreatedAt] = useValue(
     resource,
     urls.properties.commit.createdAt,
-    createdAtOpts,
+    valueOpts,
   );
 
   const dataType = property.datatype;
@@ -78,8 +65,8 @@ export function TableCell({
   const onChange = useCallback(
     async (v: JSONValue) => {
       if (!createdAt) {
-        await setCreatedAt(Date.now());
         await setValue(v);
+        await setCreatedAt(Date.now());
         setMarkForInvalidate(true);
 
         return;
@@ -99,10 +86,8 @@ export function TableCell({
 
   useEffect(() => {
     if (!isEditing && markForInvalidate) {
-      resource.save(store).then(() => {
-        invalidateTable?.();
-        setMarkForInvalidate(false);
-      });
+      setMarkForInvalidate(false);
+      invalidateTable?.();
     }
   }, [isEditing, markForInvalidate]);
 

data-browser/src/views/TablePage/TableHeading.tsx

@@ -1,24 +1,53 @@
-import { Property, useResource, useTitle } from '@tomic/react';
+import {
+  Datatype,
+  Property,
+  Resource,
+  useResource,
+  useTitle,
+} from '@tomic/react';
 import React from 'react';
-import { FaAtom } from 'react-icons/fa';
+import { FaAngleDown, FaAngleUp, FaAtom } from 'react-icons/fa';
 import styled from 'styled-components';
 import { dataTypeIconMap } from './dataTypeMaps';
 import { TableHeadingMenu } from './TableHeadingMenu';
+import { TablePageContext } from './tablePageContext';
+import { IconType } from 'react-icons';
+import { TableSorting } from './tableSorting';
 
 export interface TableHeadingProps {
   column: Property;
 }
 
+function getIcon(
+  propResource: Resource,
+  sorting: TableSorting,
+  dataType: Datatype,
+): IconType {
+  if (sorting.prop === propResource.getSubject()) {
+    return sorting.sortDesc ? FaAngleDown : FaAngleUp;
+  }
+
+  return dataTypeIconMap.get(dataType) ?? FaAtom;
+}
+
 export function TableHeading({ column }: TableHeadingProps): JSX.Element {
-  const Icon = dataTypeIconMap.get(column.datatype!) ?? FaAtom;
   const propResource = useResource(column.subject);
   const [title] = useTitle(propResource);
+  const { setSortBy, sorting } = React.useContext(TablePageContext);
+
+  const Icon = getIcon(propResource, sorting, column.datatype);
+  const isSorted = sorting.prop === propResource.getSubject();
 
   return (
     <>
       <Wrapper>
         <Icon />
-        {title || column.shortname}
+        <NameButton
+          onClick={() => setSortBy(propResource.getSubject())}
+          bold={isSorted}
+        >
+          {title || column.shortname}
+        </NameButton>
       </Wrapper>
       <TableHeadingMenu resource={propResource} />
     </>
@@ -34,3 +63,14 @@ const Wrapper = styled.div`
     color: ${p => p.theme.colors.textLight};
   }
 `;
+
+interface NameButtonProps {
+  bold?: boolean;
+}
+
+const NameButton = styled.button<NameButtonProps>`
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-weight: ${p => (p.bold ? 'bold' : 'normal')};
+`;

data-browser/src/views/TablePage/index.tsx

@@ -10,7 +10,7 @@ import { TableNewRow, TableRow } from './TableRow';
 import { useTableData } from './useTableData';
 import { getValuesFromSubject } from './helpers/clipboard';
 import { NewColumnButton } from './NewColumnButton';
-import { TablePageContext } from './tablePageContext';
+import { TablePageContext, TablePageContextType } from './tablePageContext';
 import { useHandlePaste } from './helpers/useHandlePaste';
 import { useHandleColumnResize } from './helpers/useHandleColumnResize';
 
@@ -33,8 +33,14 @@ const transformToPropertiesPerSubject = async (
 
 export function TablePage({ resource }: ResourcePageProps): JSX.Element {
   const store = useStore();
-  const { tableClass, collection, invalidateCollection, collectionVersion } =
-    useTableData(resource);
+  const {
+    tableClass,
+    sorting,
+    setSortBy,
+    collection,
+    invalidateCollection,
+    collectionVersion,
+  } = useTableData(resource);
 
   const columns = useTableColumns(tableClass);
 
@@ -46,11 +52,13 @@ export function TablePage({ resource }: ResourcePageProps): JSX.Element {
     collectionVersion,
   );
 
-  const tablePageContext = useMemo(
+  const tablePageContext: TablePageContextType = useMemo(
     () => ({
       tableClassResource: tableClass,
+      sorting,
+      setSortBy,
     }),
-    [tableClass],
+    [tableClass, setSortBy, sorting],
   );
 
   const handleDeleteRow = useCallback(

data-browser/src/views/TablePage/tablePageContext.ts

@@ -1,10 +1,18 @@
 import { Resource, unknownSubject } from '@tomic/react';
 import { createContext } from 'react';
+import { TableSorting } from './tableSorting';
 
 export interface TablePageContextType {
   tableClassResource: Resource;
+  sorting: TableSorting;
+  setSortBy: React.Dispatch<string>;
 }
 
 export const TablePageContext = createContext<TablePageContextType>({
   tableClassResource: new Resource(unknownSubject),
+  sorting: {
+    prop: '',
+    sortDesc: true,
+  },
+  setSortBy: () => undefined,
 });

data-browser/src/views/TablePage/tableSorting.ts

@@ -0,0 +1,8 @@
+import { urls } from '@tomic/react';
+
+export interface TableSorting {
+  prop: string;
+  sortDesc: boolean;
+}
+
+export const DEFAULT_SORT_PROP = urls.properties.commit.createdAt;

data-browser/src/views/TablePage/useTableData.ts

@@ -6,27 +6,63 @@ import {
   useResource,
   useSubject,
 } from '@tomic/react';
-import { useMemo } from 'react';
+import { useMemo, useReducer } from 'react';
+import { TableSorting, DEFAULT_SORT_PROP } from './tableSorting';
 
 const PAGE_SIZE = 30;
-const DEFAULT_SORT = urls.properties.commit.createdAt;
+const DEFAULT_SORT = {
+  prop: DEFAULT_SORT_PROP,
+  sortDesc: false,
+};
 
 type UseTableDataResult = {
   tableClass: Resource;
+  sorting: TableSorting;
+  setSortBy: React.Dispatch<string>;
 } & UseCollectionResult;
 
+const useTableSorting = () =>
+  useReducer<(state: TableSorting, property: string) => TableSorting>(
+    (state, property) => {
+      if (state.prop === property && state.sortDesc) {
+        return DEFAULT_SORT;
+      }
+
+      if (state.prop === property) {
+        return {
+          ...state,
+          sortDesc: true,
+        };
+      }
+
+      return {
+        prop: property,
+        sortDesc: false,
+      };
+    },
+    DEFAULT_SORT,
+  );
+
 export function useTableData(resource: Resource): UseTableDataResult {
+  const [sorting, setSortBy] = useTableSorting();
+
   const [classSubject] = useSubject(resource, urls.properties.classType);
   const tableClass = useResource(classSubject);
 
   const queryFilter = useMemo(
     () => ({
       property: urls.properties.parent,
       value: resource.getSubject(),
-      sort_by: DEFAULT_SORT,
+      sort_by: sorting.prop,
+      sort_desc: sorting.sortDesc,
     }),
-    [resource.getSubject()],
+    [resource.getSubject(), sorting.prop, sorting.sortDesc],
   );
 
-  return { tableClass, ...useCollection(queryFilter, PAGE_SIZE) };
+  return {
+    tableClass,
+    sorting,
+    setSortBy,
+    ...useCollection(queryFilter, PAGE_SIZE),
+  };
 }

lib/src/collection.ts

@@ -7,6 +7,7 @@ export interface QueryFilter {
   property?: string;
   value?: string;
   sort_by?: string;
+  sort_desc?: boolean;
 }
 
 export interface CollectionParams extends QueryFilter {
@@ -59,6 +60,10 @@ export class Collection {
     return this.params.sort_by;
   }
 
+  public get sortDesc(): boolean {
+    return !!this.params.sort_desc;
+  }
+
   public get pageSize(): number {
     return parseInt(this.params.page_size, 10);
   }