implement variable validation with propType in Form.jsx

Author: khuongdn16

app/src/Dashboard/Form.jsx

@@ -1,50 +1,54 @@
 
 import React from 'react';
 import { gql, useMutation } from '@apollo/client';
+import PropTypes from 'prop-types';
 
 
+const Form = ({ description, id, likes }) => {
 
-const Form = (props) => {
-  // const TEST = gql`mutation UpdateTest {
-  //   updateTest (id:"6041a075cf29434bf8e4552e", name: "first entry with HEC", likes: 23) {
-  //     description
-  //     id
-  //     likes
-  //   }
-  // }`;
   const ADD_LIKE = gql`
   mutation UpdateTest($id: ID, $name: String, $likes: Int) {
     updateTest(id: $id, name: $name, likes: $likes ) 
-       {
-      	description
-      	id
-      	likes
+    {
+      description
+      id
+      likes
     }
-  }
-  `;
-  const [ updateTest, { data }] = useMutation(ADD_LIKE);
-  // console.log('mutation returned data >>> ', data);
+  }`;
+
+  const [updateTest] = useMutation(ADD_LIKE);
 
   // go to bed
   function handleClick(e) {
     e.preventDefault();
     // IMPORTANT: DO NOT ADD extra comma to the last line of the variable object, the query will not work
-    const myVar = { variables: {
-      id: props.id, 
-      name: "testname", 
-      likes: (props.likes + 1)
-       }
+    const myVar = {
+      variables:
+      {
+        id,
+        name: 'testname',
+        likes: likes + 1,
+      },
     };
+    // send Mutation
     updateTest(myVar);
   }
 
   return (
   <div className = 'form'>
-    <h2>{ props.description }</h2>
-    <button id={ props.id } onClick={ handleClick }>heart</button>
-    <h3>Likes: { props.likes }</h3>
+    <h2>{ description }</h2>
+    <button id={ id } onClick={ handleClick }>heart</button>
+    <h3>Likes: { likes }</h3>
   </div>
   );
 };
 
+// Variable validation using propTypes
+Form.propTypes = {
+  description: PropTypes.string.isRequired,
+  id: PropTypes.id.isRequired,
+  likes: PropTypes.number.isRequired,
+};
+
+
 export default Form;

app/src/Dashboard/FormsContainer.jsx

@@ -12,7 +12,7 @@ const FormsContainer = () => {
   // define the graphQL query string
   const GET_TESTS = gql`query {readAllTests { description id likes }}`;
   // useQuery hook abstracts fetch request
-  const { loading, error, data } = useQuery(GET_TESTS);
+  const { loading, error, data } = useQuery(GET_TESTS, { pollInterval: 1000	} );
   if (loading) return <p>Loading...</p>;
   if (error) return <p>Error :{error}</p>;
   // based on resolver(readAllTests) for this query, the data is stored in the data object with the key 'readAllTests'

app/src/components/top/NavBar.tsx

@@ -168,7 +168,7 @@ export default function NavBar(props) {
           </Typography>
 
           {/* ==================================Dashboard Button================================================== */}
-          <Link to='/dashboard'>
+          <Link to='/dashboard' style ={ {textDecoration: 'none'} }>
             <Button
               variant="contained"
               color="primary"