feat(frontend): misc improvements and refactorings

.github/workflows/frontend.yaml

@@ -108,38 +108,20 @@ jobs:
       - name: Setup Gradle
         uses: gradle/gradle-build-action@v2
 
-#      - name: Build App Bundle
-#        run: npx nx build-android mobile --mode release
-
       - name: Build App APK
         run: npx nx build-android mobile --tasks assembleRelease
 
-      - name: Sign App APK
-        id: sign_app_apk
-        uses: r0adkll/sign-android-release@v1
-        with:
-          releaseDirectory: frontend/apps/mobile/android/app/build/outputs/apk/release
-          signingKeyBase64: ${{ secrets.ANDROID_SIGNING_KEY }}
-          alias: ${{ secrets.ANDROID_KEY_STORE_ALIAS }}
-          keyStorePassword: ${{ secrets.ANDROID_KEY_STORE_PASSWORD }}
-
-#      - name: Sign App Bundle
-#        id: sign_app_aab
+#      - name: Sign App APK
+#        id: sign_app_apk
 #        uses: r0adkll/sign-android-release@v1
 #        with:
-#          releaseDirectory: frontend/apps/mobile/android/app/build/outputs/bundle/release
+#          releaseDirectory: frontend/apps/mobile/android/app/build/outputs/apk/release
 #          signingKeyBase64: ${{ secrets.ANDROID_SIGNING_KEY }}
 #          alias: ${{ secrets.ANDROID_KEY_STORE_ALIAS }}
 #          keyStorePassword: ${{ secrets.ANDROID_KEY_STORE_PASSWORD }}
 
-#      - name: Upload App Bundle
+#      - name: Upload APK
 #        uses: actions/upload-artifact@v3
 #        with:
-#          name: app-release-aab
-#          path: frontend/apps/mobile/android/app/build/outputs/bundle/release/app-release.aab
-
-      - name: Upload APK
-        uses: actions/upload-artifact@v3
-        with:
-          name: app-release-apk
-          path: ${{steps.sign_app_apk.outputs.signedReleaseFile}}
+#          name: app-release-apk
+#          path: ${{steps.sign_app_apk.outputs.signedReleaseFile}}

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

@@ -3,7 +3,7 @@ import { Account } from "@abrechnung/types";
 import { Autocomplete, Box, Popper, TextField, TextFieldProps, Typography } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import React from "react";
-import { selectAccountSlice, useAppSelector } from "../store";
+import { selectAccountSlice, useAppSelector } from "@/store";
 import { getAccountIcon } from "./style/AbrechnungIcons";
 import { DisabledTextField } from "./style/DisabledTextField";
 

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

@@ -1,7 +1,7 @@
 import { selectIsAuthenticated } from "@abrechnung/redux";
 import React from "react";
 import { Navigate, useLocation } from "react-router-dom";
