From c0c48efe9b1b99c9cd7cf4e7dc4622d20fc8a58c Mon Sep 17 00:00:00 2001 From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> Date: Mon, 19 Aug 2024 20:43:54 +0800 Subject: [PATCH 1/9] Create stories CSS module --- src/styles/Stories.module.scss | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 src/styles/Stories.module.scss diff --git a/src/styles/Stories.module.scss b/src/styles/Stories.module.scss new file mode 100644 index 0000000000..10fdd920c6 --- /dev/null +++ b/src/styles/Stories.module.scss @@ -0,0 +1,5 @@ +@import '_global'; + +.highlight-row { + background-color: #f5f5f5; +} From 765a4f0ef0b6eb76e6611c1552ad2a59d4f6ed77 Mon Sep 17 00:00:00 2001 From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> Date: Mon, 19 Aug 2024 20:44:15 +0800 Subject: [PATCH 2/9] Replace stories table with ag-grid Also refactored to improve code quality. --- src/pages/stories/StoriesTable.tsx | 111 ++++++++++++++++------------- 1 file changed, 62 insertions(+), 49 deletions(-) diff --git a/src/pages/stories/StoriesTable.tsx b/src/pages/stories/StoriesTable.tsx index f0f88391eb..a9749da463 100644 --- a/src/pages/stories/StoriesTable.tsx +++ b/src/pages/stories/StoriesTable.tsx @@ -1,18 +1,14 @@ +import 'ag-grid-community/styles/ag-grid.css'; +import 'ag-grid-community/styles/ag-theme-quartz.css'; + import { Icon as BpIcon } from '@blueprintjs/core/lib/esm/components/icon/icon'; import { IconNames } from '@blueprintjs/icons'; -import { - Flex, - Icon, - Table, - TableBody, - TableCell, - TableHead, - TableHeaderCell, - TableRow, - Text -} from '@tremor/react'; -import React from 'react'; +import { ColDef } from 'ag-grid-community'; +import { AgGridReact, CustomCellRendererProps } from 'ag-grid-react'; +import React, { useMemo } from 'react'; +import GradingFlex from 'src/commons/grading/GradingFlex'; import { StoryListView } from 'src/features/stories/StoriesTypes'; +import classes from 'src/styles/Stories.module.scss'; type Props = { headers: Array<{ id: string; header: string }>; @@ -22,45 +18,62 @@ type Props = { const MAX_EXCERPT_LENGTH = 35; +const truncate = (content: string) => { + return content.replaceAll(/\s+/g, ' ').length <= MAX_EXCERPT_LENGTH + ? content.replaceAll(/\s+/g, ' ') + : content.split(/\s+/).reduce((acc, cur) => { + return acc.length + cur.length <= MAX_EXCERPT_LENGTH ? acc + ' ' + cur : acc; + }, '') + '…'; +}; + +const defaultColDef: ColDef = { + cellClass: ({ data }) => (data?.isPinned ? classes['highlight-row'] : '') +}; + const StoriesTable: React.FC = ({ headers, stories, storyActions }) => { + const columns: ColDef[] = useMemo( + () => [ + { flex: 2, field: 'authorName', headerName: 'Author' }, + { + flex: 4, + field: 'title', + headerName: 'Title', + cellRenderer: ({ data, value }: CustomCellRendererProps) => + data && ( + + {data.isPinned && } + {value} + + ) + }, + { + flex: 6, + field: 'content', + headerName: 'Content', + valueFormatter: ({ value }) => truncate(value), + cellStyle: { textAlign: 'left' } + }, + { + flex: 3, + field: 'actions' as any, + headerName: 'Actions', + cellRenderer: ({ data }: CustomCellRendererProps) => storyActions(data!) + } + ], + [storyActions] + ); + return ( - - - - {headers.map(({ id, header }) => ( - {header} - ))} - - - - {stories.map(story => { - const { id, authorName, isPinned, title, content } = story; - return ( - - {authorName} - - - {isPinned && } />} - {title} - - - - - {content.replaceAll(/\s+/g, ' ').length <= MAX_EXCERPT_LENGTH - ? content.replaceAll(/\s+/g, ' ') - : content.split(/\s+/).reduce((acc, cur) => { - return acc.length + cur.length <= MAX_EXCERPT_LENGTH - ? acc + ' ' + cur - : acc; - }, '') + '…'} - - - {storyActions(story)} - - ); - })} - -
+
+ +
); }; From 19ee23e68118c4a561ac27c8ff22d97261508635 Mon Sep 17 00:00:00 2001 From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> Date: Mon, 19 Aug 2024 20:45:17 +0800 Subject: [PATCH 3/9] Remove now-unnecessary alias --- src/pages/stories/StoriesTable.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/stories/StoriesTable.tsx b/src/pages/stories/StoriesTable.tsx index a9749da463..d4bd0baf82 100644 --- a/src/pages/stories/StoriesTable.tsx +++ b/src/pages/stories/StoriesTable.tsx @@ -1,7 +1,7 @@ import 'ag-grid-community/styles/ag-grid.css'; import 'ag-grid-community/styles/ag-theme-quartz.css'; -import { Icon as BpIcon } from '@blueprintjs/core/lib/esm/components/icon/icon'; +import { Icon } from '@blueprintjs/core'; import { IconNames } from '@blueprintjs/icons'; import { ColDef } from 'ag-grid-community'; import { AgGridReact, CustomCellRendererProps } from 'ag-grid-react'; @@ -41,7 +41,7 @@ const StoriesTable: React.FC = ({ headers, stories, storyActions }) => { cellRenderer: ({ data, value }: CustomCellRendererProps) => data && ( - {data.isPinned && } + {data.isPinned && } {value} ) From 572e4b70d182b6d06ed42b46157420c5cb45bfe3 Mon Sep 17 00:00:00 2001 From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> Date: Mon, 19 Aug 2024 20:47:39 +0800 Subject: [PATCH 4/9] Replace margin with gap --- src/pages/stories/StoriesTable.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/stories/StoriesTable.tsx b/src/pages/stories/StoriesTable.tsx index d4bd0baf82..d3db9136f6 100644 --- a/src/pages/stories/StoriesTable.tsx +++ b/src/pages/stories/StoriesTable.tsx @@ -40,8 +40,8 @@ const StoriesTable: React.FC = ({ headers, stories, storyActions }) => { headerName: 'Title', cellRenderer: ({ data, value }: CustomCellRendererProps) => data && ( - - {data.isPinned && } + + {data.isPinned && } {value} ) From 98e92494bb5f6d28f4e55c29821c095a80800b26 Mon Sep 17 00:00:00 2001 From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com> Date: Mon, 19 Aug 2024 21:23:02 +0800 Subject: [PATCH 5/9] Replace stories actions with Blueprint components --- src/pages/stories/StoryActions.tsx | 90 +++++++++++++++--------------- 1 file changed, 44 insertions(+), 46 deletions(-) diff --git a/src/pages/stories/StoryActions.tsx b/src/pages/stories/StoryActions.tsx index db5f1e020c..dbc9b9d4aa 100644 --- a/src/pages/stories/StoryActions.tsx +++ b/src/pages/stories/StoryActions.tsx @@ -1,8 +1,8 @@ -import { Icon as BpIcon } from '@blueprintjs/core'; +import { Button, Icon, Position, Tooltip } from '@blueprintjs/core'; import { IconNames } from '@blueprintjs/icons'; -import { Flex, Icon } from '@tremor/react'; import React from 'react'; import { Link } from 'react-router-dom'; +import GradingFlex from 'src/commons/grading/GradingFlex'; type Props = { storyId: number; @@ -30,68 +30,66 @@ const StoryActions: React.FC = ({ handleMovePinDown = () => {} }) => { return ( - + {canView && ( - } - variant="light" - color="green" - /> + + + )} {canEdit && ( - } - variant="light" - color="sky" - /> + + + )} {canPin && isPinned && ( <> - - + )} {canPin && ( - + )} {canDelete && ( - + + )} - - } + + setQuery(e.target.value)} /> - + { ); }} /> - + } /> ); diff --git a/src/pages/stories/StoriesTable.tsx b/src/pages/stories/StoriesTable.tsx index bd438172cc..d66d73379a 100644 --- a/src/pages/stories/StoriesTable.tsx +++ b/src/pages/stories/StoriesTable.tsx @@ -65,7 +65,7 @@ const StoriesTable: React.FC = ({ headers, stories, storyActions }) => { ); return ( -
+
Date: Mon, 19 Aug 2024 21:45:23 +0800 Subject: [PATCH 9/9] Remove tremor from stories editor --- src/pages/stories/Story.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/pages/stories/Story.tsx b/src/pages/stories/Story.tsx index c629a226ac..676eb59cc1 100644 --- a/src/pages/stories/Story.tsx +++ b/src/pages/stories/Story.tsx @@ -1,7 +1,6 @@ import 'js-slang/dist/editors/ace/theme/source'; -import { Classes } from '@blueprintjs/core'; -import { TextInput } from '@tremor/react'; +import { Classes, InputGroup } from '@blueprintjs/core'; import classNames from 'classnames'; import { useEffect, useState } from 'react'; import AceEditor, { IEditorProps } from 'react-ace'; @@ -57,8 +56,8 @@ const Story: React.FC = ({ isViewOnly = false }) => { isViewOnly ? ( <>{title} ) : ( - {