SOROKA-124: Подключение api интервалов и строк к ui (#36)

SOROKA-124: connection api for dates * SOROKA-124: fix bug this organization * SOROKA-124: remove unused imports * SOROKA-124: initial loading fix * SOROKA-124: fix after review (useEffect) Co-authored-by: Alexander Botenkov <[email protected]>
dh-center · Sep 30, 2022 · 08b460d · 08b460d
1 parent eb1a2db
commit 08b460d
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 36 deletions.
diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
@@ -9,8 +9,6 @@ import { WUNDERKAMMER } from '../../utils/urls'
 
 import { useStore } from '../../stores/rootStore'
 
-import API from '../../api/config'
-
 const Header = observer(() => {
     const navigate = useNavigate()
     const { baseStore, authStore } = useStore()

diff --git a/src/components/dashboard/ListOfCards.tsx b/src/components/dashboard/ListOfCards.tsx
@@ -19,7 +19,7 @@ const ListOfCards = () => {
     // todo: add page query
     const [cards, setCards] = useState({ results: [], total: 0 })
     const [page, setPage] = useState(0)
-    const { authStore, baseStore, cardStore } = useStore()
+    const { authStore, baseStore } = useStore()
     const [currentOrganization, setCurrentOrganization] = useState<string | number>(DEFAULT_ORGANIZATION_FILTER_VALUE)
 
     useEffect(() => {

diff --git a/src/components/properties/DateProperty/DateItem.tsx b/src/components/properties/DateProperty/DateItem.tsx
@@ -47,24 +47,24 @@ const DateItem = ({
 }) => {
     const intl = useIntl()
 
-    const { calendar, jd: startDateJd, startContext, endJD, endContext = null } = value
+    const { calendar, startJD: startDateJd, startContext, endJD, endContext } = value
 
     const parser = CALENDARS[calendar]
-    const placeholder = parser.getDateFormatPlaceholder()
 
-    const [startError, setStartError] = useState('')
-    const [endError, setEndError] = useState('')
     const [dirty, setDirty] = useState({
         start: parser.fromJD(startDateJd),
         startContext,
-
         end: parser.fromJD(endJD),
         endContext,
-
         calendar
     })
 
-    const [isRange, setIsRange] = useState(false)
+    const placeholder = parser.getDateFormatPlaceholder()
+
+    const [startError, setStartError] = useState('')
+    const [endError, setEndError] = useState('')
+
+    const [isRange, setIsRange] = useState(!!dirty.end)
 
     // using state to skip initial mount useEffect calls
     const [isMounted, setIsMounted] = useState(false)
@@ -76,7 +76,8 @@ const DateItem = ({
             return
         }
 
-        const { start, end, calendar } = dirty
+        const { start, end, calendar, startContext: startDateString, endContext: endDateString } = dirty
+
         const currentParser = CALENDARS[calendar]
 
         // validation
@@ -99,29 +100,38 @@ const DateItem = ({
 
         onChange(
             {
-                jd: newStartDate,
-                endJD: newEndDate,
+                startJD: newStartDate,
+                startContext: calendar === CALENDAR_STRING_ID ? startDateString : '',
+                endJD: isRange ? newEndDate : '',
+                endContext: calendar === CALENDAR_STRING_ID && isRange ? endDateString : '',
                 calendar
             },
             isValid,
             ''
         )
-    }, [dirty])
+    }, [dirty, isRange])
 
     const onCalendarChange = (newCalendar: number) => {
-        setDirty((prev) => ({ ...prev, calendar: newCalendar }))
+        setDirty((prev) => {
+            if (newCalendar !== CALENDAR_STRING_ID) {
+                return { ...prev, startContext: '', endContext: '', calendar: newCalendar }
+            }
+            return { ...prev, calendar: newCalendar }
+        })
     }
 
     const fromInput = useMemo(
         () => (
             <DateInputUpd
                 defaultValue={parser.fromJD(startDateJd)}
                 onChange={(newValue, newStringValue) => {
-                    setDirty((prev) => ({
-                        ...prev,
-                        start: newValue || '',
-                        startContext: newStringValue || ''
-                    }))
+                    setDirty((prev) => {
+                        return {
+                            ...prev,
+                            start: newValue || prev.start,
+                            startContext: newStringValue || prev.startContext
+                        }
+                    })
                 }}
                 errorMessage={startError}
                 placeholder={placeholder}
@@ -131,7 +141,7 @@ const DateItem = ({
                         : undefined
                 }
                 stringForm={calendar === CALENDAR_STRING_ID}
-                stringFormDefaultValue=""
+                stringFormDefaultValue={startContext}
             />
         ),
         [calendar, placeholder, parser, startDateJd, startError, setDirty]
@@ -140,18 +150,18 @@ const DateItem = ({
     const toInput = useMemo(
         () => (
             <DateInputUpd
-                defaultValue={parser.fromJD(startDateJd)}
+                defaultValue={parser.fromJD(endJD)}
                 onChange={(newValue, newStringValue) => {
                     setDirty((prev) => ({
                         ...prev,
-                        end: newValue || '',
-                        endContext: newStringValue || ''
+                        end: newValue || prev.end,
+                        endContext: newStringValue || prev.endContext
                     }))
                 }}
                 errorMessage={endError}
                 placeholder={placeholder}
                 stringForm={calendar === CALENDAR_STRING_ID}
-                stringFormDefaultValue=""
+                stringFormDefaultValue={endContext}
             />
         ),
         [calendar, placeholder, parser, startDateJd, endError, setDirty]

diff --git a/src/stores/authStore.ts b/src/stores/authStore.ts
@@ -37,7 +37,6 @@ export default class AuthStore {
     }
 
     setInivitationData(payload: User) {
-        console.log(payload, 'invalidation')
         this.invitationData = payload
     }
 

diff --git a/src/stores/cardStore.ts b/src/stores/cardStore.ts
@@ -55,7 +55,6 @@ export default class CardStore {
 
             runInAction(() => {
                 this.userRole = userRole
-
                 if (this.userRole === USER_ROLES.admin && !this.cardInfo.id) {
                     this.organizationOption = organization
                     this.ownerOption = id

diff --git a/src/stores/propertiesStore.tsx b/src/stores/propertiesStore.tsx
@@ -41,11 +41,11 @@ type PropertyTemplate = {
 
 // todo: distribute into components and make necessary abstractions (all have showHelp/onChange/value)
 export type DateItemData = {
-    jd: number | null // startJD:
-    startContext?: string
+    startJD: number | null
+    startContext: string
     calendar: number
     endJD: number | null
-    endContext?: string
+    endContext: string
 }
 
 export type GeoPropertyProps = {
@@ -89,8 +89,26 @@ const TYPES: { [key: string]: any } = {
     },
     JULIAN_DATE: {
         renderForm: (props: DatePropertyProps) => <DateProperty {...props} />,
-        formatToApi: ({ value, calendar }: { value: number; calendar: number }) => [{ jd: value, calendar }],
-        defaultData: [{ jd: null, calendar: CALENDAR_GREGORIAN_ID }],
+        formatToApi: (value: DateItemData) => {
+            return [
+                {
+                    startJD: value.startJD,
+                    endJD: value.endJD,
+                    startContext: value.startContext,
+                    endContext: value.endContext,
+                    calendar: value.calendar
+                }
+            ]
+        },
+        defaultData: [
+            {
+                startJD: null,
+                endJD: null,
+                startContext: undefined,
+                endContext: undefined,
+                calendar: CALENDAR_GREGORIAN_ID
+            }
+        ],
         hasHelp: true
     },
     GEO_POINT: {
@@ -311,11 +329,11 @@ export default class PropertiesStore {
     }
 
     async getProperties() {
-        CardsAPI.getCardsProperties().then((backendData) => this.setPropertiesFromBackend(backendData.data))
+        await CardsAPI.getCardsProperties().then((backendData) => this.setPropertiesFromBackend(backendData.data))
     }
 
     async fetchTemplates() {
-        TemplatesAPI.getTemplates().then(({ data: backendData }) => this.setTemplatesFromBacked(backendData))
+        await TemplatesAPI.getTemplates().then(({ data: backendData }) => this.setTemplatesFromBacked(backendData))
     }
 
     setTemplatesFromBacked(backendData: PropertyTemplate[]) {

diff --git a/src/utils/dates/gregorian.ts b/src/utils/dates/gregorian.ts
@@ -3,7 +3,7 @@ import GregorianDate from 'ilib/lib/GregorianDate'
 // @ts-ignore
 import DateFmt from 'ilib/lib/DateFmt'
 import { CalendarGeneral } from './types'
- class Calendar implements CalendarGeneral {
+class Calendar implements CalendarGeneral {
     dateFormat = new DateFmt({ template: 'dd.MM.yyyy', timezone: 'GMT' })
 
     validate(dateString: string) {
@@ -49,5 +49,5 @@ import { CalendarGeneral } from './types'
 
 const calendar = new Calendar()
 
-export {Calendar as GregorianCalendar}
+export { Calendar as GregorianCalendar }
 export default calendar
diff --git a/src/views/dashboard/CardPage.tsx b/src/views/dashboard/CardPage.tsx
@@ -40,6 +40,7 @@ const CardPage = observer(() => {
             CardsAPI.getCardByid(id).then((res) => {
                 cardStore.setOriginNameOfCard(res.data.name)
                 cardStore.setCardInfo(res.data)
+                cardStore.setOrganiztionAndOwner()
             })
         }
         if (authStore.currentUser) {
-Original file line number
+Diff line change
@@ Expand Up / @@ -37,7 +37,6 @@ export default class AuthStore { @@
         }
         setInivitationData(payload: User) {
-            console.log(payload, 'invalidation')
             this.invitationData = payload
         }
@@ Expand Down @@