From bd9d7f3e6644bab84dab1c1a776ce0b456af5fb3 Mon Sep 17 00:00:00 2001
From: shem <shem.mahluf@nielsen.com>
Date: Wed, 5 May 2021 17:19:54 +0300
Subject: [PATCH] chore: added tsx tab

---
 docs/react-testing-library/example-intro.mdx | 83 +++++++++++++++++++-
 1 file changed, 80 insertions(+), 3 deletions(-)

diff --git a/docs/react-testing-library/example-intro.mdx b/docs/react-testing-library/example-intro.mdx
index e2ea91ff5..2890dbce0 100644
--- a/docs/react-testing-library/example-intro.mdx
+++ b/docs/react-testing-library/example-intro.mdx
@@ -4,6 +4,9 @@ title: Example
 sidebar_label: Example
 ---
 
+import Tabs from '@theme/Tabs'
+import TabItem from '@theme/TabItem'
+
 ## Full Example
 
 See the following sections for a detailed breakdown of the test
@@ -167,9 +170,12 @@ expect(screen.getByRole('button')).not.toHaveAttribute('disabled')
 
 ### System Under Test
 
-fetch.js
+  <Tabs groupId="test-utils" defaultValue="jsx" values={[ {label: 'Javascript',
+  value: 'jsx'}, {label: 'Typescript', value: 'tsx'}, ]}>
 
-```jsx
+  <TabItem value="jsx">
+
+```jsx title="fetch.jsx"
 import React, { useState, useReducer } from 'react'
 import axios from 'axios'
 
@@ -205,7 +211,7 @@ export default function Fetch({ url }) {
   )
   const [buttonClicked, setButtonClicked] = useState(false)
 
-  const fetchGreeting = async url =>
+  const fetchGreeting = async (url) =>
     axios
       .get(url)
       .then((response) => {
@@ -218,6 +224,72 @@ export default function Fetch({ url }) {
         dispatch({ type: 'ERROR', error })
       })
 
+  const buttonText = buttonClicked ? 'Ok' : 'Load Greeting'
+
+  return (
+    <div>
+      <button onClick={() => fetchGreeting(url)} disabled={buttonClicked}>
+        {buttonText}
+      </button>
+      {greeting && <h1>{greeting}</h1>}
+      {error && <p role="alert">Oops, failed to fetch!</p>}
+    </div>
+  )
+}
+```
+
+  </TabItem>
+
+  <TabItem value="tsx">
+
+```tsx title="fetch.tsx"
+import React, { useState, useReducer } from 'react'
+import axios from 'axios'
+
+const initialState = {
+  error: null,
+  greeting: null,
+}
+
+function greetingReducer(state: any, action: any) {
+  switch (action.type) {
+    case 'SUCCESS': {
+      return {
+        error: null,
+        greeting: action.greeting,
+      }
+    }
+    case 'ERROR': {
+      return {
+        error: action.error,
+        greeting: null,
+      }
+    }
+    default: {
+      return state
+    }
+  }
+}
+
+export default function Fetch({ url }: { url: string }) {
+  const [{ error, greeting }, dispatch] = useReducer(
+    greetingReducer,
+    initialState
+  )
+  const [buttonClicked, setButtonClicked] = useState(false)
+
+  const fetchGreeting = async (url: string) =>
+    axios
+      .get(url)
+      .then((response) => {
+        const { data } = response
+        const { greeting } = data
+        dispatch({ type: 'SUCCESS', greeting })
+        setButtonClicked(true)
+      })
+      .catch((error) => {
+        dispatch({ type: 'ERROR', error })
+      })
 
   const buttonText = buttonClicked ? 'Ok' : 'Load Greeting'
 
@@ -232,3 +304,8 @@ export default function Fetch({ url }) {
   )
 }
 ```
+
+  </TabItem>
+
+  </Tabs>
+