Merge pull request #2 from knowankit/feat/add-fe-typescript

Typescript support

Author: knowankit

apps/api/schema.gql

@@ -6,7 +6,7 @@ input CreateTaskInput {
   _id: ID!
   description: String
   endDate: DateTime
-  startDate: DateTime = "2022-04-02T08:21:45.099Z"
+  startDate: DateTime = "2022-04-03T08:34:13.996Z"
   status: String = "pending"
   title: String!
 }

apps/fe-e2e/cypress.json

@@ -3,7 +3,7 @@
   "fixturesFolder": "./src/fixtures",
   "integrationFolder": "./src/integration",
   "modifyObstructiveCode": false,
-  "supportFile": "./src/support/index.js",
+  "supportFile": "./src/support/index.ts",
   "pluginsFile": false,
   "video": true,
   "videosFolder": "../../dist/cypress/apps/fe-e2e/videos",

apps/fe-e2e/project.json

@@ -19,7 +19,7 @@
       "executor": "@nrwl/linter:eslint",
       "outputs": ["{options.outputFile}"],
       "options": {
-        "lintFilePatterns": ["apps/fe-e2e/**/*.js"]
+        "lintFilePatterns": ["apps/fe-e2e/**/*.{js,ts}"]
       }
     }
   },

apps/fe-e2e/src/integration/app.spec.js renamed to apps/fe-e2e/src/integration/app.spec.ts

@@ -1,9 +1,12 @@
 import { getGreeting } from '../support/app.po';
