refactor(web): normalize exports and other improvements

frontend/apps/mobile/src/navigation/Navigation.tsx

@@ -11,17 +11,17 @@ import { useOptionalApi } from "../core/ApiProvider";
 import { notify } from "../notifications";
 import { AddGroup } from "../screens/AddGroup";
 import { GroupList } from "../screens/GroupList";
-import HomeScreen from "../screens/HomeScreen";
-import LoginScreen from "../screens/Login";
-import PreferencesScreen from "../screens/PreferencesScreen";
-import ProfileScreen from "../screens/ProfileScreen";
-import RegisterScreen from "../screens/Register";
+import { HomeScreen } from "../screens/HomeScreen";
+import { LoginScreen } from "../screens/Login";
+import { PreferencesScreen } from "../screens/PreferencesScreen";
+import { ProfileScreen } from "../screens/ProfileScreen";
+import { RegisterScreen } from "../screens/Register";
 import { SplashScreen } from "../screens/SplashScreen";
 import { TransactionList } from "../screens/TransactionList";
-import AccountDetail from "../screens/groups/AccountDetail";
-import AccountEdit from "../screens/groups/AccountEdit";
-import AccountList from "../screens/groups/AccountList";
-import TransactionDetail from "../screens/groups/TransactionDetail";
+import { AccountDetail } from "../screens/groups/AccountDetail";
+import { AccountEdit } from "../screens/groups/AccountEdit";
+import { AccountList } from "../screens/groups/AccountList";
+import { TransactionDetail } from "../screens/groups/TransactionDetail";
 import {
     changeActiveGroup,
     selectActiveGroupId,
@@ -32,7 +32,7 @@ import {
     useAppSelector,
 } from "../store";
 import { Theme } from "../theme";
-import DrawerContent from "./DrawerContent";
+import { DrawerContent } from "./DrawerContent";
 import { Header } from "./Header";
 import { linkingOptions } from "./LinkingConfiguration";
 import { GroupStackParamList, GroupTabParamList, RootDrawerParamList } from "./types";

frontend/apps/mobile/src/screens/Register.tsx

@@ -34,7 +34,7 @@ const initialValues: FormSchema = {
     password2: "",
 };
 
-export const Register: React.FC<RootDrawerScreenProps<"Register">> = ({ navigation }) => {
+export const RegisterScreen: React.FC<RootDrawerScreenProps<"Register">> = ({ navigation }) => {
     const { t } = useTranslation();
     const theme = useTheme();
     const loggedIn = useAppSelector((state) => selectIsAuthenticated({ state: selectAuthSlice(state) }));
@@ -182,5 +182,3 @@ const styles = StyleSheet.create({
         // color: theme.colors.primary,
     },
 });
-
-export default Register;

frontend/apps/web/src/app/app.tsx

@@ -13,7 +13,7 @@ import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
 import * as React from "react";
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
-import Loading from "../components/style/Loading";
+import { Loading } from "@/components/style";
 import { api, ws } from "../core/api";
 import { selectAuthSlice, selectSettingsSlice, selectTheme, useAppDispatch, useAppSelector } from "../store";
 import { Router } from "./Router";

frontend/apps/web/src/app/authenticated-layout/SidebarGroupList.tsx

@@ -1,5 +1,5 @@
-import GroupCreateModal from "@/components/groups/GroupCreateModal";
-import ListItemLink from "@/components/style/ListItemLink";
+import { GroupCreateModal } from "@/components/groups/GroupCreateModal";
+import { ListItemLink } from "@/components/style";
 import { selectAuthSlice, selectGroupSlice, useAppSelector } from "@/store";
 import { selectGroups, selectIsGuestUser } from "@abrechnung/redux";
 import { Add } from "@mui/icons-material";

frontend/apps/web/src/components/ShareSelect.tsx

@@ -105,7 +105,7 @@ interface ShareSelectProps {
     groupId: number;
     label: string;
     value: TransactionShare;
-    onChange: (newShares: TransactionShare) => void;
+    onChange?: (newShares: TransactionShare) => void;
     error?: boolean | undefined;
     helperText?: React.ReactNode | undefined;
     shouldDisplayAccount?: (accountId: number) => boolean | undefined;
@@ -204,10 +204,10 @@ export const ShareSelect: React.FC<ShareSelectProps> = ({
         const newValue = { ...value };
         if (shareValue === 0) {
             delete newValue[accountId];
-            return onChange(newValue);
+            return onChange?.(newValue);
         } else {
             newValue[accountId] = shareValue;
-            return onChange(newValue);
+            return onChange?.(newValue);
         }
     };
 

frontend/apps/web/src/components/accounts/AccountClearingListEntry.tsx

@@ -5,8 +5,7 @@ import React from "react";
 import { balanceColor } from "@/core/utils";
 import { selectGroupSlice, useAppSelector } from "@/store";
 import { getAccountLink } from "@/utils";
-import { ClearingAccountIcon } from "../style/AbrechnungIcons";
-import ListItemLink from "../style/ListItemLink";
+import { ListItemLink, ClearingAccountIcon } from "../style";
 import { useTranslation } from "react-i18next";
 import { useFormatCurrency } from "@/hooks";
 import { ClearingAccount } from "@abrechnung/types";

frontend/apps/web/src/components/accounts/AccountTransactionListEntry.tsx

@@ -5,8 +5,7 @@ import { DateTime } from "luxon";
 import React from "react";
 import { balanceColor } from "@/core/utils";
 import { selectGroupSlice, selectTransactionSlice, useAppSelector } from "@/store";
-import { PurchaseIcon, TransferIcon } from "../style/AbrechnungIcons";
-import ListItemLink from "../style/ListItemLink";
+import { ListItemLink, PurchaseIcon, TransferIcon } from "../style";
 import { useTranslation } from "react-i18next";
 import { Transaction } from "@abrechnung/types";
 

frontend/apps/web/src/components/accounts/BalanceTable.tsx

@@ -1,26 +1,26 @@
-import { selectAccountSlice, selectGroupSlice, useAppSelector } from "@/store";
-import { selectAccountBalances, selectGroupById, selectSortedAccounts } from "@abrechnung/redux";
+import { selectAccountSlice, useAppSelector } from "@/store";
+import { selectAccountBalances, selectSortedAccounts } from "@abrechnung/redux";
 import { DataGrid, GridColDef, GridToolbar } from "@mui/x-data-grid";
 import React from "react";
 import { renderCurrency } from "../style/datagrid/renderCurrency";
 import { useTranslation } from "react-i18next";
-import { Navigate } from "react-router-dom";
+import { Group } from "@abrechnung/api";
 
 interface Props {
-    groupId: number;
+    group: Group;
 }
 
-export const BalanceTable: React.FC<Props> = ({ groupId }) => {
+export const BalanceTable: React.FC<Props> = ({ group }) => {
     const { t } = useTranslation();
     const personalAccounts = useAppSelector((state) =>
-        selectSortedAccounts({ state: selectAccountSlice(state), groupId, type: "personal", sortMode: "name" })
+        selectSortedAccounts({
+            state: selectAccountSlice(state),
+            groupId: group.id,
+            type: "personal",
+            sortMode: "name",
+        })
     );
-    const group = useAppSelector((state) => selectGroupById({ state: selectGroupSlice(state), groupId }));
-    const balances = useAppSelector((state) => selectAccountBalances({ state, groupId }));
-
-    if (!group) {
-        return <Navigate to="/404" />;
-    }
+    const balances = useAppSelector((state) => selectAccountBalances({ state, groupId: group.id }));
 
     const tableData = personalAccounts.map((acc) => {
         return {

frontend/apps/web/src/components/accounts/ClearingAccountDetail.tsx

@@ -5,11 +5,11 @@ import { selectGroupSlice, useAppSelector } from "@/store";
 import { ShareSelect } from "../ShareSelect";
 import { useTranslation } from "react-i18next";
 import { useFormatCurrency } from "@/hooks";
-import { Account } from "@abrechnung/types";
+import { ClearingAccount } from "@abrechnung/types";
 
 interface Props {
     groupId: number;
-    account: Account;
+    account: ClearingAccount;
 }
 
 export const ClearingAccountDetail: React.FC<Props> = ({ groupId, account }) => {
@@ -22,10 +22,6 @@ export const ClearingAccountDetail: React.FC<Props> = ({ groupId, account }) =>
     if (!currency_symbol) {
         return null;
     }
-    if (account.type !== "clearing") {
-        throw new Error("expected a clearing account to render ClearingAccountDetail, but got a personal account");
-    }
-
     return (
         <>
             <Typography variant="h6">{t("accounts.clearingDistributionOf", "", { account })}</Typography>
@@ -47,7 +43,6 @@ export const ClearingAccountDetail: React.FC<Props> = ({ groupId, account }) =>
                         )}
                     </TableCell>
                 )}
-                onChange={(value) => undefined}
                 editable={false}
             />
         </>

frontend/apps/web/src/components/accounts/index.ts

@@ -0,0 +1,6 @@
+export * from "./AccountClearingListEntry";
+export * from "./AccountTransactionList";
+export * from "./DeleteAccountModal";
+export * from "./ClearingAccountDetail";
+export * from "./BalanceHistoryGraph";
+export * from "./BalanceTable";

frontend/apps/web/src/components/groups/GroupCreateModal.tsx

@@ -137,5 +137,3 @@ export const GroupCreateModal: React.FC<Props> = ({ show, onClose }) => {
         </Dialog>
     );
 };
-
-export default GroupCreateModal;

frontend/apps/web/src/components/groups/index.ts

@@ -0,0 +1,4 @@
+export * from "./InviteLinkCreate";
+export * from "./GroupCreateModal";
+export * from "./GroupDeleteModal";
+export * from "./GroupMemberSelect";

frontend/apps/web/src/components/index.ts

@@ -0,0 +1,7 @@
+export * from "./DateInput";
+export * from "./ShareSelect";
+export * from "./RequireAuth";
+export * from "./TagSelector";
+export * from "./AccountSelect";
+export * from "./TextInput";
+export * from "./NumericInput";

frontend/apps/web/src/components/style/EditableField.tsx

@@ -93,5 +93,3 @@ export const EditableField: React.FC<Props> = ({
         </div>
     );
 };
-
-export default EditableField;

frontend/apps/web/src/components/style/ListItemLink.tsx

@@ -10,10 +10,8 @@ type Props = {
 
 export const ListItemLink: React.FC<Props> = ({ to, children, selected = false, ...props }) => {
     return (
-        <ListItemButton component={RouterLink as any} selected={selected} to={to} {...props}>
+        <ListItemButton component={RouterLink} selected={selected} to={to} {...props}>
             {children}
         </ListItemButton>
     );
 };
-
-export default ListItemLink;

frontend/apps/web/src/components/style/Loading.tsx

@@ -8,5 +8,3 @@ export const Loading: React.FC = () => {
         </Grid>
     );
 };
-
-export default Loading;

frontend/apps/web/src/components/style/index.ts

@@ -0,0 +1,7 @@
+export * from "./AbrechnungIcons";
+export * from "./ListItemLink";
+export * from "./Loading";
+export * from "./Search";
+export * from "./EditableField";
+export * from "./DisabledTextField";
+export * from "./MobilePaper";

frontend/apps/web/src/core/config.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { z } from "zod";
 import { environment } from "@/environments/environment";
 import { AlertColor } from "@mui/material/Alert/Alert";
-import Loading from "@/components/style/Loading";
+import { Loading } from "@/components/style";
 import { Alert, AlertTitle } from "@mui/material";
 
 const configSchema = z.object({

frontend/apps/web/src/pages/accounts/AccountDetail/AccountDetail.tsx

@@ -1,8 +1,7 @@
 import { AccountTransactionList } from "@/components/accounts/AccountTransactionList";
 import { BalanceHistoryGraph } from "@/components/accounts/BalanceHistoryGraph";
 import { ClearingAccountDetail } from "@/components/accounts/ClearingAccountDetail";
-import { Loading } from "@/components/style/Loading";
-import { MobilePaper } from "@/components/style/mobile";
+import { MobilePaper, Loading } from "@/components/style";
 import { useQuery, useTitle } from "@/core/utils";
 import { selectAccountSlice, selectGroupSlice, useAppSelector } from "@/store";
 import { selectAccountById, selectGroupById } from "@abrechnung/redux";

frontend/apps/web/src/pages/accounts/Balances.tsx

@@ -1,6 +1,5 @@
 import { BalanceTable } from "@/components/accounts/BalanceTable";
-import { ListItemLink } from "@/components/style/ListItemLink";
-import { MobilePaper } from "@/components/style/mobile";
+import { MobilePaper, ListItemLink } from "@/components/style";
 import { useTitle } from "@/core/utils";
 import { useFormatCurrency } from "@/hooks";
 import { selectAccountSlice, selectGroupSlice, useAppSelector } from "@/store";
@@ -224,7 +223,7 @@ export const Balances: React.FC<Props> = ({ groupId }) => {
                     )}
                 </TabPanel>
                 <TabPanel value="2" sx={{ padding: { xs: 1, md: 2 } }}>
-                    <BalanceTable groupId={groupId} />
+                    <BalanceTable group={group} />
                 </TabPanel>
             </TabContext>
             <Divider />

frontend/apps/web/src/pages/accounts/ClearingAccountList/ClearingAccountList.tsx

@@ -25,7 +25,7 @@ import React, { useState } from "react";
 import { Navigate, useNavigate } from "react-router-dom";
 import { TagSelector } from "@/components/TagSelector";
 import { DeleteAccountModal } from "@/components/accounts/DeleteAccountModal";
-import { MobilePaper } from "@/components/style/mobile";
+import { MobilePaper } from "@/components/style";
 import { useTitle } from "@/core/utils";
 import { selectAccountSlice, selectGroupSlice, useAppDispatch, useAppSelector } from "@/store";
 import { getAccountLink } from "@/utils";

frontend/apps/web/src/pages/accounts/PersonalAccountList/PersonalAccountList.tsx

@@ -1,5 +1,5 @@
 import { DeleteAccountModal } from "@/components/accounts/DeleteAccountModal";
-import { MobilePaper } from "@/components/style/mobile";
+import { MobilePaper } from "@/components/style";
 import { useTitle } from "@/core/utils";
 import { selectAccountSlice, selectAuthSlice, selectGroupSlice, useAppDispatch, useAppSelector } from "@/store";
 import { AccountSortMode } from "@abrechnung/core";

frontend/apps/web/src/pages/accounts/SettlementPlanDisplay.tsx

@@ -1,4 +1,4 @@
-import { MobilePaper } from "@/components/style/mobile";
+import { MobilePaper } from "@/components/style";
 import { selectAccountSlice, selectGroupSlice, useAppDispatch, useAppSelector } from "@/store";
 import { SettlementPlanItem } from "@abrechnung/core";
 import {

frontend/apps/web/src/pages/auth/ConfirmRegistration.tsx

@@ -2,7 +2,7 @@ import { Alert, Button, Container, Link, Typography } from "@mui/material";
 import React, { useState } from "react";
 import { Link as RouterLink, useParams } from "react-router-dom";
 import { Loading } from "@/components/style/Loading";
-import { MobilePaper } from "@/components/style/mobile";
+import { MobilePaper } from "@/components/style";
 import { api } from "@/core/api";
 import { useTitle } from "@/core/utils";
 import { Trans, useTranslation } from "react-i18next";