From 2caf28584454bcb7cc70bbf49303e60dae114bb9 Mon Sep 17 00:00:00 2001
From: Naman Anand <iamnamananand996@gmail.com>
Date: Thu, 7 Mar 2024 02:47:52 +0530
Subject: [PATCH 1/2] feat: detected Legacy component lifecycle

---
 .grit/patterns/js/react_legacy_component.md | 135 ++++++++++++++++++++
 1 file changed, 135 insertions(+)
 create mode 100644 .grit/patterns/js/react_legacy_component.md

diff --git a/.grit/patterns/js/react_legacy_component.md b/.grit/patterns/js/react_legacy_component.md
new file mode 100644
index 00000000..6433c42c
--- /dev/null
+++ b/.grit/patterns/js/react_legacy_component.md
@@ -0,0 +1,135 @@
+---
+title: Update React legacy component
+---
+
+detected Legacy component lifecycle
+- `componentWillMount` -> `componentDidMount`  
+- `componentWillReceiveProps` -> `componentDidUpdate` 
+-  `componentWillUpdate` -> `componentDidUpdate`
+
+tags: #migration, #fix
+
+```grit
+engine marzano(0.1)
+language js
+
+
+any {
+    or {`componentWillReceiveProps`,`componentWillUpdate`} => `componentDidUpdate`,
+    `componentWillMount` => `componentDidMount`,
+}
+```
+
+## with `componentWillReceiveProps`
+
+```javascript
+class Test1 extends React.Component {
+  state = {
+    value: '',
+  };
+  // ruleid: react-legacy-component
+  componentWillReceiveProps(nextProps) {
+    this.setState({ value: nextProps.value });
+  }
+  handleChange = (e) => {
+    this.setState({ value: e.target.value });
+  };
+  render() {
+    return <input value={this.state.value} onChange={this.handleChange} />;
+  }
+}
+```
+
+```javascript
+class Test1 extends React.Component {
+  state = {
+    value: '',
+  };
+  // ruleid: react-legacy-component
+  componentDidUpdate(nextProps) {
+    this.setState({ value: nextProps.value });
+  }
+  handleChange = (e) => {
+    this.setState({ value: e.target.value });
+  };
+  render() {
+    return <input value={this.state.value} onChange={this.handleChange} />;
+  }
+}
+```
+
+## with `componentWillUpdate`
+
+```javascript
+class Test1 extends React.Component {
+  state = {
+    value: '',
+  };
+  // ruleid: react-legacy-component
+  componentWillUpdate(nextProps) {
+    this.setState({ value: nextProps.value });
+  }
+  handleChange = (e) => {
+    this.setState({ value: e.target.value });
+  };
+  render() {
+    return <input value={this.state.value} onChange={this.handleChange} />;
+  }
+}
+```
+
+```javascript
+class Test1 extends React.Component {
+  state = {
+    value: '',
+  };
+  // ruleid: react-legacy-component
+  componentDidUpdate(nextProps) {
+    this.setState({ value: nextProps.value });
+  }
+  handleChange = (e) => {
+    this.setState({ value: e.target.value });
+  };
+  render() {
+    return <input value={this.state.value} onChange={this.handleChange} />;
+  }
+}
+```
+
+## with `componentWillMount`
+
+```javascript
+class Test1 extends React.Component {
+  state = {
+    value: '',
+  };
+  // ruleid: react-legacy-component
+  componentWillMount(nextProps) {
+    this.setState({ value: nextProps.value });
+  }
+  handleChange = (e) => {
+    this.setState({ value: e.target.value });
+  };
+  render() {
+    return <input value={this.state.value} onChange={this.handleChange} />;
+  }
+}
+```
+
+```javascript
+class Test1 extends React.Component {
+  state = {
+    value: '',
+  };
+  // ruleid: react-legacy-component
+  componentDidMount(nextProps) {
+    this.setState({ value: nextProps.value });
+  }
+  handleChange = (e) => {
+    this.setState({ value: e.target.value });
+  };
+  render() {
+    return <input value={this.state.value} onChange={this.handleChange} />;
+  }
+}
+```

From a982b79d3df5da7636b33366bb6509471a0d64e6 Mon Sep 17 00:00:00 2001
From: Naman Anand <iamnamananand996@gmail.com>
Date: Sat, 16 Mar 2024 14:29:45 +0530
Subject: [PATCH 2/2] chore: update title

---
 .grit/patterns/js/react_legacy_component.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.grit/patterns/js/react_legacy_component.md b/.grit/patterns/js/react_legacy_component.md
index 6433c42c..96def76b 100644
--- a/.grit/patterns/js/react_legacy_component.md
+++ b/.grit/patterns/js/react_legacy_component.md
@@ -1,5 +1,5 @@
 ---
-title: Update React legacy component
+title: Remove legacy React lifecycle methods
 ---
 
 detected Legacy component lifecycle