update new Flight Tracker

samples/react-flighttracker/src/components/FlightTrackerList/FlightTrackerListItem.tsx

@@ -7,9 +7,11 @@ import {
   IImageProps,
   Stack,
 } from 'office-ui-fabric-react';
+import { useRecoilState } from 'recoil';
 
 import { EInformationType } from '../../constants/EInformationType';
 import { IFlightTrackerListItem } from '../../models/IFlightTrackerListItem';
+import { globalState } from '../../recoil/atoms';
 import { FlightStatus } from '../FlightStatus/FlightStatus';
 import {
   FlightTrackerListItemAttribute,
@@ -27,12 +29,23 @@ export const FlightTrackerListItem: React.FunctionComponent<IFlightTrackerListIt
 ) => {
   const { flights, flightInformationType } = props;
   const { itemContainer, controlStyles } = useFlightTrackerStyles();
-
+  const [appState, setGlobalState] = useRecoilState(globalState);
   const imageProps: IImageProps = React.useMemo(() => {
     return { src: flights.flightCompanyImage, width: 22, height: 22 };
   }, [flights.flightCompanyImage]);
   const divRef = React.useRef<HTMLDivElement>(null);
 
+  React.useEffect(() => {
+    if (divRef.current) {
+      setGlobalState((prevState) => {
+        return {
+          ...prevState,
+          itemHeight: divRef.current.clientHeight,
+        };
+      });
+    }
+  },[divRef.current, setGlobalState]);
+
   return (
     <>
       <div ref={divRef}>

samples/react-flighttracker/src/components/FlightTrackerList/useFlightTrackerStyles.ts

@@ -15,7 +15,7 @@ import { globalState } from '../../recoil/atoms';
 
 export const useFlightTrackerStyles = () => {
   const [globalStateApp] = useRecoilState(globalState);
-  const { currentTheme, numberItemsPerPage } = globalStateApp;
+  const { currentTheme, numberItemsPerPage, itemHeight } = globalStateApp;
 
   const listHeaderStyles: ITextStyles = React.useMemo(() => {
     return { root: { fontWeight: FontWeights.semibold, color: currentTheme?.semanticColors?.bodyText } };
@@ -56,7 +56,7 @@ export const useFlightTrackerStyles = () => {
 
   const scollableContainerStyles: Partial<IScrollablePaneStyles> = React.useMemo(() => {
     return {
-      root: { position: "relative", height: (87 *   numberItemsPerPage) - 50  ,
+      root: { position: "relative", height: ((itemHeight *   numberItemsPerPage)) - 20,  //max height of the scrollable container
     },
     contentContainer: {  "::-webkit-scrollbar-thumb": {
 
@@ -69,7 +69,7 @@ export const useFlightTrackerStyles = () => {
     "scrollbar-color": currentTheme?.semanticColors.bodyFrameBackground,
     "scrollbar-width": "thin", },
     };
-  }, [currentTheme, numberItemsPerPage]);
+  }, [currentTheme, numberItemsPerPage, itemHeight]);
 
   const stackContainerStyles: IStackStyles= React.useMemo(() => {
     return {

samples/react-flighttracker/src/components/SelectAirport/SelectAirportPicker.tsx

@@ -26,6 +26,8 @@ import { useSelectAirportStyles } from './useSelectAirportStyles';
 export interface ITagExtended extends ITag {
   airportData: IAirport;
 }
+const SELECTED_AIRPORT_SESSION_STORAGE_KEY = "___selectedAirport___";
+
 
 export const SelectAirportPicker: React.FunctionComponent = () => {
   const divRef = React.useRef<HTMLDivElement>(null);
@@ -34,7 +36,7 @@ export const SelectAirportPicker: React.FunctionComponent = () => {
   const [selectedAirport, setSelectedAirports] = React.useState<ITag[]>([]);
   const { controlStyles, selecteAirportPickerStyles } = useSelectAirportStyles();
   const { context } = appState;
-  const SELECTED_AIRPORT_SESSION_STORAGE_KEY = "___selectedAirport___";
+
   const [getSelectedAirportFromSessionStorage, SetSelectedAirporttoSessionStorage] = useLocalStorage();
   const inputProps: IInputProps = React.useMemo(() => {
     return {

samples/react-flighttracker/src/constants/constants.ts

@@ -38,3 +38,4 @@ export const RAPID_API_KEY_COUNTRY_FLAGS =  "a96bf6dd14mshaba3c61477da062p1a89f2
 export const RAPID_API_HOST_COUNTRY_FLAGS = "country-flags.p.rapidapi.com";
 export const RAPID_API_KEY_FLIGHT_RADAR =  "a96bf6dd14mshaba3c61477da062p1a89f2jsn5190b7082e8e";
 export const RAPID_API_HOST_FLIGHT_RADAR = "flight-radar1.p.rapidapi.com";
+

samples/react-flighttracker/src/models/IGlobalState.ts

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

samples/react-flighttracker/src/recoil/atoms/globalState.ts

@@ -18,7 +18,7 @@ export const globalState = atom<IGlobalState>({
     currentPage: 0,
     isScrolling: false,
     hasMore: true,
-    webpartContainerWidth: 0
-
+    webpartContainerWidth: 0,
+    itemHeight:87
   },
 });

samples/react-flighttracker/src/webparts/flightTracker/FlightTrackerWebPart.ts

@@ -138,7 +138,7 @@ export default class FlightTrackerWebPart extends BaseClientSideWebPart<IFlightT
                 PropertyPaneSlider("numberItemsPerPage", {
                   label: strings.NumberItemsPerPageLabel,
                   value: this.properties.numberItemsPerPage,
-                  min: 5,
+                  min: 1,
                   max: 20,
                   showValue: true,
                 })