fix(deps): update dependency date-fns to v3 (#3619)

* fix(deps): update dependency date-fns to v3

* fix(deps): update usage of date-fns format

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Gabe Kangas <gabek@real-ity.com>

web/components/admin/BannedIPsTable.tsx

@@ -1,6 +1,6 @@
 import { Table, Button } from 'antd';
-import format from 'date-fns/format';
 import { SortOrder } from 'antd/lib/table/interface';
+import { format } from 'date-fns';
 import React, { FC } from 'react';
 import dynamic from 'next/dynamic';
 import { User } from '../../types/chat';

web/components/admin/Chart.tsx

@@ -1,4 +1,4 @@
-import format from 'date-fns/format';
+import { format } from 'date-fns';
 import { FC, useRef } from 'react';
 
 import { DownloadOutlined } from '@ant-design/icons';

web/components/admin/LogTable.tsx

@@ -2,7 +2,7 @@ import React, { FC, useState } from 'react';
 import { Table, Tag, Typography } from 'antd';
 import Linkify from 'react-linkify';
 import { SortOrder, TablePaginationConfig } from 'antd/lib/table/interface';
-import format from 'date-fns/format';
+import { format } from 'date-fns';
 
 const { Title } = Typography;
 

web/components/admin/NewsFeed.tsx

@@ -2,7 +2,7 @@
 /* eslint-disable react/no-danger */
 import React, { useState, useEffect, FC } from 'react';
 import { Collapse, Typography, Skeleton } from 'antd';
-import format from 'date-fns/format';
+import { format } from 'date-fns';
 
 import { fetchExternalData } from '../../utils/apis';
 

web/components/admin/UserPopover.tsx

@@ -2,8 +2,7 @@
 
 import { useState, ReactNode, FC } from 'react';
 import { Divider, Modal, Typography, Row, Col, Space, Tooltip } from 'antd';
-import formatDistanceToNow from 'date-fns/formatDistanceToNow';
+import { format, formatDistanceToNow } from 'date-fns';
-import format from 'date-fns/format';
 import { uniq } from 'lodash';
 
 import { BanUserButton } from './BanUserButton';

web/components/admin/UserTable.tsx

@@ -1,5 +1,5 @@
 import { Table } from 'antd';
-import format from 'date-fns/format';
+import { format } from 'date-fns';
 import { SortOrder } from 'antd/lib/table/interface';
 import { FC } from 'react';
 import { User } from '../../types/chat';

web/components/chat/ChatModerationDetailsModal/ChatModerationDetailsModal.tsx

@@ -1,6 +1,6 @@
 import { Button, Col, Collapse, Row, Spin, Table, Tag } from 'antd';
 import { FC, useEffect, useState } from 'react';
-import format from 'date-fns/format';
+import { format } from 'date-fns';
 import { ColumnsType } from 'antd/lib/table';
 import dynamic from 'next/dynamic';
 import { ErrorBoundary } from 'react-error-boundary';

web/components/ui/OfflineBanner/OfflineBanner.tsx

@@ -2,7 +2,7 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import { Divider } from 'antd';
 import { FC } from 'react';
-import formatDistanceToNow from 'date-fns/formatDistanceToNow';
+import { formatDistanceToNow } from 'date-fns';
 import dynamic from 'next/dynamic';
 import classNames from 'classnames';
 import styles from './OfflineBanner.module.scss';

web/components/ui/Statusbar/Statusbar.tsx

@@ -1,5 +1,4 @@
-import formatDistanceToNow from 'date-fns/formatDistanceToNow';
+import { intervalToDuration, formatDistanceToNow } from 'date-fns';
-import intervalToDuration from 'date-fns/intervalToDuration';
 import { FC, useEffect, useState } from 'react';
 import dynamic from 'next/dynamic';
 import classNames from 'classnames';

web/package-lock.json

@@ -24,7 +24,7 @@
 				"autoprefixer": "^10.4.14",
 				"chart.js": "^4.2.0",
 				"classnames": "2.5.1",
-				"date-fns": "^2.29.3",
+				"date-fns": "^3.0.0",
 				"graphemer": "^1.4.0",
 				"interweave": "^13.0.0",
 				"interweave-autolink": "^5.1.0",
@@ -14161,18 +14161,12 @@
 			}
 		},
 		"node_modules/date-fns": {
-			"version": "2.30.0",
+			"version": "3.3.1",
-			"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+			"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.3.1.tgz",
-			"integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+			"integrity": "sha512-y8e109LYGgoQDveiEBD3DYXKba1jWf5BA8YU1FL5Tvm0BTdEfy54WLCwnuYWZNnzzvALy/QQ4Hov+Q9RVRv+Zw==",
-			"dependencies": {
-				"@babel/runtime": "^7.21.0"
-			},
-			"engines": {
-				"node": ">=0.11"
-			},
 			"funding": {
-				"type": "opencollective",
+				"type": "github",
-				"url": "https://opencollective.com/date-fns"
+				"url": "https://github.com/sponsors/kossnocorp"
 			}
 		},
 		"node_modules/dayjs": {
@@ -30712,6 +30706,21 @@
 				"react-dom": ">=16.9.0"
 			}
 		},
+		"node_modules/rc-picker/node_modules/date-fns": {
+			"version": "2.30.0",
+			"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+			"integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+			"dependencies": {
+				"@babel/runtime": "^7.21.0"
+			},
+			"engines": {
+				"node": ">=0.11"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/date-fns"
+			}
+		},
 		"node_modules/rc-progress": {
 			"version": "3.4.2",
 			"resolved": "https://registry.npmjs.org/rc-progress/-/rc-progress-3.4.2.tgz",

web/package.json

@@ -30,7 +30,7 @@
 		"autoprefixer": "^10.4.14",
 		"chart.js": "^4.2.0",
 		"classnames": "2.5.1",
-		"date-fns": "^2.29.3",
+		"date-fns": "^3.0.0",
 		"graphemer": "^1.4.0",
 		"interweave": "^13.0.0",
 		"interweave-autolink": "^5.1.0",

web/pages/admin/access-tokens.tsx

@@ -13,7 +13,7 @@ import {
   Tooltip,
 } from 'antd';
 
-import format from 'date-fns/format';
+import { format } from 'date-fns';
 
 import dynamic from 'next/dynamic';
 import {

web/pages/admin/chat/messages.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, ReactElement } from 'react';
 import { Table, Typography, Button } from 'antd';
 import classNames from 'classnames';
 import { ColumnsType } from 'antd/es/table';
-import format from 'date-fns/format';
+import { format } from 'date-fns';
 
 import dynamic from 'next/dynamic';
 import { MessageType } from '../../../types/chat';

web/pages/admin/federation/actions.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement, useEffect, useState } from 'react';
 import { Table, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table/interface';
-import format from 'date-fns/format';
+import { format } from 'date-fns';
 import { FEDERATION_ACTIONS, fetchData } from '../../../utils/apis';
 
 import { isEmptyObject } from '../../../utils/format';

web/pages/admin/federation/followers.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useContext, ReactElement } from 'react';
 import { Table, Avatar, Button, Tabs } from 'antd';
 import { ColumnsType, SortOrder } from 'antd/lib/table/interface';
-import format from 'date-fns/format';
+import { format } from 'date-fns';
 import dynamic from 'next/dynamic';
 import { ServerStatusContext } from '../../../utils/server-status-context';
 import {