Updated readme and linting issues

samples/react-quick-links/README.md

@@ -62,7 +62,7 @@ This web part demonstrates a couple of nice skillsets for an SPFx developer, the
 
 This demonstrates:
 
-* Dynamic propertypane that changes based on user input in the web part
+* Dynamic property pane that changes based on user input in the web part
 * Fluent Drag 'n drop using 'react-sortable-hoc'
 * Using PnP Reusable Controls (Icon picker and WebPartTitle)
 * Styling Fluent UI components (please don't look at the actual CSS, but the principals of how to do it)

samples/react-quick-links/src/webparts/pnPQuickLinks/PnPQuickLinksWebPart.ts

@@ -6,7 +6,6 @@ import {
   IPropertyPaneConfiguration,
   IPropertyPaneGroup,
   PropertyPaneButton,
-  PropertyPaneCheckbox,
   PropertyPaneChoiceGroup,
   PropertyPaneLabel,
   PropertyPaneTextField,
@@ -18,7 +17,6 @@ import { ILink } from './models/ILink';
 import { PropertyFieldIconPicker } from '@pnp/spfx-property-controls/lib/PropertyFieldIconPicker';
 import { IPnPQuickLinksProps } from './components/IPnPQuickLinksProps';
 import { LayoutType, TileSize } from './models/enums';
-import { PropertyPaneDescription } from 'PnPQuickLinksWebPartStrings';
 
 
 
@@ -68,7 +66,7 @@ export default class PnPQuickLinksWebPart extends BaseClientSideWebPart<IPnPQuic
         break;
 
       //Feel free to contribute here and add the other layouts so we can eventually have every layout supported!
-    };
+    }
 
     ReactDom.render(element, this.domElement);
   }
@@ -106,6 +104,7 @@ export default class PnPQuickLinksWebPart extends BaseClientSideWebPart<IPnPQuic
                   PropertyFieldIconPicker(`links[${index}].IconName`,
                     {
                       key: `links[${index}].IconName`,
+                      // eslint-disable-next-line no-return-assign
                       onSave: name => this.properties.links[index].IconName = name,
                       onPropertyChange: this.onPropertyPaneFieldChanged,
                       properties: this.properties,
@@ -124,7 +123,7 @@ export default class PnPQuickLinksWebPart extends BaseClientSideWebPart<IPnPQuic
                     text: "Delete",
                     icon: "Delete",
                     onClick: () => {
-                      this.properties.links = this.properties.links.filter(x => x.Id != this.SelectedItemId);
+                      this.properties.links = this.properties.links.filter(x => x.Id !== this.SelectedItemId);
                       this.onPropertyPaneFieldChanged("links", null, this.properties.links);
                       this.SelectedItemId = null;
                       this.context.propertyPane.refresh();
@@ -168,7 +167,7 @@ export default class PnPQuickLinksWebPart extends BaseClientSideWebPart<IPnPQuic
                 }),
               ]
             },
