Merge pull request #25 from projectstorm/feature_updated_at

Add updated_at field

README.md

@@ -29,9 +29,10 @@ You can simply paste images you have copied in your clipboard, and then arrange
 * Double click to focus images in the center of the screen
 * Fullscreen toggle
 
-![](./images/screenshot.png)
+![](./images/screenshot1.png)
 ![](./images/screenshot2.png)
 ![](./images/screenshot3.png)
+![](./images/screenshot4.png)
 
 
 ## Requirements

tornado-common/src/api/concepts.ts

@@ -1,6 +1,8 @@
-export interface ConceptBoard {
+export interface ConceptBoardEncoded {
   id: number;
   name: string;
+  updatedAt: string;
+  createdAt: string;
 }
 
 export interface FileData {
@@ -14,15 +16,15 @@ export interface FileData {
 export interface ConceptsRequest {}
 
 export interface ConceptsResponse {
-  concepts: ConceptBoard[];
+  concepts: ConceptBoardEncoded[];
 }
 
 // !----- create ----
 
-export type CreateConceptRequest = Pick<ConceptBoard, 'name'>;
+export type CreateConceptRequest = Pick<ConceptBoardEncoded, 'name'>;
 
 export interface CreateConceptResponse {
-  concept: ConceptBoard;
+  concept: ConceptBoardEncoded;
 }
 
 //! ----- DATA ------
@@ -43,7 +45,7 @@ export interface UpdateConceptDataRequest {
 // !----- UPDATE ----
 
 export interface UpdateConceptRequest {
-  board: ConceptBoard;
+  board: Pick<ConceptBoardEncoded, 'name' | 'id'>;
 }
 
 // !----- delete ----

tornado-frontend/package.json

@@ -19,6 +19,7 @@
     "formik": "^2.4.1",
     "framer-motion": "^10.12.17",
     "lodash": "^4.17.21",
+    "luxon": "^3.3.0",
     "mobx": "^6.9.0",
     "mobx-react": "^7.6.0",
     "react": "^18.2.0",
@@ -33,6 +34,7 @@
   },
   "devDependencies": {
     "@types/lodash": "^4.14.195",
+    "@types/luxon": "^3.3.0",
     "@types/node": "^20.2.6",
     "@types/react": "^18.2.9",
     "@types/react-dom": "^18.2.4",

tornado-frontend/src/routes/manage/ConceptBoardsPage.tsx

@@ -10,6 +10,8 @@ import { Routing } from '../routes';
 import { observer } from 'mobx-react';
 import { TableRowActionsWidget } from '../../widgets/table/TableRowActionsWidget';
 import { ConceptBoardModel } from '../../stores/ConceptsStore';
+import { DateTime } from 'luxon';
+import { RelativeDateCellWidget } from '../../widgets/table/RelativeDateCellWidget';
 
 export interface ConceptBoardRow extends TableRow {
   board: ConceptBoardModel;
@@ -46,9 +48,17 @@ export const ConceptBoardsPage: React.FC = observer((props) => {
             key: 'name',
             label: 'Board name'
           },
+          {
+            key: 'updatedAt',
+            label: 'Updated At',
+            render: ({ row }) => {
+              return <RelativeDateCellWidget date={row.board.board.updatedAt} />;
+            }
+          },
           {
             key: 'actions',
             label: 'Actions',
+            shrink: true,
             render: ({ rowHover, row }) => {
               return (
                 <TableRowActionsWidget show={rowHover}>

tornado-frontend/src/stores/ConceptsStore.ts

@@ -1,5 +1,5 @@
 import { TornadoClient } from '../client/TornadoClient';
-import { BaseListener, BaseObserver, ConceptBoard } from '@projectstorm/tornado-common';
+import { BaseListener, BaseObserver, ConceptBoardEncoded } from '@projectstorm/tornado-common';
 import { Collection } from '../data/Collection';
 import { computed, makeObservable, observable, toJS } from 'mobx';
 import { v4 } from 'uuid';
@@ -14,13 +14,13 @@ export interface ConceptBoardModelListener extends BaseListener {
 }
 
 export interface ConceptBoardModelOptions {
-  board: ConceptBoard;
+  board: ConceptBoardEncoded;
   client: TornadoClient;
 }
 
 export class ConceptBoardModel extends BaseObserver<ConceptBoardModelListener> {
   @observable
-  board: ConceptBoard;
+  board: ConceptBoardEncoded;
 
   @observable
   data: {
@@ -91,7 +91,7 @@ export class ConceptBoardModel extends BaseObserver<ConceptBoardModelListener> {
 }
 
 export class ConceptsStore {
-  _concepts: Collection<ConceptBoardModel, ConceptBoard>;
+  _concepts: Collection<ConceptBoardModel, ConceptBoardEncoded>;
 
   constructor(protected options: ConceptsStoreOptions) {
     this._concepts = new Collection({

tornado-frontend/src/widgets/table/RelativeDateCellWidget.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+import { DateTime } from 'luxon';
+import { useEffect } from 'react';
+import { useForceUpdate } from '../../hooks/useForceUpdate';
+
+export interface RelativeDateCellWidgetProps {
+  date: string;
+}
+
+export const RelativeDateCellWidget: React.FC<RelativeDateCellWidgetProps> = (props) => {
+  const l = DateTime.fromISO(props.date);
+  const forceUpdate = useForceUpdate();
+  useEffect(() => {
+    const res = setInterval(() => {
+      forceUpdate();
+    }, 5000);
+    return () => {
+      clearInterval(res);
+    };
+  }, []);
+
+  return (
+    <>
+      {l.toLocaleString(DateTime.DATETIME_SHORT)}
+      <S.Rel>{l.toRelative()}</S.Rel>
+    </>
+  );
+};
+namespace S {
+  export const Rel = styled.span`
+    opacity: 0.5;
+    padding-left: 10px;
+    font-size: 12px;
+  `;
+}

tornado-frontend/src/widgets/table/TableRowActionsWidget.tsx

@@ -11,5 +11,8 @@ export const TableRowActionsWidget: React.FC<React.PropsWithChildren<TableRowAct
 namespace S {
   export const Container = styled.div<{ show: boolean }>`
     visibility: ${(p) => (p.show ? 'visible' : 'hidden')};
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
   `;
 }

tornado-frontend/src/widgets/table/TableWidget.tsx

@@ -18,6 +18,7 @@ export interface TableCellRenderEvent<T extends TableRow> {
 export interface TableColumn<T extends TableRow> {
   key: string;
   label: string;
+  shrink?: boolean;
   render?: (event: TableCellRenderEvent<T>) => React.JSX.Element | string;
 }
 
@@ -33,7 +34,11 @@ export const TableWidget = <T extends TableRow>(props: TableWidgetProps<T>) => {
       <thead>
         <tr>
           {props.columns.map((c) => {
-            return <S.TH key={c.key}>{c.label}</S.TH>;
+            return (
+              <S.TH shrink={c.shrink} key={c.key}>
+                {c.label}
+              </S.TH>
+            );
           })}
         </tr>
       </thead>
@@ -53,13 +58,12 @@ namespace S {
     width: 100%;
   `;
 
-  export const TR = styled.tr``;
-
-  export const TH = styled.th`
+  export const TH = styled.th<{ shrink: boolean }>`
     color: ${(p) => p.theme.text.heading};
     padding: 5px;
     border-bottom: solid 1px ${(p) => p.theme.layout.separatorLine};
     text-align: left;
+    ${(p) => (p.shrink ? `width: 0%` : '')};
     ${FONT}
   `;
 }

tornado-server/prisma/migrations/20230704231634_updated_at/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE `ConceptBoard` ADD COLUMN `updatedAt` DATETIME(3) NOT NULL DEFAULT CURRENT_TIMESTAMP(3);

tornado-server/prisma/schema.prisma

@@ -21,6 +21,7 @@ model User {
 model ConceptBoard {
   id        Int      @id @default(autoincrement())
   createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt @default(now())
   name      String
   user      User     @relation(fields: [userId], references: [id])
   userId    Int

tornado-server/src/api/ConceptApi.ts

@@ -1,6 +1,7 @@
 import { AbstractApi, ApiError } from './AbstractApi';
 import { System } from '../System';
-import { User } from '@prisma/client';
+import { ConceptBoard, User } from '@prisma/client';
+import { ConceptBoardEncoded } from '@projectstorm/tornado-common';
 
 export class ConceptApi extends AbstractApi {
   constructor(system: System) {
@@ -23,6 +24,15 @@ export class ConceptApi extends AbstractApi {
     });
   }
 
+  encodeConcept(concept: ConceptBoard): ConceptBoardEncoded {
+    return {
+      id: concept.id,
+      name: concept.name,
+      createdAt: concept.createdAt?.toISOString(),
+      updatedAt: concept.updatedAt?.toISOString()
+    };
+  }
+
   async deleteConcept(user: User, id: number) {
     const found = await this.system.db.conceptBoard.findFirst({
       where: {

tornado-server/src/routes/concepts.ts

@@ -22,7 +22,7 @@ export const setupConceptRoutes = (router: Router, system: System) => {
     cb: async ({ user, data }) => {
       const concept = await system.concepts.createConcept(user, data.name);
       return {
-        concept
+        concept: system.concepts.encodeConcept(concept)
       };
     }
   });
@@ -33,19 +33,16 @@ export const setupConceptRoutes = (router: Router, system: System) => {
     route: Routes.CONCEPTS,
     cb: async ({ user, data }) => {
       const res = await system.db.conceptBoard.findMany({
-        select: {
-          id: true,
-          name: true,
-          createdAt: true
-        },
         where: {
           user: {
             id: user.id
           }
         }
       });
       return {
-        concepts: res
+        concepts: res.map((concept) => {
+          return system.concepts.encodeConcept(concept);
+        })
       };
     }
   });