Update

client/src/components/Tree/ObjectTree.tsx

@@ -0,0 +1,110 @@
+import { useState } from 'react'
+import useSWR from 'swr'
+import { fetcher } from '../../http/axiosInstance'
+import { BASE_URL } from '../../constants'
+import { Accordion, NavLink } from '@mantine/core';
+import { setCurrentObjectId, useObjectsStore } from '../../store/objects';
+
+const ObjectTree = () => {
+    const { selectedCity, selectedYear } = useObjectsStore()
+
+    const [existingCount, setExistingCount] = useState(0)
+    const [planningCount, setPlanningCount] = useState(0)
+
+    const { data: existingObjectsList } = useSWR(
+        selectedYear && selectedCity ? `/general/objects/list?year=${selectedYear}&city_id=${selectedCity}&planning=0` : null,
+        (url) => fetcher(url, BASE_URL.ems).then(res => {
+            if (Array.isArray(res)) {
+                let count = 0
+                res.forEach(el => {
+                    count = count + el.count
+                })
+                setExistingCount(count)
+            }
+            return res
+        }),
+        {
+            revalidateOnFocus: false
+        }
+    )
+
+    const { data: planningObjectsList } = useSWR(
+        selectedYear && selectedCity ? `/general/objects/list?year=${selectedYear}&city_id=${selectedCity}&planning=1` : null,
+        (url) => fetcher(url, BASE_URL.ems).then(res => {
+            if (Array.isArray(res)) {
+                let count = 0
+                res.forEach(el => {
+                    count = count + el.count
+                })
+                setPlanningCount(count)
+            }
+            return res
+        }),
+        {
+            revalidateOnFocus: false
+        }
+    )
+
+    return (
+        <Accordion multiple chevronPosition='left'>
+            <TypeTree label='Существующие' value={'existing'} count={existingCount} objectList={existingObjectsList} planning={0} />
+            <TypeTree label='Планируемые' value={'planning'} count={planningCount} objectList={planningObjectsList} planning={1} />
+        </Accordion>
+    )
+}
+
+interface TypeTreeProps {
+    label: string;
+    value: string;
+    count: number;
+    objectList: unknown;
+    planning: number;
+}
+
+const TypeTree = ({
+    label,
+    objectList,
+    count,
+    planning
+}: TypeTreeProps) => {
+
+    return (
+        <NavLink p={0} label={`${label} ${count ? `(${count})` : ''}`}>
+            {Array.isArray(objectList) && objectList.map(list => (
+                <ObjectList key={list.id} label={list.name} id={list.id} planning={planning} count={list.count} />
+            ))}
+        </NavLink>
+    )
+}
+
+interface IObjectList {
+    label: string;
+    id: number;
+    planning: number;
+    count: number;
+}
+
+const ObjectList = ({
+    label,
+    id,
+    planning,
+    count
+}: IObjectList) => {
+    const { selectedCity, selectedYear } = useObjectsStore()
+
+    const { data } = useSWR(
+        selectedCity && selectedYear ? `/general/objects/list?type=${id}&city_id=${selectedCity}&year=${selectedYear}&planning=${planning}` : null,
+        (url) => fetcher(url, BASE_URL.ems),
+        { revalidateOnFocus: false }
+    )
+
+    return (
+        <NavLink p={0} label={`${label} ${count ? `(${count})` : ''}`}>
+            {Array.isArray(data) && data.map((type) => (
+                <NavLink key={type.object_id} label={type.object_id} p={0} onClick={() => setCurrentObjectId(type.object_id)} />
+            ))}
+        </NavLink>
+    )
+}
+
+export default ObjectTree