Merge pull request #121 from MateuszKikmunter/typescript-migration-sa…

…mple-app

feat: Typescript migration - sample app

sample-app/package.json

@@ -9,9 +9,15 @@
     "@testing-library/user-event": "^12.8.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "web-vitals": "^1.1.2"
   },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@types/react": "^18.2.47",
+    "@types/react-dom": "^18.2.18",
+    "typescript": "^5.3.3"
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
@@ -39,5 +45,8 @@
   },
   "optionalDependencies": {
     "fsevents": "^2.3.3"
+  },
+  "overrides": {
+    "typescript": "^5.3.3"
   }
 }

sample-app/src/App.tsx

@@ -0,0 +1,58 @@
+import React, { useEffect, useState } from 'react';
+
+interface Character {
+  _id: string;
+  name: string;
+}
+
+interface Quote {
+  dialog: string;
+  character: string;
+}
+
+const App: React.FC = () => {
+  const [quote, setQuote] = useState<string | undefined>();
+  const [character, setCharacter] = useState<string | undefined>();
+
+  useEffect(() => {
+    const headers = {
+      'Accept': 'application/json',
+      'Authorization': 'Bearer yourapikey',
+    };
+
+    const fetchData = async () => {
+      try {
+        const rawQuotes = await fetch('https://the-one-api.dev/v2/quote', {
+          headers: headers,
+        });
+
+        const quotes = await rawQuotes.json();
+        const quoteData: Quote = quotes.docs[Math.floor(Math.random() * quotes.docs.length)];
+
+        setQuote(quoteData.dialog);
+
+        const rawCharacters = await fetch(`https://the-one-api.dev/v2/character?_id=${quoteData.character}`, {
+          headers: headers,
+        });
+
+        const characters = await rawCharacters.json();
+        const characterData: Character = characters.docs[0];
+
+        setCharacter(characterData.name);
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  return (
+    <div>
+      <blockquote>{quote}</blockquote>
+      <cite>- {character}</cite>
+    </div>
+  );
+};
+
+export default App;

sample-app/src/index.js → sample-app/src/index.tsx

@@ -9,4 +9,3 @@ ReactDOM.render(
   </React.StrictMode>,
   document.getElementById('root')
 );
-

sample-app/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "noImplicitAny": true,
+    "module": "esnext",
+    "target": "es5",
+    "jsx": "preserve",
+    "allowJs": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "noEmit": true
+  }
+}