From cd823bb59bece7ebe9a9fc9ff8dfb8bc58536267 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Tue, 8 Mar 2022 16:06:19 -0500
Subject: [PATCH 1/2] chore(ChipGroup): convert examples to
 TypeScript/functional components

---
 .../ChipGroup/examples/ChipGroup.md           | 140 +-----------------
 .../ChipGroup/examples/ChipGroupInline.tsx    |  28 ++++
 .../examples/ChipGroupRemovableCategories.tsx |  51 +++++++
 .../examples/ChipGroupWithCategories.tsx      |  28 ++++
 4 files changed, 113 insertions(+), 134 deletions(-)
 create mode 100644 packages/react-core/src/components/ChipGroup/examples/ChipGroupInline.tsx
 create mode 100644 packages/react-core/src/components/ChipGroup/examples/ChipGroupRemovableCategories.tsx
 create mode 100644 packages/react-core/src/components/ChipGroup/examples/ChipGroupWithCategories.tsx

diff --git a/packages/react-core/src/components/ChipGroup/examples/ChipGroup.md b/packages/react-core/src/components/ChipGroup/examples/ChipGroup.md
index 42e689284f1..9eacd216aca 100644
--- a/packages/react-core/src/components/ChipGroup/examples/ChipGroup.md
+++ b/packages/react-core/src/components/ChipGroup/examples/ChipGroup.md
@@ -8,145 +8,17 @@ ouia: true
 
 ## Examples
 
-### Simple inline chip group
+### Simple inline
 
-```js
-import React from 'react';
-import { Chip, ChipGroup } from '@patternfly/react-core';
-
-class SimpleInlineChipGroup extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      chips: ['Chip one', 'Really long chip that goes on and on', 'Chip three', 'Chip four', 'Chip five']
-    };
-
-    this.deleteItem = id => {
-      const copyOfChips = this.state.chips;
-      const index = copyOfChips.indexOf(id);
-      if (index !== -1) {
-        copyOfChips.splice(index, 1);
-        this.setState({ chips: copyOfChips });
-      }
-    };
-  }
-
-  render() {
-    const { chips } = this.state;
-
-    return (
-      <ChipGroup>
-        {chips.map(currentChip => (
-          <Chip key={currentChip} onClick={() => this.deleteItem(currentChip)}>
-            {currentChip}
-          </Chip>
-        ))}
-      </ChipGroup>
-    );
-  }
-}
+```ts file='./ChipGroupInline.tsx'
 ```
 
-### Chip groups with categories
-
-```js
-import React from 'react';
-import { Chip, ChipGroup } from '@patternfly/react-core';
-
-class SimpleCategoryChipGroup extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      chips: ['Chip one', 'Chip two', 'Chip three', 'Chip four', 'Chip five']
-    };
-    this.deleteItem = id => {
-      const copyOfChips = this.state.chips;
-      const index = copyOfChips.indexOf(id);
-      if (index !== -1) {
-        copyOfChips.splice(index, 1);
-        this.setState({ chips: copyOfChips });
-      }
-    };
-  }
-
-  render() {
-    const { chips } = this.state;
+### With categories
 
-    return (
-      <ChipGroup categoryName="Category one">
-        {chips.map(currentChip => (
-          <Chip key={currentChip} onClick={() => this.deleteItem(currentChip)}>
-            {currentChip}
-          </Chip>
-        ))}
-      </ChipGroup>
-    );
-  }
-}
+```ts file='./ChipGroupWithCategories.tsx'
 ```
 
