Logo component

app version as hook

Author: PatrikMatiasko

src/app/clientApp/App/AppRest.ts

@@ -66,4 +66,4 @@ export const getParentAppWellKnownConfiguration = (wellKnowConfigUrl: string) =>
 export const getTheme = (url: string) =>
     fetchApi(`${url}/theme/theme.json`, {
         useToken: false,
-    })
+    })

src/common/hooks/index.js

@@ -5,3 +5,4 @@ export * from './use-is-mounted'
 export * from './use-emitter-data'
 export * from './use-emitter'
 export * from './useWellKnownConfiguration'
+export * from './use-app-version'

src/common/hooks/use-app-version.ts

@@ -0,0 +1,41 @@
+import { useCallback, useEffect, useState } from 'react'
+import { getMinutesBetweenDates } from '../utils'
+import { GITHUB_VERSION_REQUEST_INTERVAL } from '../../app/clientApp/constants'
+import { getVersionNumberFromGithub } from '../../app/clientApp/App/AppRest'
+
+type SettingsType = {
+    requestedDatetime?: string
+}
+
+type VersionObject = {
+    requestedDatetime: Date
+    latest: string
+    latest_url: string
+}
+
+export function useAppVersion(settings: SettingsType) {
+    const { requestedDatetime } = settings
+    const [version, setVersion] = useState<VersionObject | null>(null)
+
+    const requestVersion = useCallback((now: Date) => {
+        getVersionNumberFromGithub().then((ret) => {
+            setVersion({
+                requestedDatetime: now,
+                latest: ret.data.tag_name.replace('v', ''),
+                latest_url: ret.data.html_url,
+            })
+        })
+    }, [])
+
+    useEffect(() => {
+        const now: Date = new Date()
+
+        if (!requestedDatetime || getMinutesBetweenDates(new Date(requestedDatetime), now) > GITHUB_VERSION_REQUEST_INTERVAL) {
+            requestVersion(now)
+        }
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
+
+    return [version]
+}

src/components/Atomic/Logo/Logo.tsx

@@ -0,0 +1,12 @@
+import { FC } from 'react'
+
+import { Props } from './Logo.types'
+
+const Logo: FC<Props> = (props) => {
+    const { css, logo, className, onClick, title } = props
+    return <img alt={title || ''} className={className} css={css} height={logo.height} onClick={onClick} src={logo.source} width={logo.width} />
+}
+
+Logo.displayName = 'Logo'
+
+export default Logo

src/components/Atomic/Logo/Logo.types.ts

@@ -0,0 +1,7 @@
+export type Props = {
+    css?: string
+    logo: { height: string; width: string; source: string }
+    className?: string
+    onClick?: () => void
+    title?: string
+}

src/components/Atomic/Logo/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Logo'
+export * from './Logo'