Refactor: Access props from a single props argument

packages/base/src/annotations/components/Annotation.tsx

@@ -19,37 +19,32 @@ export interface IAnnotationProps {
   children?: JSX.Element[] | JSX.Element;
 }
 
-const Annotation: React.FC<IAnnotationProps> = ({
-  itemId,
-  annotationModel,
-  rightPanelModel,
-  children,
-}) => {
+const Annotation: React.FC<IAnnotationProps> = props => {
   const [messageContent, setMessageContent] = useState('');
   const [jgisModel, setJgisModel] = useState<IJupyterGISModel | undefined>(
-    rightPanelModel?.jGISModel,
+    props.rightPanelModel?.jGISModel,
   );
 
-  const annotation = annotationModel.getAnnotation(itemId);
+  const annotation = props.annotationModel.getAnnotation(props.itemId);
   const contents = useMemo(() => annotation?.contents ?? [], [annotation]);
 
   /**
    * Update the model when it changes.
    */
-  rightPanelModel?.documentChanged.connect((_, widget) => {
+  props.rightPanelModel?.documentChanged.connect((_, widget) => {
     setJgisModel(widget?.model);
   });
 
   const handleSubmit = () => {
-    annotationModel.addContent(itemId, messageContent);
+    props.annotationModel.addContent(props.itemId, messageContent);
     setMessageContent('');
   };
 
   const handleDelete = async () => {
     // If the annotation has no content
     // we remove it right away without prompting
-    if (!annotationModel.getAnnotation(itemId)?.contents.length) {
-      return annotationModel.removeAnnotation(itemId);
+    if (!props.annotationModel.getAnnotation(props.itemId)?.contents.length) {
+      return props.annotationModel.removeAnnotation(props.itemId);
     }
 
     const result = await showDialog({
@@ -59,24 +54,24 @@ const Annotation: React.FC<IAnnotationProps> = ({
     });
 
     if (result.button.accept) {
-      annotationModel.removeAnnotation(itemId);
+      props.annotationModel.removeAnnotation(props.itemId);
     }
   };
 
   const centerOnAnnotation = () => {
-    jgisModel?.centerOnPosition(itemId);
+    jgisModel?.centerOnPosition(props.itemId);
   };
 
   return (
     <div className="jGIS-Annotation">
-      {children}
+      {props.children}
       <div>
         {contents.map(content => {
           return (
             <Message
               user={content.user}
               message={content.value}
-              self={annotationModel.user?.username === content.user?.username}
+              self={props.annotationModel.user?.username === content.user?.username}
             />
           );
         })}
@@ -98,7 +93,7 @@ const Annotation: React.FC<IAnnotationProps> = ({
         <Button className="jp-mod-styled jp-mod-warn" onClick={handleDelete}>
           <FontAwesomeIcon icon={faTrash} />
         </Button>
-        {rightPanelModel && (
+        {props.rightPanelModel && (
           <Button
             className="jp-mod-styled jp-mod-accept"
             onClick={centerOnAnnotation}

packages/base/src/annotations/components/AnnotationFloater.tsx

@@ -4,11 +4,8 @@ import React, { useState } from 'react';
 
 import Annotation, { IAnnotationProps } from './Annotation';
 
-const AnnotationFloater: React.FC<IAnnotationProps> = ({
-  itemId,
-  annotationModel: model,
-}) => {
-  const annotation = model.getAnnotation(itemId);
+const AnnotationFloater: React.FC<IAnnotationProps> = props => {
+  const annotation = props.annotationModel.getAnnotation(props.itemId);
   const [isOpen, setIsOpen] = useState(annotation?.open);
 
   // Function that either
@@ -17,15 +14,15 @@ const AnnotationFloater: React.FC<IAnnotationProps> = ({
   // - closes the annotation if `!open` and the annotation is not empty
   const setOpenOrDelete = (open: boolean) => {
     if (open) {
-      model.updateAnnotation(itemId, { open: true });
+      props.annotationModel.updateAnnotation(props.itemId, { open: true });
       return setIsOpen(true);
     }
 
-    const current = model.getAnnotation(itemId);
+    const current = props.annotationModel.getAnnotation(props.itemId);
     if (!current?.contents.length) {
-      model.removeAnnotation(itemId);
+      props.annotationModel.removeAnnotation(props.itemId);
     } else {
-      model.updateAnnotation(itemId, { open: false });
+      props.annotationModel.updateAnnotation(props.itemId, { open: false });
       setIsOpen(false);
     }
   };
@@ -40,7 +37,7 @@ const AnnotationFloater: React.FC<IAnnotationProps> = ({
         className="jGIS-FloatingAnnotation"
         style={{ visibility: isOpen ? 'visible' : 'hidden' }}
       >
-        <Annotation itemId={itemId} annotationModel={model}>
+        <Annotation itemId={props.itemId} annotationModel={props.annotationModel}>
           <div
             className="jGIS-Popup-Topbar"
             onClick={() => {

packages/base/src/annotations/components/Message.tsx

@@ -19,16 +19,15 @@ interface IProps {
 }
 
 export const Message: React.FC<IProps> = props => {
-  const { self, message, user } = props;
-  const color = user?.color ?? 'black';
-  const author = user?.display_name ?? '';
-  const initials = user?.initials ?? '';
+  const color = props.user?.color ?? 'black';
+  const author = props.user?.display_name ?? '';
+  const initials = props.user?.initials ?? '';
 
   return (
     <div
       className="jGIS-Annotation-Message"
       style={{
-        flexFlow: self ? 'row' : 'row-reverse',
+        flexFlow: props.self ? 'row' : 'row-reverse',
       }}
     >
       <div
@@ -41,7 +40,7 @@ export const Message: React.FC<IProps> = props => {
         <span style={{ width: 24, textAlign: 'center' }}>{initials}</span>
       </div>
       <div className="jGIS-Annotation-Message-Content">
-        <p style={{ padding: 7, margin: 0 }}>{message}</p>
+        <p style={{ padding: 7, margin: 0 }}>{props.message}</p>
       </div>
     </div>
   );

packages/base/src/dialogs/layerBrowserDialog.tsx

@@ -25,33 +25,27 @@ interface ILayerBrowserDialogProps {
   cancel: () => void;
 }
 
-export const LayerBrowserComponent: React.FC<ILayerBrowserDialogProps> = ({
-  model,
-  registry,
-  formSchemaRegistry,
-  okSignalPromise,
-  cancel,
-}) => {
+export const LayerBrowserComponent: React.FC<ILayerBrowserDialogProps> = props => {
   const [searchTerm, setSearchTerm] = useState('');
   const [activeLayers, setActiveLayers] = useState<string[]>([]);
   const [selectedCategory, setSelectedCategory] =
     useState<HTMLElement | null>();
   const [creatingCustomRaster, setCreatingCustomRaster] = useState(false);
 
   const [galleryWithCategory, setGalleryWithCategory] =
-    useState<IRasterLayerGalleryEntry[]>(registry);
+    useState<IRasterLayerGalleryEntry[]>(props.registry);
 
-  const providers = [...new Set(registry.map(item => item.source.provider))];
+  const providers = [...new Set(props.registry.map(item => item.source.provider))];
 
   const filteredGallery = galleryWithCategory.filter(item =>
     item.name.toLowerCase().includes(searchTerm),
   );
 
   useEffect(() => {
-    model.sharedModel.layersChanged.connect(handleLayerChange);
+    props.model.sharedModel.layersChanged.connect(handleLayerChange);
 
     return () => {
-      model.sharedModel.layersChanged.disconnect(handleLayerChange);
+      props.model.sharedModel.layersChanged.disconnect(handleLayerChange);
     };
   }, []);
 
@@ -61,7 +55,7 @@ export const LayerBrowserComponent: React.FC<ILayerBrowserDialogProps> = ({
   const handleLayerChange = (_: any, change: IJGISLayerDocChange) => {
     // The split is to get rid of the 'Layer' part of the name to match the names in the gallery
     setActiveLayers(
-      Object.values(model.sharedModel.layers).map(
+      Object.values(props.model.sharedModel.layers).map(
         layer => layer.name.split(' ')[0],
       ),
     );
@@ -79,8 +73,8 @@ export const LayerBrowserComponent: React.FC<ILayerBrowserDialogProps> = ({
     selectedCategory?.classList.remove('jGIS-layer-browser-category-selected');
 
     const filteredGallery = sameAsOld
-      ? registry
-      : registry.filter(item =>
+      ? props.registry
+      : props.registry.filter(item =>
           item.source.provider?.includes(categoryTab.innerText),
         );
 
@@ -115,21 +109,21 @@ export const LayerBrowserComponent: React.FC<ILayerBrowserDialogProps> = ({
       name: tile.name + ' Layer',
     };
 
-    model.sharedModel.addSource(sourceId, sourceModel);
-    model.addLayer(UUID.uuid4(), layerModel);
+    props.model.sharedModel.addSource(sourceId, sourceModel);
+    props.model.addLayer(UUID.uuid4(), layerModel);
   };
 
   if (creatingCustomRaster) {
     // Disconnect any previous handler
-    okSignalPromise.promise.then(value => {
-      value.disconnect(cancel, this);
+    props.okSignalPromise.promise.then(value => {
+      value.disconnect(props.cancel, this);
     });
 
     return (
       <div className="jGIS-customlayer-form">
         <CreationFormWrapper
-          model={model}
-          formSchemaRegistry={formSchemaRegistry}
+          model={props.model}
+          formSchemaRegistry={props.formSchemaRegistry}
           createLayer={true}
           createSource={true}
           layerType={'RasterLayer'}
@@ -143,16 +137,16 @@ export const LayerBrowserComponent: React.FC<ILayerBrowserDialogProps> = ({
             minZoom: 0,
             attribution: '(C) OpenStreetMap contributors',
           }}
-          okSignalPromise={okSignalPromise}
-          cancel={cancel}
+          okSignalPromise={props.okSignalPromise}
+          cancel={props.cancel}
         />
       </div>
     );
   }
 
   // Ok is like cancel in the case of gallery item selections
-  okSignalPromise.promise.then(value => {
-    value.connect(cancel, this);
+  props.okSignalPromise.promise.then(value => {
+    value.connect(props.cancel, this);
   });
 
   return (

packages/base/src/dialogs/symbology/components/color_ramp/CanvasSelectComponent.tsx

@@ -14,10 +14,7 @@ interface ICanvasSelectComponentProps {
   setSelected: (item: any) => void;
 }
 
-const CanvasSelectComponent: React.FC<ICanvasSelectComponentProps> = ({
-  selectedRamp,
-  setSelected,
-}) => {
+const CanvasSelectComponent: React.FC<ICanvasSelectComponentProps> = props => {
   const colorRampNames = [
     'jet',
     // 'hsv', 11 steps min
@@ -86,16 +83,16 @@ const CanvasSelectComponent: React.FC<ICanvasSelectComponentProps> = ({
 
   useEffect(() => {
     if (colorMaps.length > 0) {
-      updateCanvas(selectedRamp);
+      updateCanvas(props.selectedRamp);
     }
-  }, [selectedRamp]);
+  }, [props.selectedRamp]);
 
   const toggleDropdown = () => {
     setIsOpen(!isOpen);
   };
 
   const selectItem = (item: any) => {
-    setSelected(item);
+    props.setSelected(item);
     setIsOpen(false);
     updateCanvas(item);
   };

packages/base/src/dialogs/symbology/components/color_ramp/ColorRamp.tsx

@@ -25,29 +25,23 @@ export type ColorRampOptions = {
   selectedMode: string;
 };
 
-const ColorRamp: React.FC<IColorRampProps> = ({
-  layerParams,
-  modeOptions,
-  classifyFunc,
-  showModeRow,
-  showRampSelector,
-}) => {
+const ColorRamp: React.FC<IColorRampProps> = props => {
   const [selectedRamp, setSelectedRamp] = useState('');
   const [selectedMode, setSelectedMode] = useState('');
   const [numberOfShades, setNumberOfShades] = useState('');
   const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
     populateOptions();
-  }, [layerParams]);
+  }, [props.layerParams]);
 
   const populateOptions = async () => {
     let nClasses, singleBandMode, colorRamp;
 
-    if (layerParams.symbologyState) {
-      nClasses = layerParams.symbologyState.nClasses;
-      singleBandMode = layerParams.symbologyState.mode;
-      colorRamp = layerParams.symbologyState.colorRamp;
+    if (props.layerParams.symbologyState) {
+      nClasses = props.layerParams.symbologyState.nClasses;
+      singleBandMode = props.layerParams.symbologyState.mode;
+      colorRamp = props.layerParams.symbologyState.colorRamp;
     }
     setNumberOfShades(nClasses ? nClasses : '9');
     setSelectedMode(singleBandMode ? singleBandMode : 'equal interval');
@@ -56,7 +50,7 @@ const ColorRamp: React.FC<IColorRampProps> = ({
 
   return (
     <div className="jp-gis-color-ramp-container">
-      {showRampSelector && (
+      {props.showRampSelector && (
         <div className="jp-gis-symbology-row">
           <label htmlFor="color-ramp-select">Color Ramp:</label>
           <CanvasSelectComponent
@@ -65,9 +59,9 @@ const ColorRamp: React.FC<IColorRampProps> = ({
           />
         </div>
       )}
-      {showModeRow && (
+      {props.showModeRow && (
         <ModeSelectRow
-          modeOptions={modeOptions}
+          modeOptions={props.modeOptions}
           numberOfShades={numberOfShades}
           setNumberOfShades={setNumberOfShades}
           selectedMode={selectedMode}
@@ -80,7 +74,7 @@ const ColorRamp: React.FC<IColorRampProps> = ({
         <Button
           className="jp-Dialog-button jp-mod-accept jp-mod-styled"
           onClick={() =>
-            classifyFunc(
+            props.classifyFunc(
               selectedMode,
               numberOfShades,
               selectedRamp,