+
 describe('fe', () => {
   beforeEach(() => cy.visit('/'));
+
   it('should display welcome message', () => {
     // Custom command example, see `../support/commands.ts` file
     cy.login('my-email@something.com', 'myPassword');
+
     // Function helper example, see `../support/app.po.ts` file
     getGreeting().contains('Welcome fe');
   });

apps/fe-e2e/src/support/app.po.js renamed to apps/fe-e2e/src/support/app.po.ts

@@ -7,6 +7,14 @@
 // commands please read more here:
 // https://on.cypress.io/custom-commands
 // ***********************************************
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+declare namespace Cypress {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface Chainable<Subject> {
+    login(email: string, password: string): void;
+  }
+}
 //
 // -- This is a parent command --
 Cypress.Commands.add('login', (email, password) => {

apps/fe-e2e/src/support/commands.js renamed to apps/fe-e2e/src/support/commands.ts

@@ -12,5 +12,6 @@
 // You can read more here:
 // https://on.cypress.io/configuration
 // ***********************************************************
+
 // Import commands.js using ES2015 syntax:
 import './commands';

apps/fe-e2e/src/support/index.js renamed to apps/fe-e2e/src/support/index.ts

@@ -12,8 +12,8 @@
         "outputPath": "dist/apps/fe",
         "index": "apps/fe/src/index.html",
         "baseHref": "/",
-        "main": "apps/fe/src/main.js",
-        "polyfills": "apps/fe/src/polyfills.js",
+        "main": "apps/fe/src/main.tsx",
+        "polyfills": "apps/fe/src/polyfills.ts",
         "tsConfig": "apps/fe/tsconfig.app.json",
         "assets": ["apps/fe/src/favicon.ico", "apps/fe/src/assets"],
         "styles": ["apps/fe/src/styles.scss"],
@@ -24,8 +24,8 @@
         "production": {
           "fileReplacements": [
             {
-              "replace": "apps/fe/src/environments/environment.js",
-              "with": "apps/fe/src/environments/environment.prod.js"
+              "replace": "apps/fe/src/environments/environment.ts",
+              "with": "apps/fe/src/environments/environment.prod.ts"
             }
           ],
           "optimization": true,

apps/fe/project.json

@@ -1,21 +1,27 @@
 import { render } from '@testing-library/react';
+
 import { BrowserRouter } from 'react-router-dom';
+
 import App from './app';
+
 describe('App', () => {
   it('should render successfully', () => {
     const { baseElement } = render(
       <BrowserRouter>
         <App />
       </BrowserRouter>
     );
+
     expect(baseElement).toBeTruthy();
   });
+
   it('should have a greeting as the title', () => {
     const { getByText } = render(
       <BrowserRouter>
         <App />
       </BrowserRouter>
     );
+
     expect(getByText(/Welcome fe/gi)).toBeTruthy();
   });
 });

apps/fe/src/api/task/mutations.js renamed to apps/fe/src/api/task/mutations.ts

@@ -5,7 +5,7 @@
  Delete this file and get started with your project!
  * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  */
-export function NxWelcome({ title }) {
+export function NxWelcome({ title }: { title: string }) {
   return (
     <>
       <style
@@ -816,4 +816,5 @@ export function NxWelcome({ title }) {
     </>
   );
 }
+
 export default NxWelcome;

apps/fe/src/api/task/queries.js renamed to apps/fe/src/api/task/queries.ts

@@ -4,6 +4,11 @@ import { CREATE_TASK } from '../api/task/mutations';
 import { GET_TASKS } from '../api/task/queries';
 import { TextField, Button, Stack } from '@mui/material';
 
+interface FormValues {
+  title?: string;
+  description?: string;
+}
+
 const AddTask = () => {
   const [createTask] = useMutation(CREATE_TASK);
 
@@ -12,7 +17,7 @@ const AddTask = () => {
       <Formik
         initialValues={{ title: '', description: '' }}
         validate={(values) => {
-          const errors = {};
+          const errors: FormValues = {};
           if (!values.title) {
             errors.title = 'Required';
           }

apps/fe/src/app/app.spec.js renamed to apps/fe/src/app/app.spec.tsx

@@ -3,11 +3,20 @@ import { GET_TASKS } from '../api/task/queries';
 import { DELETE_TASK } from '../api/task/mutations';
 import { Button } from '@mui/material';
 
+interface Task {
+  _id: number;
+  title: string;
+}
+
+type TaskType = {
+  getTasks: Task[];
+};
+
 const Tasks = () => {
-  const { loading, data } = useQuery(GET_TASKS);
+  const { loading, data } = useQuery<TaskType>(GET_TASKS);
   const [deleteTask] = useMutation(DELETE_TASK);
 
-  const handleDelete = async (taskId) => {
+  const handleDelete = async (taskId: number) => {
     await deleteTask({
       variables: {
         id: taskId,
@@ -19,6 +28,7 @@ const Tasks = () => {
   return (
     <>
       {!loading &&
+        data &&
         data['getTasks'].map((task, index) => (
           <div key={index}>
             {task.title}{' '}

apps/fe/src/app/app.js renamed to apps/fe/src/app/app.tsx

@@ -1,5 +1,6 @@
 // This file can be replaced during build by using the `fileReplacements` array.
 // When building for production, this file is replaced with `environment.prod.ts`.
+
 export const environment = {
   production: false,
 };

apps/fe/src/app/nx-welcome.js renamed to apps/fe/src/app/nx-welcome.tsx

@@ -2,11 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>Complicated Todo</title>
+    <title>Fe</title>
     <base href="/" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <!-- <link rel="icon" type="image/x-icon" href="favicon.ico" /> -->
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
     <link
       rel="stylesheet"
       href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"

apps/fe/src/components/add-task.js renamed to apps/fe/src/components/add-task.tsx

@@ -7,7 +7,7 @@ import App from './app/app';
 
 const client = new ApolloClient({
   cache: new InMemoryCache(),
-  uri: 'http://localhost:5000/graphql'
+  uri: 'http://localhost:5000/graphql',
 });
 
 ReactDOM.render(

apps/fe/src/components/tasks.js renamed to apps/fe/src/components/tasks.tsx

@@ -1,3 +1,4 @@
+/* You can add global styles to this file, and also import other style files */
 body {
   font-family: 'Roboto';
 }