feat: use date-fns instead of luxon (#508)

fix: remove unused constants and use latest favicon --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
graasp · Jan 25, 2024 · 03751df · 03751df
1 parent 307a50b
commit 03751df
Show file tree

Hide file tree

Showing 16 changed files with 122 additions and 429 deletions.
diff --git a/app/all-collections/page.tsx b/app/all-collections/page.tsx
@@ -1,5 +1,6 @@
 import Head from 'next/head';
 
+import { Suspense } from 'react';
 import { dehydrate } from 'react-query/core';
 
 import Hydrate from '../../src/components/HydrateClient';
@@ -42,7 +43,9 @@ const Page = async () => {
       </Head>
       <Hydrate state={dehydratedState}>
         <Wrapper dehydratedState={dehydratedState}>
-          <AllCollections />
+          <Suspense>
+            <AllCollections />
+          </Suspense>
         </Wrapper>
       </Hydrate>
     </>

diff --git a/public/graasp.svg → app/icon.svg b/public/graasp.svg → app/icon.svg
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,3 +1,4 @@
+import { Suspense } from 'react';
 import 'react-toastify/dist/ReactToastify.css';
 
 import ThemeRegistry from './ThemeRegistry';
@@ -8,9 +9,11 @@ const RootLayout = ({ children }: { children: React.ReactNode }) => {
     // TODO: change lang
     <html lang="en">
       <body>
-        <Providers>
-          <ThemeRegistry options={{ key: 'mui' }}>{children}</ThemeRegistry>
-        </Providers>
+        <Suspense>
+          <Providers>
+            <ThemeRegistry options={{ key: 'mui' }}>{children}</ThemeRegistry>
+          </Providers>
+        </Suspense>
       </body>
     </html>
   );

diff --git a/cypress/e2e/myLists/myPublishments.cy.ts b/cypress/e2e/myLists/myPublishments.cy.ts
diff --git a/package.json b/package.json
@@ -34,9 +34,9 @@
     "@emotion/server": "11.11.0",
     "@emotion/styled": "11.11.0",
     "@graasp/query-client": "2.2.1",
-    "@graasp/sdk": "3.4.1",
+    "@graasp/sdk": "github:graasp/graasp-sdk#build-with-vite",
     "@graasp/translations": "1.22.1",
-    "@graasp/ui": "4.2.0",
+    "@graasp/ui": "4.3.1",
     "@mui/icons-material": "5.14.19",
     "@mui/lab": "5.0.0-alpha.140",
     "@mui/material": "5.14.19",
@@ -45,6 +45,7 @@
     "@testing-library/react": "14.1.2",
     "@testing-library/user-event": "14.5.1",
     "@trivago/prettier-plugin-sort-imports": "4.3.0",
+    "date-fns": "3.3.1",
     "eslint-config-next": "14.0.4",
     "http-status-codes": "2.3.0",
     "i18next": "23.7.16",
@@ -53,8 +54,7 @@
     "lodash.isobject": "3.0.2",
     "lodash.isstring": "4.0.1",
     "lodash.truncate": "4.4.2",
-    "luxon": "3.4.4",
-    "next": "14.0.4",
+    "next": "14.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-ga4": "2.1.0",
@@ -73,7 +73,6 @@
     "@cypress/code-coverage": "3.12.18",
     "@types/lodash.groupby": "4.6.9",
     "@types/lodash.truncate": "4.4.9",
-    "@types/luxon": "3.3.8",
     "@types/node": "20.10.8",
     "@types/react": "18.2.47",
     "@types/react-dom": "18.2.18",
@@ -108,5 +107,8 @@
       "pages/api/__coverage__.js"
     ]
   },
+  "resolutions": {
+    "@graasp/sdk": "github:graasp/graasp-sdk#build-with-vite"
+  },
   "packageManager": "yarn@4.0.2"
 }
