nice integration of typescript

models/user.ts

@@ -0,0 +1,12 @@
+export class User {
+    id: string;
+    nickname: string;
+
+}
+
+export enum UserStatus {
+    online = "online",
+    offline = "offline",
+    inCall = "in call",
+    busy = "busy" 
+}

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package-lock.json

@@ -12,6 +12,7 @@
         "react-icons": "^4.3.1"
       },
       "devDependencies": {
+        "@types/react": "^17.0.38",
         "autoprefixer": "^10.4.2",
         "eslint": "8.4.0",
         "eslint-config-next": "12.0.7",
@@ -1190,6 +1191,29 @@
       "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
       "dev": true
     },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.4",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
+      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==",
+      "dev": true
+    },
+    "node_modules/@types/react": {
+      "version": "17.0.38",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.38.tgz",
+      "integrity": "sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/scheduler": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
+      "dev": true
+    },
     "node_modules/@typescript-eslint/parser": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.5.0.tgz",
@@ -2133,6 +2157,12 @@
         }
       }
     },
+    "node_modules/csstype": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
+      "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==",
+      "dev": true
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz",
@@ -6830,6 +6860,29 @@
       "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
       "dev": true
     },
+    "@types/prop-types": {
+      "version": "15.7.4",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
+      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==",
+      "dev": true
+    },
+    "@types/react": {
+      "version": "17.0.38",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.38.tgz",
+      "integrity": "sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ==",
+      "dev": true,
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@types/scheduler": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
+      "dev": true
+    },
     "@typescript-eslint/parser": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.5.0.tgz",
@@ -7540,6 +7593,12 @@
         "cssnano-preset-simple": "^3.0.0"
       }
     },
+    "csstype": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
+      "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==",
+      "dev": true
+    },
     "damerau-levenshtein": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz",

package.json

@@ -14,6 +14,7 @@
     "react-icons": "^4.3.1"
   },
   "devDependencies": {
+    "@types/react": "^17.0.38",
     "autoprefixer": "^10.4.2",
     "eslint": "8.4.0",
     "eslint-config-next": "12.0.7",

pages/teams/demo.tsx

@@ -2,43 +2,44 @@ import Head from 'next/head'
 import Image from 'next/image';
 import React from 'react';
 import { FaMicrophoneAlt, FaHeadphonesAlt, FaTh } from "react-icons/fa";
+import { UserStatus, User } from '../../models/user'
 
-let testFriends = [
+let testFriends = [ 
     {
         name: "Liam",
         role: "engineer",
         systemAvatar: "1",
-        status: "online"
+        status: UserStatus.online
     },
     {
         name: "Emily",
         role: "engineer",
         systemAvatar: "2",
-        status: "online"
+        status: UserStatus.online
     },
     {
         name: "Paul",
         role: "architect",
         systemAvatar: "3",
-        status: "online"
+        status: UserStatus.online
     },
     {
         name: "Mark",
         role: "engineer",
         systemAvatar: "4",
-        status: "busy"
+        status: UserStatus.busy
     },
     {
         name: "Adriana",
         role: "design",
         systemAvatar: "5",
-        status: "busy"
+        status: UserStatus.busy
     },
     {
         name: "Josh",
         role: "design",
         systemAvatar: "6",
-        status: "offline"
+        status: UserStatus.offline
     }
 ]
 
@@ -50,8 +51,19 @@ export default class Demo extends React.Component {
         }
     }
 
-    statusBubble(status) {
+    statusBubble(status: UserStatus) {
+        console.log(status)
 
+        switch(status) {
+            case UserStatus.online:
+                return <span className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full"></span>
+            case UserStatus.busy:
+                return <span className="absolute top-0 right-0 w-3 h-3 bg-orange-400 rounded-full"></span>
+            case UserStatus.offline:
+                return <span className="absolute top-0 right-0 w-3 h-3 bg-gray-400 rounded-full"></span>
+            default:
+                return <span className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full"></span>
+        }
     }
 
     render() {
@@ -102,12 +114,13 @@ export default class Demo extends React.Component {
                         {/* list of team members */}
                         {
                             testFriends.map((friend, i) => {
-                                console.log(friend)
                                 return (
                                     <span key={i} className={`flex flex-row items-center border-t-2 py-2 px-2 justify-items-start w-60${this.state.selectedNumber == i ? "bg-gray-300" : " "}`}>
                                         <span className='relative flex mr-2'>
                                             <span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
-                                            <span className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full"></span>
+                                            
+                                            {this.statusBubble(friend.status)}
+
                                             <Image src="/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-05.svg" alt="profile" width={50} height={50} />
                                         </span>
                     
@@ -115,17 +128,14 @@ export default class Demo extends React.Component {
                                             <font className="text-sm text-black font-bold">{friend.name} {friend.status}</font>
                     
                                             <font className="text-gray-300 text-xs font-sans">{friend.role}</font>
-                                        </span>
+                                        </span>                                        
-                                        
                                         
                                         {
                                             this.state.selectedNumber == i ? 
                                             <span className="rounded-lg p-2 ml-auto border border-gray-300 shadow-lg">
                                                 <font className="text-gray-200">{i}</font>
                                             </span>
-                                            
                                             :
-
                                             <span className="rounded-lg p-2 ml-auto border border-gray-100 shadow-md">
                                                 <font className="text-gray-200">{i}</font>
                                             </span>

tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}