display airac cycle validty

Author: licarth

remix/app/fb/components/TopBar/AiracDataInfo.tsx

@@ -0,0 +1,37 @@
+import { Tag, Tooltip } from 'antd';
+import styled from 'styled-components';
+import { useAiracData } from '../useAiracData';
+
+export const AiracDataInfo = () => {
+    const { airacData } = useAiracData();
+
+    const c = airacData?.cycle;
+
+    const isValidToday = c ? todayIsBetween(c.effectiveStart, c.effectiveEnd) : false;
+    const color = isValidToday ? 'green' : 'red';
+    return c ? (
+        <Container>
+            <span>
+                <Tooltip
+                    title={`valide du ${c.effectiveStart.toLocaleDateString(
+                        'fr-FR',
+                    )} au ${c.effectiveEnd.toLocaleDateString('fr-FR')}`}
+                    color={color}
+                >
+                    <Tag color={color}>
+                        {isValidToday ? '✅' : '❗️'} AIRAC {c.identifier}
+                        {!isValidToday && ' expiré'}
+                    </Tag>
+                </Tooltip>
+            </span>
+        </Container>
+    ) : null;
+};
+
+const todayIsBetween = (start: Date, end: Date) => {
+    return start <= new Date() && new Date() <= end;
+};
+
+const Container = styled.div`
+    padding: 4px;
+`;

remix/app/fb/components/TopBar/TopBar.tsx

@@ -3,13 +3,14 @@ import { type User } from '@firebase/auth';
 import { Avatar, Button, Dropdown, Menu } from 'antd';
 import { useRef } from 'react';
 import styled from 'styled-components';
-import { useFirebaseAuth } from '~/fb/firebase/auth/FirebaseAuthContext';
 import { Login } from '~/fb/Login';
 import Modal, { type ModalHandle } from '~/fb/Modal';
+import { useFirebaseAuth } from '~/fb/firebase/auth/FirebaseAuthContext';
 import { useHelpPage } from '../HelpPageContext';
 import { SearchBar } from '../SearchBar';
 import { useAiracData } from '../useAiracData';
 import { useRoute } from '../useRoute';
+import { AiracDataInfo } from './AiracDataInfo';
 
 export const TopBar = () => {
     const { user, googleSignIn, anonymousSignIn, signOut } = useFirebaseAuth();
@@ -21,6 +22,7 @@ export const TopBar = () => {
             <SearchBar airacData={airacData} />
 
             <RightButtons>
+                <AiracDataInfo />
                 <AppLogo>
                     <LogoLeft>FLIGHT</LogoLeft>
                     <LogoRight>PLOT</LogoRight>

remix/package-lock.json

@@ -83,7 +83,7 @@
         "sharp": "^0.30.7",
         "storybook": "^6.5.12",
         "styled-components": "^5.3.5",
-        "ts-aerodata-france": "^0.1.12",
+        "ts-aerodata-france": "^0.1.14",
         "uuid": "^9.0.0"
     },
     "devDependencies": {