-            ...(this.properties.type == LayoutType.Tiles ? this.TileLayoutFields() : []),
+            ...(this.properties.type === LayoutType.Tiles ? this.TileLayoutFields() : []),
             {
               groupName: "Filter",
               groupFields: [

samples/react-quick-links/src/webparts/pnPQuickLinks/Util/Util.ts

@@ -6,12 +6,12 @@ export class Util {
         return uniqueId;
     }
 
-    public static CalculateNewSortWeight(arr: ILink[], newIndex: number, oldIndex?: number) {
+    public static CalculateNewSortWeight(arr: ILink[], newIndex: number, oldIndex?: number):number {
         const links = [...arr].sort((a, b) => a.SortWeight - b.SortWeight);
 
-        if (newIndex == 0)
+        if (newIndex === 0)
             return this.GetAverage(null, links[0]?.SortWeight);
-        if (newIndex == links.length)
+        if (newIndex === links.length)
             return this.GetAverage(links[links.length - 1].SortWeight, null);
 
         if (newIndex < oldIndex)
@@ -19,9 +19,9 @@ export class Util {
         return this.GetAverage(links[newIndex]?.SortWeight, links[newIndex + 1]?.SortWeight)
     }
 
-    private static GetAverage(prev: number, next: number) {
-        if (prev == null) prev = 0;
-        if (next == null) next = 1;
+    private static GetAverage(prev: number, next: number):number {
+        if (prev === null) prev = 0;
+        if (next === null) next = 1;
 
         return (prev + next) / 2
     }

samples/react-quick-links/src/webparts/pnPQuickLinks/components/TilesQuickLinks.tsx

@@ -18,7 +18,7 @@ export const TilesQuickLinks: React.FunctionComponent<ITilesQuickLinksProps> = (
   const { displayMode, webPartTitle, setWebpartTitle, links, setLinks, SelectedItemId, setSelectedItemId, hideText, size } = props;
   const theme = getTheme();
 
-  const AddLink = () => {
+  const AddLink = ():void => {
     setLinks([...links, {
       Id: Util.GenerateId(),
       SortWeight: Util.CalculateNewSortWeight(links, links.length),
@@ -37,7 +37,7 @@ export const TilesQuickLinks: React.FunctionComponent<ITilesQuickLinksProps> = (
       text={link.Title}
       styles={{
         root: {
-          border: SelectedItemId == link.Id ? `3px solid ${theme.palette.themeSecondary}` : undefined,
+          border: SelectedItemId === link.Id ? `3px solid ${theme.palette.themeSecondary}` : undefined,
           width: size < TileSize.Large ? 85 + size : 130,
           minHeight: size < TileSize.Large ? 80 + size : 124,
           borderRadius: 3
@@ -50,10 +50,10 @@ export const TilesQuickLinks: React.FunctionComponent<ITilesQuickLinksProps> = (
           textAlign: "center"
         },
       }}
-      href={displayMode == DisplayMode.Read && link.Link}
-      target={displayMode == DisplayMode.Read && link.Target}
+      href={displayMode === DisplayMode.Read && link.Link}
+      target={displayMode === DisplayMode.Read && link.Target}
 
-      onClick={displayMode == DisplayMode.Edit && (() => setSelectedItemId(link.Id))}
+      onClick={displayMode === DisplayMode.Edit && (() => setSelectedItemId(link.Id))}
       onRenderText={(props) => {
         return (
           <Stack styles={{ root: { gap: 10 } }}>
@@ -71,13 +71,13 @@ export const TilesQuickLinks: React.FunctionComponent<ITilesQuickLinksProps> = (
           key={`${item.Id}`}
           index={index}
           link={item}
-          disabled={displayMode == DisplayMode.Read}
+          disabled={displayMode === DisplayMode.Read}
         />
       ))}
     </div>
   ));
 
-  const UpdateSortIndex = (indexToMove: number, newIndex: number) => {
+  const UpdateSortIndex = (indexToMove: number, newIndex: number):void => {
     const arr = [...links].sort((a, b) => a.SortWeight - b.SortWeight);
     const res = Util.CalculateNewSortWeight(links, newIndex, indexToMove);
     arr[indexToMove].SortWeight = res;
@@ -94,7 +94,7 @@ export const TilesQuickLinks: React.FunctionComponent<ITilesQuickLinksProps> = (
         updateProperty={setWebpartTitle}
       />
 
-      {displayMode == DisplayMode.Edit && <ActionButton iconProps={{ iconName: "Add" }} onClick={() => AddLink()} >Add link</ActionButton>}
+      {displayMode === DisplayMode.Edit && <ActionButton iconProps={{ iconName: "Add" }} onClick={() => AddLink()} >Add link</ActionButton>}
 
       <SortableList
         items={[...links].sort((a, b) => a.SortWeight - b.SortWeight)}