-import { selectAuthSlice, useAppSelector } from "../store";
+import { selectAuthSlice, useAppSelector } from "@/store";
 
 interface Props {
     authFallback?: string;

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

@@ -130,51 +130,44 @@ export const ShareSelect: React.FC<ShareSelectProps> = ({
     const theme = useTheme();
     const isSmallScreen = useMediaQuery((theme: Theme) => theme.breakpoints.down("sm"));
 
+    const [showEvents, setShowEvents] = React.useState(false);
+    const [showAdvanced, setShowAdvanced] = React.useState(false);
     const [searchValue, setSearchValue] = React.useState("");
 
-    const selector = React.useCallback(
-        memoize((state: RootState) => {
+    const unfilteredAccounts = useAppSelector((state) =>
+        selectGroupAccounts({ state: selectAccountSlice(state), groupId })
+    );
+    const accounts = React.useMemo(() => {
+        return unfilteredAccounts.filter((a) => {
             const isAccountShown = (accountId: number) => {
-                if (editable) {
+                if (value[accountId] !== undefined) {
                     return true;
                 }
+
+                if (editable) {
+                    return !(!showEvents && a.type === "clearing");
+                }
                 if (shouldDisplayAccount) {
                     return shouldDisplayAccount(accountId);
                 }
-
-                return value[accountId] !== undefined;
+                return false;
             };
-
-            const accounts = selectGroupAccounts({
-                state: selectAccountSlice(state),
-                groupId,
-            });
-            return accounts.filter((a) => {
-                if (excludeAccounts && excludeAccounts.includes(a.id)) {
-                    return false;
-                }
-                if (!isAccountShown(a.id)) {
-                    return false;
-                }
-                if (searchValue && searchValue !== "") {
-                    if (
-                        a.name.toLowerCase().includes(searchValue.toLowerCase()) ||
-                        a.description.toLowerCase().includes(searchValue.toLowerCase()) ||
-                        (a.type === "clearing" && a.date_info && a.date_info.includes(searchValue.toLowerCase()))
-                    ) {
-                        return true;
-                    }
-                    return false;
-                }
-                return true;
-            });
-        }),
-        [groupId, editable, shouldDisplayAccount]
-    );
-
-    const accounts = useAppSelector(selector);
-
-    const [showAdvanced, setShowAdvanced] = React.useState(false);
+            if (excludeAccounts && excludeAccounts.includes(a.id)) {
+                return false;
+            }
+            if (!isAccountShown(a.id)) {
+                return false;
+            }
+            if (searchValue && searchValue !== "") {
+                return (
+                    a.name.toLowerCase().includes(searchValue.toLowerCase()) ||
+                    a.description.toLowerCase().includes(searchValue.toLowerCase()) ||
+                    (a.type === "clearing" && a.date_info && a.date_info.includes(searchValue.toLowerCase()))
+                );
+            }
+            return true;
+        });
+    }, [value, showEvents, editable, searchValue, unfilteredAccounts, excludeAccounts, shouldDisplayAccount]);
 
     React.useEffect(() => {
         if (Object.values(value).reduce((showAdvanced, value) => showAdvanced || value !== 1, false)) {
@@ -200,7 +193,7 @@ export const ShareSelect: React.FC<ShareSelectProps> = ({
         }
         return nAccs;
     }, 0);
-    const showSearch = !isSmallScreen && accounts.length > 5;
+    const showSearch = !isSmallScreen && unfilteredAccounts.length > 5;
 
     const handleAccountShareChange = (accountId: number, shareValue: number) => {
         const newValue = { ...value };
@@ -222,12 +215,24 @@ export const ShareSelect: React.FC<ShareSelectProps> = ({
                     {nSelectedEvents > 0 && <Chip label={`${nSelectedEvents} Events`} size="small" color="primary" />}
                 </Box>
                 {editable && (
-                    <FormControlLabel
-                        control={<Checkbox name={`show-advanced`} />}
-                        checked={showAdvanced}
-                        onChange={(event: React.ChangeEvent<HTMLInputElement>) => setShowAdvanced(event.target.checked)}
-                        label="Advanced"
-                    />
+                    <Box>
+                        <FormControlLabel
+                            control={<Checkbox name="show-events" />}
+                            checked={showEvents}
+                            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                                setShowEvents(event.target.checked)
+                            }
+                            label="Show Events"
+                        />
+                        <FormControlLabel
+                            control={<Checkbox name="show-advanced" />}
+                            checked={showAdvanced}
+                            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                                setShowAdvanced(event.target.checked)
+                            }
+                            label="Advanced"
+                        />
+                    </Box>
                 )}
             </Grid>
             <Divider variant="middle" sx={{ marginLeft: 0 }} />

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

@@ -2,7 +2,7 @@ import { selectTagsInGroup } from "@abrechnung/redux";
 import { Add as AddIcon } from "@mui/icons-material";
 import { Box, Checkbox, Chip, ChipProps, ListItemIcon, ListItemText, MenuItem, TextFieldProps } from "@mui/material";
 import * as React from "react";
-import { useAppSelector } from "../store";
+import { useAppSelector } from "@/store";
 import { AddNewTagDialog } from "./AddNewTagDialog";
 import { DisabledTextField } from "./style/DisabledTextField";
 

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

@@ -2,9 +2,9 @@ import { selectAccountBalances, selectAccountById, selectGroupCurrencySymbol } f
 import { Box, ListItemAvatar, ListItemText, Tooltip, Typography } from "@mui/material";
 import { DateTime } from "luxon";
 import React from "react";
-import { balanceColor } from "../../core/utils";
-import { selectAccountSlice, selectGroupSlice, useAppSelector } from "../../store";
-import { getAccountLink } from "../../utils";
+import { balanceColor } from "@/core/utils";
+import { selectAccountSlice, selectGroupSlice, useAppSelector } from "@/store";
+import { getAccountLink } from "@/utils";
 import { ClearingAccountIcon } from "../style/AbrechnungIcons";
 import ListItemLink from "../style/ListItemLink";
 

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

@@ -3,7 +3,7 @@ import { Account, Transaction } from "@abrechnung/types";
 import { Alert, List } from "@mui/material";
 import { DateTime } from "luxon";
 import React from "react";
-import { selectAccountSlice, selectTransactionSlice, useAppSelector } from "../../store";
+import { selectAccountSlice, selectTransactionSlice, useAppSelector } from "@/store";
 import AccountClearingListEntry from "./AccountClearingListEntry";
 import AccountTransactionListEntry from "./AccountTransactionListEntry";
 

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

@@ -3,8 +3,8 @@ import { HelpOutline } from "@mui/icons-material";
 import { Chip, ListItemAvatar, ListItemText, Tooltip, Typography } from "@mui/material";
 import { DateTime } from "luxon";
 import React from "react";
-import { balanceColor } from "../../core/utils";
-import { selectGroupSlice, selectTransactionSlice, useAppSelector } from "../../store";
+import { balanceColor } from "@/core/utils";
+import { selectGroupSlice, selectTransactionSlice, useAppSelector } from "@/store";
 import { PurchaseIcon, TransferIcon } from "../style/AbrechnungIcons";
 import ListItemLink from "../style/ListItemLink";
 

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

@@ -1,6 +1,6 @@
 import { selectAccountSlice, selectGroupSlice, useAppSelector } from "@/store";
 import { selectAccountBalances, selectGroupById, selectPersonalAccounts } from "@abrechnung/redux";
-import { DataGrid, GridToolbar } from "@mui/x-data-grid";
+import { DataGrid, GridColDef, GridToolbar } from "@mui/x-data-grid";
 import React from "react";
 import { renderCurrency } from "../style/datagrid/renderCurrency";
 
@@ -17,15 +17,17 @@ export const BalanceTable: React.FC<Props> = ({ groupId }) => {
 
     const tableData = personalAccounts.map((acc) => {
         return {
-            ...acc,
+            id: acc.id,
+            name: acc.name,
+            description: acc.description,
             balance: balances[acc.id]?.balance ?? 0,
             totalPaid: balances[acc.id]?.totalPaid ?? 0,
             totalConsumed: balances[acc.id]?.totalConsumed ?? 0,
         };
     });
 
-    const columns = [
-        { field: "id", headerName: "ID", hide: true },
+    const columns: GridColDef[] = [
+        { field: "id", headerName: "ID" },
         { field: "name", headerName: "Name", width: 150 },
         { field: "description", headerName: "Description", width: 200 },
         {
@@ -50,7 +52,14 @@ export const BalanceTable: React.FC<Props> = ({ groupId }) => {
             <DataGrid
                 sx={{ border: 0 }}
                 rows={tableData}
-                columns={columns as any} // TODO: fixme and figure out proper typing
+                initialState={{
+                    columns: {
+                        columnVisibilityModel: {
+                            id: false,
+                        },
+                    },
+                }}
+                columns={columns}
                 disableRowSelectionOnClick
                 autoHeight
                 slots={{

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

@@ -1,7 +1,7 @@
 import { selectAccountBalances, selectAccountById, selectGroupCurrencySymbol } from "@abrechnung/redux";
 import { TableCell } from "@mui/material";
 import React from "react";
-import { selectAccountSlice, selectGroupSlice, useAppSelector } from "../../store";
+import { selectAccountSlice, selectGroupSlice, useAppSelector } from "@/store";
 import { ShareSelect } from "../ShareSelect";
 
 interface Props {

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

@@ -1,7 +1,7 @@
 import React from "react";
-import { api } from "../../core/api";
+import { api } from "@/core/api";
 import { Dialog, DialogTitle, DialogActions, DialogContent, Button, LinearProgress } from "@mui/material";
-import { selectAccountSlice, useAppDispatch, useAppSelector } from "../../store";
+import { selectAccountSlice, useAppDispatch, useAppSelector } from "@/store";
 import { deleteAccount, selectAccountById } from "@abrechnung/redux";
 import { toast } from "react-toastify";
 

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

@@ -10,24 +10,22 @@ import {
     LinearProgress,
     TextField,
 } from "@mui/material";
-import { Form, Formik, FormikProps } from "formik";
+import { Form, Formik, FormikHelpers, FormikProps } from "formik";
 import React, { ReactNode } from "react";
 import { toast } from "react-toastify";
-import * as yup from "yup";
-import { api } from "../../core/api";
-import { useAppDispatch } from "../../store";
+import { z } from "zod";
+import { api } from "@/core/api";
+import { useAppDispatch } from "@/store";
+import { toFormikValidationSchema } from "@abrechnung/utils";
 
-interface FormValues {
-    name: string;
-    description: string;
-    addUserAccountOnJoin: boolean;
-}
-
-const validationSchema = yup.object({
-    name: yup.string().required("Name is required"),
-    description: yup.string(),
+const validationSchema = z.object({
+    name: z.string({ required_error: "Name is required" }),
+    description: z.string().optional(),
+    addUserAccountOnJoin: z.boolean(),
 });
 
+type FormValues = z.infer<typeof validationSchema>;
+
 interface Props {
     show: boolean;
     onClose: (
@@ -39,7 +37,7 @@ interface Props {
 export const GroupCreateModal: React.FC<Props> = ({ show, onClose }) => {
     const dispatch = useAppDispatch();
 
-    const handleSubmit = (values, { setSubmitting }) => {
+    const handleSubmit = (values: FormValues, { setSubmitting }: FormikHelpers<FormValues>) => {
         dispatch(
             createGroup({
                 api,
@@ -74,7 +72,7 @@ export const GroupCreateModal: React.FC<Props> = ({ show, onClose }) => {
                         addUserAccountOnJoin: false,
                     }}
                     onSubmit={handleSubmit}
-                    validationSchema={validationSchema}
+                    validationSchema={toFormikValidationSchema(validationSchema)}
                 >
                     {({
                         values,

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

@@ -2,7 +2,7 @@ import { Group } from "@abrechnung/types";
 import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@mui/material";
 import React from "react";
 import { toast } from "react-toastify";
-import { api } from "../../core/api";
+import { api } from "@/core/api";
 
 interface Props {
     show: boolean;

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

@@ -2,7 +2,7 @@ import React from "react";
 import { Autocomplete, Box, Popper, TextField, TextFieldProps, Typography } from "@mui/material";
 import { DisabledTextField } from "../style/DisabledTextField";
 import { styled } from "@mui/material/styles";
-import { selectGroupSlice, useAppSelector } from "../../store";
+import { selectGroupSlice, useAppSelector } from "@/store";
 import { selectGroupMemberIds, selectGroupMemberIdToUsername } from "@abrechnung/redux";
 
 const StyledAutocompletePopper = styled(Popper)(({ theme }) => ({

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

@@ -15,7 +15,7 @@ import { Form, Formik } from "formik";
 import { DateTime } from "luxon";
 import React from "react";
 import { toast } from "react-toastify";
-import { api } from "../../core/api";
+import { api } from "@/core/api";
 
 interface Props {
     group: Group;

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { Alert, AlertTitle } from "@mui/material";
 import { useRecoilValue } from "recoil";
-import { config } from "../../state/config";
+import { config } from "@/state/config";
 
 export const Banner: React.FC = () => {
     const cfg = useRecoilValue(config);