diff --git a/public/defaultAvatar.png b/public/defaultAvatar.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/homePageIcon.png b/public/homePageIcon.png
diff --git a/public/icon.png b/public/icon.png
diff --git a/src/components/collection/ChildrenCard.tsx b/src/components/collection/ChildrenCard.tsx
@@ -1,4 +1,3 @@
-import { DateTime } from 'luxon';
 import dynamic from 'next/dynamic';
 import Link from 'next/link';
 
@@ -15,7 +14,12 @@ import {
 } from '@mui/material';
 import Typography from '@mui/material/Typography';
 
-import { DiscriminatedItem, ItemType, ThumbnailSize } from '@graasp/sdk';
+import {
+  DiscriminatedItem,
+  ItemType,
+  ThumbnailSize,
+  formatDate,
+} from '@graasp/sdk';
 
 import { COLLECTION_CARD_BORDER_RADIUS } from '../../config/cssStyles';
 import { useLibraryTranslation } from '../../config/i18n';
@@ -133,7 +137,7 @@ export const SubItemCard: React.FC<SubItemCardProps> = ({
 
 type FileChildrenCardProps = {
   item: DiscriminatedItem;
-  lang?: string;
+  lang: string;
 };
 
 export const FileChildrenCard: React.FC<FileChildrenCardProps> = ({
@@ -153,9 +157,7 @@ export const FileChildrenCard: React.FC<FileChildrenCardProps> = ({
 
   const subtext = item.updatedAt
     ? t(LIBRARY.SUMMARY_BROWSE_FILE_UPDATED, {
-        date: DateTime.fromMillis(
-          new Date(item.updatedAt).getTime(),
-        ).toLocaleString(DateTime.DATE_FULL, { locale: lang }),
+        date: formatDate(item.updatedAt, { locale: lang }),
       })
     : '...';
 

diff --git a/src/components/collection/CopyButton.tsx b/src/components/collection/CopyButton.tsx
@@ -5,7 +5,6 @@ import CircularProgress from '@mui/material/CircularProgress';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 
-import { ROOT_ID } from '../../config/constants';
 import { useLibraryTranslation } from '../../config/i18n';
 import {
   TREE_MODAL_MY_ITEMS_ID,
@@ -42,11 +41,10 @@ export const useCopyAction = (id?: string) => {
       ids: [id],
     };
 
-    payload.to = [
-      ROOT_ID,
-      TREE_MODAL_MY_ITEMS_ID,
-      TREE_MODAL_SHARED_ITEMS_ID,
-    ].includes(to)
+    // if the location to copy the item is MyItems or SharedItems root, then set the payload.to argument to be undefined
+    payload.to = [TREE_MODAL_MY_ITEMS_ID, TREE_MODAL_SHARED_ITEMS_ID].includes(
+      to,
+    )
       ? undefined
       : to;
 

diff --git a/src/components/collection/Items.tsx b/src/components/collection/Items.tsx
@@ -83,7 +83,7 @@ const CollapsibleItemCategory: React.FC<CollapsibleItemCategoryProps> = ({
 
 type ItemsProps = {
   parentId: string;
-  lang: string | undefined;
+  lang: string;
   isTopLevel: boolean;
 };
 

diff --git a/src/components/collection/summary/Summary.tsx b/src/components/collection/summary/Summary.tsx
@@ -6,12 +6,9 @@ import { Stack, Typography } from '@mui/material';
 import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
 
-import { DiscriminatedItem, ItemPublished } from '@graasp/sdk';
+import { DiscriminatedItem, ItemPublished, ItemType } from '@graasp/sdk';
 
-import {
-  ITEM_TYPES,
-  MAX_COLLECTION_NAME_LENGTH,
-} from '../../../config/constants';
+import { MAX_COLLECTION_NAME_LENGTH } from '../../../config/constants';
 import { useLibraryTranslation } from '../../../config/i18n';
 import LIBRARY from '../../../langs/constants';
 import { QueryClientContext } from '../../QueryClientContext';
@@ -88,13 +85,13 @@ const Summary = ({
         truncatedName={truncatedName}
         totalViews={totalViews}
       />
-      {collection?.type === ITEM_TYPES.FOLDER && (
+      {collection?.type === ItemType.FOLDER && (
         <>
           <Box sx={{ my: 4 }} />
           <Container maxWidth="lg">
             <Items
               parentId={collection?.id}
-              lang={member?.extra?.lang}
+              lang={i18n.language}
               isTopLevel={collection?.path.indexOf('.') < 0}
             />
           </Container>

diff --git a/src/config/constants.ts b/src/config/constants.ts
@@ -1,57 +1,16 @@
-import { CategoryType, ThumbnailSize } from '@graasp/sdk';
-
-export const GRAASP_LOGO_HEADER_HEIGHT = 40;
+import { CategoryType } from '@graasp/sdk';
 
 export const APP_NAME = 'Graasp';
 export const APP_KEYWORDS = ['graasp', 'library'];
 export const APP_AUTHOR = 'Graasp';
-export const DEFAULT_LANG = 'en';
-export const DEFAULT_USER_NAME = 'Anonymous';
 export const DEFAULT_THUMBNAIL_ALT_TEXT = 'Thumbnail';
 
-export const MIN_CARD_WIDTH = 345;
-
-// math
-export const BLOCK_MATH_DIV = 'p';
-export const INLINE_MATH_DIV = 'span';
-export const BLOCK_MATH_INDICATOR = '\\[';
-export const INLINE_MATH_INDICATOR = '\\(';
-export const BLOCK_MATH_REGEX = /(\\\[(.*?)\\])/g;
-export const INLINE_MATH_REGEX = /(\\\((.*?)\\\))/g;
-
-export const ITEM_TYPES = {
-  FOLDER: 'folder',
-};
-
-export const MIME_TYPES = {
-  HTML: 'text/html',
-  TEXT: 'text/plain',
-};
-
-export const MEMBER_TYPES = {
-  OWNER: 'owner',
-  CONTRIBUTOR: 'contributor',
-};
-
-export const ROOT_ID = 'ROOT';
-export const TREE_VIEW_HEIGHT = 300;
-export const TREE_VIEW_MIN_WIDTH = 350;
-
 export const TWITTER_MESSAGE_MAX_LENGTH = 270;
 export const MAIL_BREAK_LINE = '%0D%0A';
 
-export const LEFT_MENU_WIDTH = 300;
-
-export const PICTURE_QUALITIES = {
-  LARGE: 'large',
-  MEDIUM: 'medium',
-};
-export const DEFAULT_PICTURE_QUALITY = PICTURE_QUALITIES.LARGE;
 export const MAX_COLLECTION_NAME_LENGTH = 100;
 
-export const CLIENT_ERROR_MESSAGE = 'Something went wrong!';
 export const DEFAULT_ITEM_IMAGE_PATH = '/libraryDefault.svg';
-// export const DEFAULT_MEMBER_THUMBNAIL = '/defaultAvatar.png';
 export const DEFAULT_MEMBER_THUMBNAIL = `data:image/svg+xml,${encodeURIComponent(`
 <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 -2 24 22" stroke-width="1.5" stroke="none" class="w-6 h-6">
 <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
@@ -60,20 +19,12 @@ export const DEFAULT_MEMBER_THUMBNAIL = `data:image/svg+xml,${encodeURIComponent
 export const SMALL_AVATAR_ICON_SIZE = 30;
 export const MEMBER_AVATAR_ICON_SIZE = 40;
 
-export const DEFAULT_THUMBNAIL_SIZE = ThumbnailSize.Medium;
-
 export const UrlSearch = {
   KeywordSearch: 's',
   CategorySearch: 'category',
   GACrossDomainKey: '_gl',
 };
 
-export const MY_LIST_TAB_NAMES = {
-  MY_LIKES: 'myLikes',
-  MY_FAVORITES: 'myFavorites',
-  MY_PUBLISHMENTS: 'myPublishments',
-};
-
 export const ENV = {
   DEVELOPMENT: 'development',
   PRODUCTION: 'production',

diff --git a/src/utils/date.js b/src/utils/date.js