update

2021-12-11 16:28:42 +01:00
parent 34256d42ba
commit afb278ad87
39 changed files with 46423 additions and 5626 deletions
--- a/src/client/ts/PrayerCircle/PartnerTable.tsx
+++ b/src/client/ts/PrayerCircle/PartnerTable.tsx
@@ -0,0 +1,135 @@
+import * as React from 'react';
+import { useCallback, useMemo } from 'react';
+import { useAppDispatch, useAppSelector } from '../Store/reduxHooks';
+import { selectMemberIds, setWeek } from './prayerCircleSlice';
+import { Button, Flex, Grow, Table } from 'react-bootstrap-mobile';
+import { PrayerCircleCalculator } from './PrayerCircleCalculator';
+
+export type PartnerTableProps = {};
+
+function PartnerTable({}: PartnerTableProps) {
+    // Variables
+    const membersIds = useAppSelector((state) => selectMemberIds(state));
+    const members = useAppSelector((state) => state.prayerCircle.members);
+    const week = useAppSelector((state) => state.prayerCircle.week ?? 0);
+    const useWeekdays = useAppSelector((state) => state.prayerCircle.useWeekdays);
+    const usePartners = useAppSelector((state) => state.prayerCircle.usePartners);
+    const dispatch = useAppDispatch();
+
+    const columnsWeek = useMemo(
+        () => [
+            {
+                Header: 'Partner 1',
+                accessor: 'partner1', // accessor is the "key" in the data
+            },
+            {
+                Header: 'Partner 2',
+                accessor: 'partner2',
+            },
+        ],
+        []
+    );
+
+    const columnsWeekdays = useMemo(
+        () => [
+            {
+                Header: 'Person',
+                accessor: 'person', // accessor is the "key" in the data
+            },
+            {
+                Header: 'Mo',
+                accessor: 'day0',
+            },
+            {
+                Header: 'Di',
+                accessor: 'day1',
+            },
+            {
+                Header: 'Mi',
+                accessor: 'day2',
+            },
+            {
+                Header: 'Do',
+                accessor: 'day3',
+            },
+            {
+                Header: 'Fr',
+                accessor: 'day4',
+            },
+            {
+                Header: 'Sa',
+                accessor: 'day5',
+            },
+            {
+                Header: 'So',
+                accessor: 'day6',
+            },
+        ],
+        []
+    );
+
+    // States
+
+    // Refs
+
+    // Callbacks
+    const incrementWeek = useCallback(() => dispatch(setWeek(week + 1)), [week, dispatch]);
+    const decrementWeek = useCallback(() => dispatch(setWeek(week - 1)), [week, dispatch]);
+
+    // Effects
+
+    // Other
+    const partnerTable = useMemo(
+        () => PrayerCircleCalculator.generateTableFor(membersIds, usePartners),
+        [membersIds, usePartners]
+    );
+
+    if (!partnerTable || membersIds.length === 0) {
+        return null;
+    }
+
+    const partnerTableNames = partnerTable.map((partnerColumn) => {
+        return Object.keys(partnerColumn).map((id) => {
+            const name = members[id]?.name ?? id;
+            const partnerName = members[partnerColumn[id]]?.name ?? partnerColumn[id];
+            return [name, partnerName];
+        }) as [string, string][];
+    });
+
+    let data: Record<string, string>[] = [];
+    if (!useWeekdays) {
+        const column = partnerTableNames[week % partnerTableNames.length];
+        data = column.map(([name1, name2]) => ({
+            partner1: name1,
+            partner2: name2,
+        }));
+    } else {
+        data = [];
+        for (let i = 0; i < 7; i++) {
+            const column = partnerTableNames[(week * 7 + i) % partnerTableNames.length];
+            column.forEach(([name1, name2], index) => {
+                if (!data[index]) {
+                    data[index] = { person: name1 };
+                }
+                data[index][`day${i}`] = name2;
+            });
+        }
+    }
+
+    const columns = useWeekdays ? columnsWeekdays : columnsWeek;
+
+    return (
+        <>
+            <Flex>
+                <Button onClick={decrementWeek}>&lt;</Button>
+                <Grow center>Woche {week + 1}</Grow>
+                <Button onClick={incrementWeek}>&gt;</Button>
+            </Flex>
+            {/* <List renderItem={renderPartnerPaar} keyExtractor={partnerKeyExtractor} items={partners}/> */}
+            <Table data={data} columns={columns} />
+        </>
+    );
+}
+
+const tmp = React.memo(PartnerTable) as typeof PartnerTable;
+export { tmp as PartnerTable };