Added Todo page.

Author: gsaini

codegen.yml

@@ -0,0 +1,18 @@
+schema: http://localhost:4000/graphql
+documents: null
+generates:
+  ./src/types/generatedTypes.ts:
+    plugins:
+      - typescript
+      - typescript-operations
+    config:
+      namingConvention: keep
+      skipTypename: true
+      nonOptionalTypename: false
+      maybeValue: T | null
+      avoidOptionals: 
+          field: true
+          inputValue: true
+          object: true
+
+require: ts-node/register

package-lock.json

@@ -14,16 +14,19 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "graphql": "^15.4.0",
+    "node-sass": "^4.14.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^4.0.1",
     "typescript": "^4.1.3"
   },
   "scripts": {
+    "prestart": "npm run generate",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
+    "generate": "graphql-codegen",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -42,6 +45,9 @@
     ]
   },
   "devDependencies": {
+    "@graphql-codegen/cli": "^1.20.0",
+    "@graphql-codegen/typescript": "^1.20.0",
+    "@graphql-codegen/typescript-operations": "^1.17.13",
     "@types/jest-axe": "^3.5.1",
     "@types/jest-image-snapshot": "^4.1.3",
     "@types/jsdom-screenshot": "^3.2.0",

package.json

@@ -1,22 +1,37 @@
 import React from 'react';
 import logo from './logo.svg';
+import {
+  Link
+} from "react-router-dom";
+import { Can } from './rules/Can';
+import { Article } from "./rules/entities";
 import './App.css';
+import { ExchangeRates } from './pages';
 
 function App() {
+  const article = new Article({ published: true });
+
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
-        <p className="paragraph-cls">Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque ex perferendis maxime voluptatem molestiae? Qui cupiditate asperiores ipsa nesciunt, iusto minima voluptatem alias sit porro sunt ad veritatis reiciendis? Deserunt.</p>
-        <a
+
+        <p>
+          Edit <code>src/App.tsx</code> and save to reload.
+        </p><a
           className="App-link"
           href="https://reactjs.org"
           target="_blank"
           rel="noopener noreferrer"
         >
           Learn React
         </a>
+        <Link to="/todos">Todos</Link>
+        <Can I="read" a={article}>
+          {() => <ExchangeRates />}
+        </Can>
       </header>
+
     </div>
   );
 }

src/App.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ToDo } from '../../types';
+
+type TodoItemProps = {
+    todo: ToDo;
+    onChange: (todo: Pick<ToDo, 'id' | 'completed'>) => void
+};
+
+export const TodoItem = ({ todo, onChange }: TodoItemProps): JSX.Element => {
+    const { id, title, completed } = todo;
+
+    return (
+        <>
+            <div className="Todo__item">
+                <label htmlFor={`${id}-checkbox`}>{title}</label>
+                <input
+                    id={`${id}-checkbox`}
+                    type="checkbox"
+                    checked={completed || false}
+                    onChange={() => onChange({ id, completed: !completed })}
+                />
+            </div>
+        </>);
+}

src/components/Books/gql.ts

@@ -0,0 +1 @@
+export * from "./TodoItem";