-### Chip groups with categories removable
-
-```js
-import React from 'react';
-import { Chip, ChipGroup } from '@patternfly/react-core';
-
-class CategoryChipGroupRemovable extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      chips: ['Chip one', 'Chip two', 'Chip three'],
-      chips2: ['Chip one', 'Chip two', 'Chip three', 'Chip 4']
-    };
-    this.deleteItem = id => {
-      const copyOfChips = this.state.chips;
-      const index = copyOfChips.indexOf(id);
-      if (index !== -1) {
-        copyOfChips.splice(index, 1);
-        this.setState({ chips: copyOfChips });
-      }
-    };
-
-    this.deleteItem2 = id => {
-      const copyOfChips = this.state.chips2;
-      const index = copyOfChips.indexOf(id);
-      if (index !== -1) {
-        copyOfChips.splice(index, 1);
-        this.setState({ chips2: copyOfChips });
-      }
-    };
-
-    this.deleteCategory = () => {
-      this.setState({ chips: [] });
-    };
-
-    this.deleteCategory2 = () => {
-      this.setState({ chips2: [] });
-    };
-  }
-
-  render() {
-    const { chips, chips2 } = this.state;
+### With removable categories
 
-    return (
-      <React.Fragment>
-        <ChipGroup categoryName="Category one" isClosable onClick={this.deleteCategory}>
-          {chips.map(currentChip => (
-            <Chip key={currentChip} onClick={() => this.deleteItem(currentChip)}>
-              {currentChip}
-            </Chip>
-          ))}
-        </ChipGroup>
-        <br /> <br />
-        <ChipGroup categoryName="Category two has a very long name" isClosable onClick={this.deleteCategory2}>
-          {chips2.map(currentChip => (
-            <Chip key={currentChip} onClick={() => this.deleteItem2(currentChip)}>
-              {currentChip}
-            </Chip>
-          ))}
-        </ChipGroup>
-      </React.Fragment>
-    );
-  }
-}
+```ts file='./ChipGroupRemovableCategories.tsx'
 ```
diff --git a/packages/react-core/src/components/ChipGroup/examples/ChipGroupInline.tsx b/packages/react-core/src/components/ChipGroup/examples/ChipGroupInline.tsx
new file mode 100644
index 00000000000..891dbe81534
--- /dev/null
+++ b/packages/react-core/src/components/ChipGroup/examples/ChipGroupInline.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Chip, ChipGroup } from '@patternfly/react-core';
+
+export const ChipGroupInline: React.FunctionComponent = () => {
+  const [chips, setChips] = React.useState([
+    'Chip one',
+    'Really long chip that goes on and on',
+    'Chip three',
+    'Chip four',
+    'Chip five'
+  ]);
+
+  const deleteItem = (id: string) => {
+    const copyOfChips = [...chips];
+    const filteredCopy = copyOfChips.filter(chip => chip !== id);
+    setChips(filteredCopy);
+  };
+
+  return (
+    <ChipGroup>
+      {chips.map(currentChip => (
+        <Chip key={currentChip} onClick={() => deleteItem(currentChip)}>
+          {currentChip}
+        </Chip>
+      ))}
+    </ChipGroup>
+  );
+};
diff --git a/packages/react-core/src/components/ChipGroup/examples/ChipGroupRemovableCategories.tsx b/packages/react-core/src/components/ChipGroup/examples/ChipGroupRemovableCategories.tsx
new file mode 100644
index 00000000000..93182addc41
--- /dev/null
+++ b/packages/react-core/src/components/ChipGroup/examples/ChipGroupRemovableCategories.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { Chip, ChipGroup } from '@patternfly/react-core';
+
+export const ChipGroupRemovableCategories: React.FunctionComponent = () => {
+  const [chipGroup1, setChipGroup1] = React.useState(['Chip one', 'Chip two', 'Chip three']);
+  const [chipGroup2, setChipGroup2] = React.useState(['Chip one', 'Chip two', 'Chip three', 'Chip four']);
+
+  const deleteItem = (id: string, group: string) => {
+    const isGroupOne = group === 'chipGroup1';
+    const copyOfChips = isGroupOne ? [...chipGroup1] : [...chipGroup2];
+    const filteredCopy = copyOfChips.filter(chip => chip !== id);
+
+    if (isGroupOne) {
+      setChipGroup1(filteredCopy);
+    } else {
+      setChipGroup2(filteredCopy);
+    }
+  };
+
+  const deleteCategory = (id: string) => {
+    if (id === 'Category one') {
+      setChipGroup1([]);
+    } else {
+      setChipGroup2([]);
+    }
+  };
+
+  return (
+    <React.Fragment>
+      <ChipGroup categoryName="Category one" isClosable onClick={() => deleteCategory('Category one')}>
+        {chipGroup1.map(currentChip => (
+          <Chip key={currentChip} onClick={() => deleteItem(currentChip, 'chipGroup1')}>
+            {currentChip}
+          </Chip>
+        ))}
+      </ChipGroup>
+      <br /> <br />
+      <ChipGroup
+        categoryName="Category two has a very long name"
+        isClosable
+        onClick={() => deleteCategory('Category two')}
+      >
+        {chipGroup2.map(currentChip => (
+          <Chip key={currentChip} onClick={() => deleteItem(currentChip, 'chipGroup2')}>
+            {currentChip}
+          </Chip>
+        ))}
+      </ChipGroup>
+    </React.Fragment>
+  );
+};
diff --git a/packages/react-core/src/components/ChipGroup/examples/ChipGroupWithCategories.tsx b/packages/react-core/src/components/ChipGroup/examples/ChipGroupWithCategories.tsx
new file mode 100644
index 00000000000..09a5d508201
--- /dev/null
+++ b/packages/react-core/src/components/ChipGroup/examples/ChipGroupWithCategories.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Chip, ChipGroup } from '@patternfly/react-core';
+
+export const ChipGroupWithCategories: React.FunctionComponent = () => {
+  const [chips, setChips] = React.useState([
+    'Chip one',
+    'Really long chip that goes on and on',
+    'Chip three',
+    'Chip four',
+    'Chip five'
+  ]);
+
+  const deleteItem = (id: string) => {
+    const copyOfChips = [...chips];
+    const filteredCopy = copyOfChips.filter(chip => chip !== id);
+    setChips(filteredCopy);
+  };
+
+  return (
+    <ChipGroup categoryName="Category one">
+      {chips.map(currentChip => (
+        <Chip key={currentChip} onClick={() => deleteItem(currentChip)}>
+          {currentChip}
+        </Chip>
+      ))}
+    </ChipGroup>
+  );
+};

From d041ca66ca56f2bd97a32c971dc3152071314c75 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Wed, 9 Mar 2022 15:39:52 -0500
Subject: [PATCH 2/2] Utilize reference for delete methods

---
 .../examples/ChipGroupRemovableCategories.tsx | 23 ++++++++-----------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/packages/react-core/src/components/ChipGroup/examples/ChipGroupRemovableCategories.tsx b/packages/react-core/src/components/ChipGroup/examples/ChipGroupRemovableCategories.tsx
index 93182addc41..6cf9df8b644 100644
--- a/packages/react-core/src/components/ChipGroup/examples/ChipGroupRemovableCategories.tsx
+++ b/packages/react-core/src/components/ChipGroup/examples/ChipGroupRemovableCategories.tsx
@@ -5,20 +5,19 @@ export const ChipGroupRemovableCategories: React.FunctionComponent = () => {
   const [chipGroup1, setChipGroup1] = React.useState(['Chip one', 'Chip two', 'Chip three']);
   const [chipGroup2, setChipGroup2] = React.useState(['Chip one', 'Chip two', 'Chip three', 'Chip four']);
 
-  const deleteItem = (id: string, group: string) => {
-    const isGroupOne = group === 'chipGroup1';
-    const copyOfChips = isGroupOne ? [...chipGroup1] : [...chipGroup2];
+  const deleteItem = (id: string, group: string[]) => {
+    const copyOfChips = [...group];
     const filteredCopy = copyOfChips.filter(chip => chip !== id);
 
-    if (isGroupOne) {
+    if (group === chipGroup1) {
       setChipGroup1(filteredCopy);
     } else {
       setChipGroup2(filteredCopy);
     }
   };
 
-  const deleteCategory = (id: string) => {
-    if (id === 'Category one') {
+  const deleteCategory = (group: string[]) => {
+    if (group === chipGroup1) {
       setChipGroup1([]);
     } else {
       setChipGroup2([]);
@@ -27,21 +26,17 @@ export const ChipGroupRemovableCategories: React.FunctionComponent = () => {
 
   return (
     <React.Fragment>
-      <ChipGroup categoryName="Category one" isClosable onClick={() => deleteCategory('Category one')}>
+      <ChipGroup categoryName="Category one" isClosable onClick={() => deleteCategory(chipGroup1)}>
         {chipGroup1.map(currentChip => (
-          <Chip key={currentChip} onClick={() => deleteItem(currentChip, 'chipGroup1')}>
+          <Chip key={currentChip} onClick={() => deleteItem(currentChip, chipGroup1)}>
             {currentChip}
           </Chip>
         ))}
       </ChipGroup>
       <br /> <br />
-      <ChipGroup
-        categoryName="Category two has a very long name"
-        isClosable
-        onClick={() => deleteCategory('Category two')}
-      >
+      <ChipGroup categoryName="Category two has a very long name" isClosable onClick={() => deleteCategory(chipGroup2)}>
         {chipGroup2.map(currentChip => (
-          <Chip key={currentChip} onClick={() => deleteItem(currentChip, 'chipGroup2')}>
+          <Chip key={currentChip} onClick={() => deleteItem(currentChip, chipGroup2)}>
             {currentChip}
           </Chip>
         ))}