honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

updates on Flight Tracker replace Recoil to Jotai

This commit is contained in:
João Mendes 2022-11-15 10:01:16 +00:00
parent 239725476b
commit b67112adf8
28 changed files with 127 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
samples/react-flighttracker/package-lock.json generated
View File

@ -2524,15 +2524,6 @@
}
}
},
"@microsoft/microsoft-graph-clientV3": {
"version": "npm:@microsoft/microsoft-graph-client@3.0.2",
"resolved": "https://registry.npmjs.org/@microsoft/microsoft-graph-client/-/microsoft-graph-client-3.0.2.tgz",
"integrity": "sha512-eYDiApYmiGsm1s1jfAa/rhB2xQCsX4pWt0vCTd1LZmiApMQfT/c0hXj2hvpuGz5GrcLdugbu05xB79rIV57Pjw==",
"requires": {
"@babel/runtime": "^7.12.5",
"tslib": "^2.2.0"
}
},
"@microsoft/microsoft-graph-types": {
"version": "2.25.0",
"resolved": "https://registry.npmjs.org/@microsoft/microsoft-graph-types/-/microsoft-graph-types-2.25.0.tgz",
@ -3167,6 +3158,32 @@
"adal-angular": "1.0.16",
"msalLegacy": "npm:msal@1.4.12",
"tslib": "2.3.1"
},
"dependencies": {
"@microsoft/microsoft-graph-clientV3": {
"version": "npm:@microsoft/microsoft-graph-client@3.0.2",
"resolved": "https://registry.npmjs.org/@microsoft/microsoft-graph-client/-/microsoft-graph-client-3.0.2.tgz",
"integrity": "sha512-eYDiApYmiGsm1s1jfAa/rhB2xQCsX4pWt0vCTd1LZmiApMQfT/c0hXj2hvpuGz5GrcLdugbu05xB79rIV57Pjw==",
"requires": {
"@babel/runtime": "^7.12.5",
"tslib": "^2.2.0"
}
},
"msalLegacy": {
"version": "npm:msal@1.4.12",
"resolved": "https://registry.npmjs.org/msal/-/msal-1.4.12.tgz",
"integrity": "sha512-gjupwQ6nvNL6mZkl5NIXyUmZhTiEMRu5giNdgHMh8l5EPOnV2Xj6nukY1NIxFacSTkEYUSDB47Pej9GxDYf+1w==",
"requires": {
"tslib": "^1.9.3"
},
"dependencies": {
"tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
}
}
}
}
},
"@microsoft/sp-image-helper": {
@ -14684,6 +14701,11 @@
"resolved": "https://registry.npmjs.org/jju/-/jju-1.4.0.tgz",
"integrity": "sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA=="
},
"jotai": {
"version": "1.9.2",
"resolved": "https://registry.npmjs.org/jotai/-/jotai-1.9.2.tgz",
"integrity": "sha512-/893WrniZwoVc0+3JR056r0FTC/tGbgyHco9dfgde6K8TU6XNxrOSw4jCRdDicncw67A37v2GNGzXSpHKbHPmw=="
},
"js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@ -15995,21 +16017,6 @@
}
}
},
"msalLegacy": {
"version": "npm:msal@1.4.12",
"resolved": "https://registry.npmjs.org/msal/-/msal-1.4.12.tgz",
"integrity": "sha512-gjupwQ6nvNL6mZkl5NIXyUmZhTiEMRu5giNdgHMh8l5EPOnV2Xj6nukY1NIxFacSTkEYUSDB47Pej9GxDYf+1w==",
"requires": {
"tslib": "^1.9.3"
},
"dependencies": {
"tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
}
}
},
"multicast-dns": {
"version": "6.2.3",
"resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-6.2.3.tgz",

1
samples/react-flighttracker/package.json
View File

@ -19,6 +19,7 @@
"@pnp/spfx-controls-react": "^3.11.0",
"axios": "^0.27.2",
"date-fns": "^2.29.2",
"jotai": "^1.9.2",
"office-ui-fabric-react": "7.185.7",
"react": "16.13.1",
"react-dom": "16.13.1",

6
samples/react-flighttracker/src/components/FlightAirportOptions/useFlightAirportOptionsStyles.ts
View File

@ -1,17 +1,17 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import * as react from 'react';
import { useAtomValue } from 'jotai';
import {
IStackStyles,
mergeStyleSets,
} from 'office-ui-fabric-react';
import { useRecoilState } from 'recoil';
import { globalState } from '../../recoil/atoms';
import { globalState } from '../../jotai/atoms';
export const useFlightAeroportOptionsStyles = () => {
const [ globalStateApp ] = useRecoilState(globalState);
const globalStateApp = useAtomValue(globalState);
const { currentTheme } = globalStateApp;
const stackContainer : IStackStyles = react.useMemo(()=> {

6
samples/react-flighttracker/src/components/FlightStatus/useFlightStatusStyles.ts
View File

@ -2,19 +2,19 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
import * as React from 'react';
import { useAtomValue } from 'jotai';
import {
FontSizes,
FontWeights,
} from 'office-ui-fabric-react';
import { ITextStyles } from 'office-ui-fabric-react/lib/components/Text';
import { IImageStyles } from 'office-ui-fabric-react/lib/Image';
import { useRecoilState } from 'recoil';
import { useUtils } from '../../hooks/useUtils';
import { globalState } from '../../recoil/atoms/globalState';
import { globalState } from '../../jotai/atoms/globalState';
export const useFlightStatusStyles = () => {
const [appState, setGlobalState] = useRecoilState(globalState);
const appState = useAtomValue(globalState);
const { currentTheme } = appState;
const { getFlightStatusColor } = useUtils();
const imageStyles: Partial<IImageStyles> = {

6
samples/react-flighttracker/src/components/FlightTracker/FlightTracker.tsx
View File

@ -1,6 +1,6 @@
import * as React from 'react';
import { RecoilRoot } from 'recoil';
import { Provider } from 'jotai';
import {
EnhancedThemeProvider,
@ -16,9 +16,9 @@ export const FlightTracker: React.FunctionComponent<IFlightTrackerProps> = (
return (
<EnhancedThemeProvider context={props.context} theme={currentTheme}>
<section>
<RecoilRoot>
<Provider>
<FlightTrackerControl {...props} />
</RecoilRoot>
</Provider>
</section>
</EnhancedThemeProvider>
);

14
samples/react-flighttracker/src/components/FlightTracker/FlightTrackerControl.tsx
View File

@ -1,11 +1,11 @@
import * as React from 'react';
import { useAtom } from 'jotai';
import { Stack } from 'office-ui-fabric-react';
import { useRecoilState } from 'recoil';
import { WebPartTitle } from '@pnp/spfx-controls-react/lib/WebPartTitle';
import { globalState } from '../../recoil/atoms/globalState';
import { globalState } from '../../jotai/atoms/globalState';
import { FlightSelector } from '../FlightSelector/FlightSelector';
import { FlightTrackerList } from '../FlightTrackerList/FlightTrackerList';
import { IFlightTrackerProps } from './IFlightTrackerProps';
@ -14,11 +14,11 @@ export const FlightTrackerControl: React.FunctionComponent<IFlightTrackerProps>
props: React.PropsWithChildren<IFlightTrackerProps>
) => {
const { isDarkTheme, hasTeamsContext, currentTheme, context, title, updateProperty, displayMode,numberItemsPerPage , webpartContainerWidth } = props;
const [appState, setGlobalState] = useRecoilState(globalState);
const [,setGlobalState] = useAtom(globalState);
React.useEffect(() => {
setGlobalState({
...appState,
setGlobalState((prevState) => { return {
...prevState,
isDarkTheme: isDarkTheme,
hasTeamsContext: hasTeamsContext,
currentTheme: currentTheme,
@ -26,8 +26,8 @@ export const FlightTrackerControl: React.FunctionComponent<IFlightTrackerProps>
numberItemsPerPage: numberItemsPerPage,
webpartContainerWidth: webpartContainerWidth,
});
}, [isDarkTheme, hasTeamsContext, currentTheme, context, setGlobalState, webpartContainerWidth]);
}});
}, [isDarkTheme, hasTeamsContext, currentTheme, context, webpartContainerWidth, numberItemsPerPage]);
return (
<>

45
samples/react-flighttracker/src/components/FlightTrackerList/FlightTrackerList.tsx
View File

@ -9,8 +9,8 @@ import {
getMinutes,
set,
} from 'date-fns';
import { useAtom } from 'jotai';
import { MessageBarType } from 'office-ui-fabric-react';
import { useRecoilState } from 'recoil';
import { isEmpty } from '@microsoft/sp-lodash-subset';
@ -19,13 +19,13 @@ import { useFlightSchedule } from '../../hooks/useFlightSchedules';
import {
useMappingFlightSchedules,
} from '../../hooks/useMappingFlightShedules';
import { globalState } from '../../jotai/atoms';
import { airlineState } from '../../jotai/atoms/airlineState';
import {
IFlights,
IFlightTrackerListItem,
IGlobalState,
} from '../../models';
import { globalState } from '../../recoil/atoms';
import { airlineState } from '../../recoil/atoms/airlineState';
import { ShowList } from '../ShowList';
import { ShowMessage } from '../ShowMessage/ShowMessage';
import { ShowSpinner } from '../ShowSpinner';
@ -35,21 +35,14 @@ const DEFAULT_ITEMS_TO_LOAD = 7;
export interface IFlightTrackerListProps {}
export const FlightTrackerList: React.FunctionComponent<IFlightTrackerListProps> = () => {
const [appState, setGlobalState] = useRecoilState(globalState);
const [airlineList, setAirlineList] = useRecoilState(airlineState);
const [appState, setGlobalState] = useAtom(globalState);
const [airlineList, setAirlineList] = useAtom(airlineState);
const { mapFlightSchedules } = useMappingFlightSchedules();
const {
selectedAirPort,
selectedInformationType,
selectedDate,
numberItemsPerPage,
selectedTime,
} = appState;
const { selectedAirPort, selectedInformationType, selectedDate, numberItemsPerPage, selectedTime } = appState;
const [isLoadingItems, setIsLoadingItems] = React.useState<boolean>(true);
const [errorMessage, setErrorMessage] = React.useState<string>("");
const [listItems, setListItems] = React.useState<IFlightTrackerListItem[]>([]);
const [flights, setFlights] = React.useState<IFlights>(undefined);
const [flights, setFlights] = React.useState<IFlights>({} as IFlights);
const [errorFlightSchedules, setErrorFlightSchedules] = React.useState<Error>();
const [isLoadingFlightSchedules, setIsLoadingFlightSchedules] = React.useState<boolean>(false);
const [isRefreshing, setIsRefreshing] = React.useState<boolean>(false);
@ -58,7 +51,6 @@ export const FlightTrackerList: React.FunctionComponent<IFlightTrackerListProps>
const [hasMore, setHasMore] = React.useState<boolean>(true);
const pageIndex = React.useRef<number>(0);
const currentInformationType = React.useRef(selectedInformationType);
const [timerId, setTimerId] = React.useState<number>(undefined);
const checkTypeInformationToScroll = React.useCallback(() => {
if (selectedInformationType !== currentInformationType.current) {
@ -89,9 +81,9 @@ export const FlightTrackerList: React.FunctionComponent<IFlightTrackerListProps>
React.useEffect(() => {
(async () => {
setIsLoadingFlightSchedules(true);
if (airlineList) {
try {
setIsLoadingFlightSchedules(true);
const searchDate: Date = set(selectedDate, {
hours: getHours(selectedTime),
minutes: getMinutes(selectedTime),
@ -103,10 +95,10 @@ export const FlightTrackerList: React.FunctionComponent<IFlightTrackerListProps>
toDate: addHours(searchDate, 12).toISOString(), // maximuum 12 hours interval is supported by the API
airportCode: selectedAirPort?.gps_code,
});
setFlights(flightSchedule);
setIsLoadingFlightSchedules(false);
setFlights(flightSchedule ?? ({} as IFlights));
} catch (error) {
setErrorFlightSchedules(error);
} finally {
setIsLoadingFlightSchedules(false);
}
}
@ -115,6 +107,9 @@ export const FlightTrackerList: React.FunctionComponent<IFlightTrackerListProps>
const loadItems = React.useCallback(
async (pageIndex: number): Promise<IFlightTrackerListItem[]> => {
if (isEmpty(flights)) {
return [];
}
const numberItemsToLoad = numberItemsPerPage ? numberItemsPerPage + 1 : DEFAULT_ITEMS_TO_LOAD;
const mappedFlightSchedules = await mapFlightSchedules(
selectedInformationType,
@ -124,22 +119,21 @@ export const FlightTrackerList: React.FunctionComponent<IFlightTrackerListProps>
);
return mappedFlightSchedules;
},
[flights, numberItemsPerPage, selectedInformationType]
[flights, mapFlightSchedules, numberItemsPerPage, selectedInformationType]
);
React.useEffect(() => {
(async () => {
if (flights) {
setIsLoadingItems(true);
if (!isEmpty(flights)) {
const mappedFlightSchedules = await loadItems(0);
setListItems(mappedFlightSchedules);
setIsLoadingItems(false);
setHasMore((prevHasMore) => (mappedFlightSchedules?.length > 0 ? true : false));
}
setIsRefreshing((prevState) => (prevState === true ? false : prevState));
setIsLoadingItems(false);
})();
}, [flights]);
}, [flights, loadItems, isRefreshing, setIsLoadingItems, setListItems, setHasMore]);
const onScroll = React.useCallback(async () => {
if (hasMore) {
@ -149,7 +143,7 @@ export const FlightTrackerList: React.FunctionComponent<IFlightTrackerListProps>
setListItems((prevListItems) => [...prevListItems, ...mappedFlightSchedules]);
setHasMore((prevHasMore) => (mappedFlightSchedules?.length > 0 ? true : false));
}
}, [hasMore, loadItems]);
}, [hasMore, loadItems, checkTypeInformationToScroll, setListItems, setHasMore]);
const showMessage = React.useMemo((): boolean => {
setIsLoadingItems(false);
@ -159,7 +153,7 @@ export const FlightTrackerList: React.FunctionComponent<IFlightTrackerListProps>
const showSpinner = React.useMemo((): boolean => {
return (isLoadingFlightSchedules || loadingAirlines || isLoadingItems) && !showMessage;
}, [isLoadingFlightSchedules, loadingAirlines, isLoadingItems, errorFlightSchedules]);
}, [isLoadingFlightSchedules, showMessage, loadingAirlines, isLoadingItems]);
if (!selectedAirPort || !selectedInformationType) {
return null;
@ -169,6 +163,7 @@ export const FlightTrackerList: React.FunctionComponent<IFlightTrackerListProps>
<>
<ShowMessage isShow={showMessage} message={errorMessage} messageBarType={MessageBarType.error} />
<ShowSpinner isShow={showSpinner} />
<ShowList
showList={!showSpinner && !showMessage}
listItems={listItems}

6
samples/react-flighttracker/src/components/FlightTrackerList/FlightTrackerListItem.tsx
View File

@ -3,15 +3,15 @@
import * as React from 'react';
import * as strings from 'FlightTrackerWebPartStrings';
import { useAtom } from 'jotai';
import {
IImageProps,
Stack,
} from 'office-ui-fabric-react';
import { useRecoilState } from 'recoil';
import { EInformationType } from '../../constants/EInformationType';
import { globalState } from '../../jotai/atoms';
import { IFlightTrackerListItem } from '../../models/IFlightTrackerListItem';
import { globalState } from '../../recoil/atoms';
import { FlightStatus } from '../FlightStatus/FlightStatus';
import {
FlightTrackerListItemAttribute,
@ -29,7 +29,7 @@ export const FlightTrackerListItem: React.FunctionComponent<IFlightTrackerListIt
) => {
const { flights, flightInformationType } = props;
const { itemContainer, controlStyles } = useFlightTrackerStyles();
const [appState, setGlobalState] = useRecoilState(globalState);
const [appState, setGlobalState] = useAtom(globalState);
const imageProps: IImageProps = React.useMemo(() => {
return { src: flights.flightCompanyImage, width: 22, height: 22 };
}, [flights.flightCompanyImage]);

6
samples/react-flighttracker/src/components/FlightTrackerList/FlightTrackerListItemAttribute.tsx
View File

@ -1,14 +1,14 @@
import * as React from 'react';
import { useAtomValue } from 'jotai';
import {
Icon,
Text,
} from 'office-ui-fabric-react';
import { Stack } from 'office-ui-fabric-react/lib/Stack';
import { useRecoilState } from 'recoil';
import { globalState } from '../../jotai/atoms';
import { IAttribute } from '../../models';
import { globalState } from '../../recoil/atoms';
import { useFlightTrackerStyles } from './useFlightTrackerStyles';
export interface IFlightTrackerListItemAttributeProps {
@ -20,7 +20,7 @@ export const FlightTrackerListItemAttribute: React.FunctionComponent<IFlightTrac
props: React.PropsWithChildren<IFlightTrackerListItemAttributeProps>
) => {
const { attribute } = props;
const [appState] = useRecoilState(globalState);
const appState = useAtomValue(globalState);
const { controlStyles } = useFlightTrackerStyles();
const { webpartContainerWidth } = appState;
const [renderAttribute, setRenderAttribute] = React.useState<JSX.Element | null>(null);

8
samples/react-flighttracker/src/components/FlightTrackerList/useFlightTrackerStyles.ts
View File

@ -1,6 +1,7 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import * as React from 'react';
import { useAtomValue } from 'jotai';
import {
FontWeights,
IScrollablePaneStyles,
@ -9,12 +10,11 @@ import {
mergeStyles,
mergeStyleSets,
} from 'office-ui-fabric-react';
import { useRecoilState } from 'recoil';
import { globalState } from '../../recoil/atoms';
import { globalState } from '../../jotai/atoms';
export const useFlightTrackerStyles = () => {
const [globalStateApp] = useRecoilState(globalState);
const globalStateApp = useAtomValue(globalState);
const { currentTheme, numberItemsPerPage, itemHeight } = globalStateApp;
const listHeaderStyles: ITextStyles = React.useMemo(() => {
@ -42,7 +42,7 @@ export const useFlightTrackerStyles = () => {
},
},
};
}, [currentTheme]);
}, [currentTheme, ]);
const attributeContainer: IStackStyles = React.useMemo(() => {
return {

6
samples/react-flighttracker/src/components/SelectAirport/SelectAirportPicker.tsx
View File

@ -3,6 +3,7 @@
/* eslint-disable @typescript-eslint/no-floating-promises */
import * as React from 'react';
import { useAtom } from 'jotai';
import {
IBasePickerSuggestionsProps,
ICalloutContentStyleProps,
@ -13,12 +14,11 @@ import {
Label,
TagPicker,
} from 'office-ui-fabric-react';
import { useRecoilState } from 'recoil';
import { useAirports } from '../../hooks/useAirports';
import { useLocalStorage } from '../../hooks/useLocalStorage';
import { globalState } from '../../jotai/atoms';
import { IAirport } from '../../models/IAirport';
import { globalState } from '../../recoil/atoms';
import { Airport } from './Airport';
import { SelectedAirport } from './SelectedAirport';
import { useSelectAirportStyles } from './useSelectAirportStyles';
@ -31,7 +31,7 @@ const SELECTED_AIRPORT_SESSION_STORAGE_KEY = "___selectedAirport___";
export const SelectAirportPicker: React.FunctionComponent = () => {
const divRef = React.useRef<HTMLDivElement>(null);
const [appState, setAppState] = useRecoilState(globalState);
const [appState, setAppState] = useAtom(globalState);
const { searchAirportsByText } = useAirports();
const [selectedAirport, setSelectedAirports] = React.useState<ITag[]>([]);
const { controlStyles, selecteAirportPickerStyles } = useSelectAirportStyles();

6
samples/react-flighttracker/src/components/SelectAirport/useSelectAirportStyles.ts
View File

@ -1,6 +1,7 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import * as react from 'react';
import { useAtomValue } from 'jotai';
import {
IBasePickerStyles,
IContextualMenuStyles,
@ -10,12 +11,11 @@ import {
mergeStyles,
mergeStyleSets,
} from 'office-ui-fabric-react';
import { useRecoilState } from 'recoil';
import { globalState } from '../../recoil/atoms';
import { globalState } from '../../jotai/atoms';
export const useSelectAirportStyles = () => {
const [appState] = useRecoilState(globalState);
const appState = useAtomValue(globalState);
const { currentTheme, selectedAirPort } = appState;

6
samples/react-flighttracker/src/components/SelectDate/SelectDate.tsx
View File

@ -1,16 +1,16 @@
import * as React from 'react';
import * as strings from 'FlightTrackerWebPartStrings';
import { useAtom } from 'jotai';
import {
DatePicker,
IDatePicker,
Label,
Stack,
} from 'office-ui-fabric-react';
import { useRecoilState } from 'recoil';
import { DayPickerStrings } from '../../constants';
import { globalState } from '../../recoil/atoms';
import { globalState } from '../../jotai/atoms';
import { SelectTime } from '../SelectTime/SelectTime';
import { useSelctedDateStyles } from './useSelectDateStyles';
@ -21,7 +21,7 @@ export const SelectDate: React.FunctionComponent<ISelectDateProps> = (
) => {
const { selectedDateStyle, textFieldStyles, labelDateStyles, labelTimeStyles } = useSelctedDateStyles();
const [appState, setAppState] = useRecoilState(globalState);
const [appState, setAppState] = useAtom(globalState);
const { selectedDate, selectedTime } = appState;

6
samples/react-flighttracker/src/components/SelectDate/useSelectDateStyles.ts
View File

@ -1,16 +1,16 @@
import * as react from 'react';
import { useAtomValue } from 'jotai';
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import {
IDatePickerStyles,
ILabelStyles,
} from 'office-ui-fabric-react';
import { useRecoilState } from 'recoil';
import { globalState } from '../../recoil/atoms';
import { globalState } from '../../jotai/atoms';
export const useSelctedDateStyles= () => {
const [appState] = useRecoilState(globalState);
const appState = useAtomValue(globalState);
const { currentTheme } = appState;

6
samples/react-flighttracker/src/components/SelectInformationType/SelectInformationType.tsx
View File

@ -2,6 +2,7 @@
import * as React from 'react';
import * as strings from 'FlightTrackerWebPartStrings';
import { useAtom } from 'jotai';
import {
Dropdown,
DropdownMenuItemType,
@ -10,12 +11,11 @@ import {
} from 'office-ui-fabric-react/lib/Dropdown';
import { FontIcon } from 'office-ui-fabric-react/lib/Icon';
import { Stack } from 'office-ui-fabric-react/lib/Stack';
import { useRecoilState } from 'recoil';
import { EInformationType } from '../../constants/EInformationType';
import { EInformationTypesIcons } from '../../constants/EInformationTypesIcons';
import { useLocalStorage } from '../../hooks/useLocalStorage';
import { globalState } from '../../recoil/atoms';
import { globalState } from '../../jotai/atoms';
import { useSelectInformationStyles } from './useSelectInformationStyles';
export interface ISelectInformationTypeProps {}
@ -25,7 +25,7 @@ export const SelectInformationType: React.FunctionComponent<ISelectInformationTy
) => {
const SELECTED_INFORMATION_TYPE_SESSION_STORAGE_KEY = "___selectedInformationType___";
const [getSelectedInfTypeFromSessionStorage, setSelectedInfTypeToSessionStorage] = useLocalStorage();
const [appState, setAppState] = useRecoilState(globalState);
const [appState, setAppState] = useAtom(globalState);
const { context } = appState;
const { dropdownStyles, controlStyles } = useSelectInformationStyles();
const options: IDropdownOption[] = React.useMemo(() => {

6
samples/react-flighttracker/src/components/SelectInformationType/useSelectInformationStyles.ts
View File

@ -2,19 +2,19 @@
import * as React from 'react';
import { useAtomValue } from 'jotai';
import {
IIconStyles,
mergeStyles,
mergeStyleSets,
} from 'office-ui-fabric-react';
import { IDropdownStyles } from 'office-ui-fabric-react/lib/Dropdown';
import { useRecoilState } from 'recoil';
import { globalState } from '../../recoil/atoms';
import { globalState } from '../../jotai/atoms';
/* eslint-disable @typescript-eslint/no-empty-function */
export const useSelectInformationStyles = () => {
const [appState] = useRecoilState(globalState);
const appState = useAtomValue(globalState);
const { currentTheme } = appState;
const iconStyles: IIconStyles = React.useMemo(() => {
return { root: { width: "20px", height: "20px", fill: currentTheme?.semanticColors?.bodyText } };

6
samples/react-flighttracker/src/components/SelectTime/SelectTime.tsx
View File

@ -5,15 +5,15 @@ import * as React from 'react';
import { format } from 'date-fns';
import set from 'date-fns/set';
import * as strings from 'FlightTrackerWebPartStrings';
import { useSetAtom } from 'jotai';
import {
Dropdown,
IDropdownOption,
} from 'office-ui-fabric-react/lib/Dropdown';
import { Stack } from 'office-ui-fabric-react/lib/Stack';
import { Text } from 'office-ui-fabric-react/lib/Text';
import { useRecoilState } from 'recoil';
import { globalState } from '../../recoil/atoms';
import { globalState } from '../../jotai/atoms';
import { useSelectTimeStyles } from './useSelectTimeStyles';
interface IDropdownOptionExtended extends IDropdownOption {
@ -25,7 +25,7 @@ export interface ISelectInformationTypeProps {}
export const SelectTime: React.FunctionComponent<ISelectInformationTypeProps> = (
props: React.PropsWithChildren<ISelectInformationTypeProps>
) => {
const [appState, setAppState] = useRecoilState(globalState);
const setAppState = useSetAtom(globalState);
const { dropdownStyles } = useSelectTimeStyles();
const now = new Date();
const [selectedOption, setSelectedOption] = React.useState<IDropdownOptionExtended | undefined>(undefined);

6
samples/react-flighttracker/src/components/SelectTime/useSelectTimeStyles.ts
View File

@ -2,18 +2,18 @@
import * as React from 'react';
import { useAtomValue } from 'jotai';
import {
mergeStyles,
mergeStyleSets,
} from 'office-ui-fabric-react';
import { IDropdownStyles } from 'office-ui-fabric-react/lib/Dropdown';
import { useRecoilState } from 'recoil';
import { globalState } from '../../recoil/atoms';
import { globalState } from '../../jotai/atoms';
/* eslint-disable @typescript-eslint/no-empty-function */
export const useSelectTimeStyles = () => {
const [appState] = useRecoilState(globalState);
const appState = useAtomValue(globalState);
const { currentTheme } = appState;

8
samples/react-flighttracker/src/components/ShowList/ShowList.tsx
View File

@ -2,6 +2,7 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import * as React from 'react';
import { useAtomValue } from 'jotai';
import {
IconButton,
ScrollablePane,
@ -9,10 +10,9 @@ import {
Text,
} from 'office-ui-fabric-react';
import { Stack } from 'office-ui-fabric-react/lib/Stack';
import { useRecoilState } from 'recoil';
import { globalState } from '../../jotai/atoms';
import { IFlightTrackerListItem } from '../../models';
import { globalState } from '../../recoil/atoms';
import {
FlightTrackerListItem,
} from '../FlightTrackerList/FlightTrackerListItem';
@ -37,7 +37,7 @@ export const ShowList: React.FunctionComponent<IShowListProps> = (props: React.P
stackContainerStyles,
} = useFlightTrackerStyles();
const [appState] = useRecoilState(globalState);
const appState =useAtomValue(globalState);
const { selectedAirPort, selectedInformationType, } = appState;
const scrollablePaneRef: any = React.createRef<HTMLDivElement>();
const [isScrolling, setIsScrolling] = React.useState<boolean>(false);
@ -98,7 +98,7 @@ export const ShowList: React.FunctionComponent<IShowListProps> = (props: React.P
onScroll={onScrollList}
componentRef={scrollablePaneRef}
>
{listItems && listItems.length > 0 ? (
{listItems && listItems.length ? (
listItems.map((item, index) => {
return (
<FlightTrackerListItem key={index} flights={item} flightInformationType={selectedInformationType} />

10
samples/react-flighttracker/src/hooks/useUtils.ts
View File

@ -6,18 +6,18 @@ import {
isSameDay,
parseISO,
} from 'date-fns';
import { useRecoilState } from 'recoil';
import { useAtomValue } from 'jotai';
import { airlineState } from '../jotai/atoms/airlineState';
import { globalState } from '../jotai/atoms/globalState';
import { IAirline } from '../models/IAirlines';
import { airlineState } from '../recoil/atoms/airlineState';
import { globalState } from '../recoil/atoms/globalState';
const PHOTO_AIRLINE_URL = "https://r-xx.bstatic.com/data/airlines_logo/";
export const useUtils = () => {
const [appState] = useRecoilState(globalState);
const appState = useAtomValue(globalState);
const [airlinesList] = useRecoilState(airlineState);
const airlinesList = useAtomValue(airlineState);
const { currentTheme } = appState;
const statusColors = new Map<string, string>([

5
samples/react-flighttracker/src/jotai/atoms/airlineState.ts Normal file
View File

@ -0,0 +1,5 @@
import { atom } from 'jotai';
import { IAirlines } from '../../models/IAirlines';
export const airlineState = atom<IAirlines>({} as IAirlines);

5
samples/react-flighttracker/src/jotai/atoms/flightsState.ts Normal file
View File

@ -0,0 +1,5 @@
import { atom } from 'jotai';
import { IFlights } from '../../models/IFlights';
export const flightsState = atom<IFlights>({} as IFlights);

6
samples/react-flighttracker/src/recoil/atoms/globalState.ts → samples/react-flighttracker/src/jotai/atoms/globalState.ts
View File

@ -1,11 +1,9 @@
import { atom } from 'recoil';
import { atom } from 'jotai';
import { EInformationType } from '../../constants/EInformationType';
import { IGlobalState } from '../../models/IGlobalState';
export const globalState = atom<IGlobalState>({
key: "globaltState",
default: {
isDarkTheme: false,
hasTeamsContext: false,
context: undefined,
@ -20,5 +18,5 @@ export const globalState = atom<IGlobalState>({
hasMore: true,
webpartContainerWidth: 0,
itemHeight:87
},
});

0
samples/react-flighttracker/src/recoil/atoms/index.ts → samples/react-flighttracker/src/jotai/atoms/index.ts
View File

1
samples/react-flighttracker/src/models/IGlobalState.ts
View File

@ -19,4 +19,5 @@ export interface IGlobalState {
hasMore: boolean;
webpartContainerWidth: number;
itemHeight:number;
}

8
samples/react-flighttracker/src/recoil/atoms/airlineState.ts
View File

@ -1,8 +0,0 @@
import { atom } from 'recoil';
import { IAirlines } from '../../models/IAirlines';
export const airlineState = atom<IAirlines>({
key: "airlinesState",
default: {} as IAirlines,
});

8
samples/react-flighttracker/src/recoil/atoms/flightsState.ts
View File

@ -1,8 +0,0 @@
import { atom } from 'recoil';
import { IFlights } from '../../models/IFlights';
export const flightsState = atom<IFlights>({
key: "flightsListState",
default: {departures: [], arrivals: []},
});

4
samples/react-flighttracker/src/webparts/flightTracker/FlightTrackerWebPart.ts
View File

@ -64,9 +64,7 @@ export default class FlightTrackerWebPart extends BaseClientSideWebPart<IFlightT
}
};
protected get disableReactivePropertyChanges(): boolean {
return true;
}
protected onAfterResize(newWidth: number): void {
this.containerWidth = newWidth;