From 392fec3186077ca23efe522646edb07acea34d0d Mon Sep 17 00:00:00 2001 From: Aine <97398200+aine-etke@users.noreply.github.com> Date: Mon, 25 Nov 2024 12:51:05 +0200 Subject: [PATCH] refactoring (#178) * unify components import * refactor config and app context * refactor icons * refactor date, error, mxid and storage * refactor synapse utils --- docs/config.md | 2 +- docs/custom-menu.md | 2 +- src/App.tsx | 14 +++-- src/AppContext.tsx | 6 -- src/components/AdminLayout.tsx | 6 +- src/components/AvatarField.tsx | 5 +- .../{devices.tsx => DeviceRemoveButton.tsx} | 4 +- src/components/ExperimentalFeatures.tsx | 2 + .../{ImportFeature.tsx => UserImport.tsx} | 10 +-- src/components/UserRateLimits.tsx | 4 +- src/components/icons.ts | 12 ---- src/components/media.tsx | 5 +- src/components/mxid.tsx | 20 ------ src/index.tsx | 6 +- src/pages/LoginPage.test.tsx | 2 +- src/pages/LoginPage.tsx | 13 ++-- src/resources/destinations.tsx | 2 +- src/resources/registration_tokens.tsx | 2 +- src/resources/reports.tsx | 2 +- src/resources/rooms.tsx | 2 +- src/resources/users.tsx | 12 ++-- src/storage.ts | 3 - src/synapse/authProvider.test.ts | 27 ++++---- src/synapse/authProvider.ts | 33 +++++----- src/synapse/dataProvider.test.ts | 5 +- src/synapse/dataProvider.ts | 61 +++++++++---------- .../{synapse.test.ts => matrix.test.ts} | 2 +- src/synapse/{synapse.ts => matrix.ts} | 49 +-------------- src/{components => utils}/config.ts | 6 +- src/{components => utils}/date.ts | 0 src/{components => utils}/error.ts | 0 src/utils/fetchMedia.ts | 9 +-- src/utils/icons.ts | 16 +++++ src/utils/mxid.ts | 52 ++++++++++++++++ src/utils/password.ts | 10 +++ 35 files changed, 200 insertions(+), 206 deletions(-) delete mode 100644 src/AppContext.tsx rename src/components/{devices.tsx => DeviceRemoveButton.tsx} (90%) rename src/components/{ImportFeature.tsx => UserImport.tsx} (98%) delete mode 100644 src/components/icons.ts delete mode 100644 src/components/mxid.tsx delete mode 100644 src/storage.ts rename src/synapse/{synapse.test.ts => matrix.test.ts} (95%) rename src/synapse/{synapse.ts => matrix.ts} (51%) rename src/{components => utils}/config.ts (94%) rename src/{components => utils}/date.ts (100%) rename src/{components => utils}/error.ts (100%) create mode 100644 src/utils/icons.ts create mode 100644 src/utils/mxid.ts create mode 100644 src/utils/password.ts diff --git a/docs/config.md b/docs/config.md index 01f75ac..67e05c3 100644 --- a/docs/config.md +++ b/docs/config.md @@ -35,7 +35,7 @@ In this case, you could provide the configuration in the `/.well-known/matrix/cl * `menu` - add custom menu items to the main menu (sidebar) by providing a `menu` array in the config. Each `menu` item can contain the following fields: * `label` (required): The text to display in the menu. - * `icon` (optional): The icon to display next to the label, one of the [../src/components/icons.ts] icons, otherwise a default icon will be used. + * `icon` (optional): The icon to display next to the label, one of the [src/utils/icons.ts](../src/utils/icons.ts) icons, otherwise a default icon will be used. * `url` (required): The URL to navigate to when the menu item is clicked. [More details](custom-menu.md) diff --git a/docs/custom-menu.md b/docs/custom-menu.md index 6422ba3..cb1ca14 100644 --- a/docs/custom-menu.md +++ b/docs/custom-menu.md @@ -10,7 +10,7 @@ The examples below contain the configuration settings to add a link to the [Syna Each `menu` item can contain the following fields: * `label` (required): The text to display in the menu. -* `icon` (optional): The icon to display next to the label, one of the [../src/components/icons.ts] icons, otherwise a +* `icon` (optional): The icon to display next to the label, one of the [src/utils/icons.ts](../src/utils/icons.ts) icons, otherwise a default icon will be used. * `url` (required): The URL to navigate to when the menu item is clicked. diff --git a/src/App.tsx b/src/App.tsx index 3c4162c..d1d6468 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,10 +2,11 @@ import { merge } from "lodash"; import polyglotI18nProvider from "ra-i18n-polyglot"; import { Admin, CustomRoutes, Resource, resolveBrowserLocale } from "react-admin"; +import { createContext, useContext } from "react"; import { Route } from "react-router-dom"; -import { AdminLayout } from "./components/AdminLayout"; -import { ImportFeature } from "./components/ImportFeature"; +import AdminLayout from "./components/AdminLayout"; +import UserImport from "./components/UserImport"; import germanMessages from "./i18n/de"; import englishMessages from "./i18n/en"; import frenchMessages from "./i18n/fr"; @@ -23,6 +24,7 @@ import users from "./resources/users"; import authProvider from "./synapse/authProvider"; import dataProvider from "./synapse/dataProvider"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { Config } from "./utils/config"; // TODO: Can we use lazy loading together with browser locale? const messages = { @@ -49,7 +51,7 @@ const i18nProvider = polyglotI18nProvider( const queryClient = new QueryClient(); -const App = () => ( +export const App = () => ( ( i18nProvider={i18nProvider} > - } /> + } /> @@ -84,4 +86,8 @@ const App = () => ( ); +export const AppContext = createContext({}); + +export const useAppContext = () => useContext(AppContext) as Config; + export default App; diff --git a/src/AppContext.tsx b/src/AppContext.tsx deleted file mode 100644 index 72b8bc3..0000000 --- a/src/AppContext.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import { createContext, useContext } from "react"; -import { Config } from "./components/config"; - -export const AppContext = createContext({}); - -export const useAppContext = () => useContext(AppContext) as Config; diff --git a/src/components/AdminLayout.tsx b/src/components/AdminLayout.tsx index dd1cc93..8d134fa 100644 --- a/src/components/AdminLayout.tsx +++ b/src/components/AdminLayout.tsx @@ -1,8 +1,8 @@ import { CheckForApplicationUpdate, AppBar, TitlePortal, InspectorButton, Confirm, Layout, Logout, Menu, useLogout, UserMenu } from "react-admin"; import { LoginMethod } from "../pages/LoginPage"; import { useEffect, useState, Suspense } from "react"; -import { Icons, DefaultIcon } from "./icons"; -import { MenuItem, GetConfig, ClearConfig } from "./config"; +import { Icons, DefaultIcon } from "../utils/icons"; +import { MenuItem, GetConfig, ClearConfig } from "../utils/config"; import Footer from "./Footer"; const AdminUserMenu = () => { @@ -96,3 +96,5 @@ export const AdminLayout = ({ children }) => {