migrate React component to Typescript

Author: khuongdn16

app/src/Dashboard/Form.tsx

@@ -1,45 +1,25 @@
 import React from 'react';
-import { gql, useMutation } from '@apollo/client';
-import PropTypes from 'prop-types';
-
+import { useMutation } from '@apollo/client';
+import { ADD_LIKE, MAKE_COPY, DELETE_PROJECT } from './gqlStrings';
+
+// Variable validation using typescript
+type props = {
+  name: string,
+  id: string,
+  userId: string,
+  username: string,
+  likes: number,
+};
 
 const Project = ({
-  name, likes, id, userId, username,
-}) => {
+  name, likes, id, username,
+}: props) : JSX.Element => {
   // IMPORTANT:
   // 1) schema change projId => id to allows Apollo Client cache auto-update. Only works with 'id'
   // 2) always request the 'id' in a mutation request
 
-  const ADD_LIKE = gql`
-  mutation AddLike($projId: ID!, $likes: Int!) {
-    addLike(projId: $projId, likes: $likes) 
-    {
-      id
-      likes
-    }
-  }`;
-
   const [addLike] = useMutation(ADD_LIKE);
-
-
-  const MAKE_COPY = gql`
-  mutation MakeCopy ($userId: ID!, $projId: ID!, $username: String!) {
-    makeCopy(userId: $userId, projId: $projId, username: $username) 
-    {
-      id
-    }
-  }`;
-
   const [makeCopy] = useMutation(MAKE_COPY);
-
-  const DELETE_PROJECT = gql`
-  mutation DeleteProject($projId: ID!) {
-    deleteProject(projId: $projId) 
-    {
-      id
-    }
-  }`;
-
   const [deleteProject] = useMutation(DELETE_PROJECT);
 
   function handleLike(e) {
@@ -59,9 +39,7 @@ const Project = ({
   // Use current user info to make a make copy of another user's project
   const currUserSSID = window.localStorage.getItem('ssid') || 'unavailable';
   const currUsername = window.localStorage.getItem('username') || 'unavailable';
-  // if (userSSID !== 'guest') {
-  //   myVar = { userId: userSSID };
-  // }
+ 
 
   function handleDownload(e) {
     e.preventDefault();
@@ -91,26 +69,16 @@ const Project = ({
   return (
   <div className = 'project'>
     <h2>Project: { name }</h2>
-    {/* <h3>Project ID: {projId} </h3> */}
     <h3>Author: { username }</h3>
     <h3>Likes: { likes }</h3>
     <div>
       <button onClick={ handleLike }>like me!</button>
-      <button onClick={ handleDownload }>download me!</button>
+      {currUsername !== username ?  <button onClick={ handleDownload }>download me!</button> : <span></span>}
       <button onClick={ handleDelete }>delete</button>
     </div>
   </div>
   );
 };
 
-// Variable validation using propTypes
-Project.propTypes = {
-  name: PropTypes.string.isRequired,
-  id: PropTypes.string.isRequired,
-  userId: PropTypes.string.isRequired,
-  username: PropTypes.string.isRequired,
-  likes: PropTypes.number.isRequired,
-};
-
 
 export default Project;

app/src/Dashboard/FormsContainer.tsx

@@ -1,24 +1,14 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-
-import { gql, useQuery } from '@apollo/client';
-
+import { useQuery } from '@apollo/client';
+import { GET_PROJECTS } from './gqlStrings';
 import Project from './Project.tsx';
+
 // Implement Apollo Client useQuery hook to retrieve data from the server through graphQL. This includes 2 steps:
 // 1) Impliment Apollo Provider in the top component in ./src/index.js, this allows children components access to the queried data
 // 2) useQuery hook will update the data stored in Apollo Client's cache and automatically trigger child components rendering
 
 const ProjectContainer = () => {
-  // define the graphQL query string
-  const GET_PROJECTS = gql`query GetAllProjects($userId: ID) {
-    getAllProjects(userId: $userId) { 
-      name 
-      likes 
-      id
-      userId
-      username 
-    }
-  }`;
 
   let myVar = {};
   // Need this for the individual user dasboard, for now, dashboard shows all projects from all users
@@ -29,33 +19,44 @@ const ProjectContainer = () => {
   // }
 
   // useQuery hook abstracts fetch request
-  const { loading, error, data } = useQuery(GET_PROJECTS, { pollInterval: 2000, variables: myVar } ); // Need to find where the userId is stored for the logged in user.
+  const { loading, error, data } = useQuery(GET_PROJECTS, { pollInterval: 2000, variables: myVar }); // Need to find where the userId is stored for the logged in user.
   if (loading) return <p>Loading...</p>;
   if (error) return <p>Error :{error}</p>;
   // based on resolver(getAllProject) for this query, the data is stored in the data object with the key 'getAllProjects'
-  const myProjs = data.getAllProjects;
-  console.log('Projects >>> ', myProjs);
+  const projects = data.getAllProjects;
+  console.log('Projects >>> ', projects);
   // generate an array of Project components based on data
-  const projects = myProjs.map((proj, index) => <Project 
-    key= { index }
-    name = {proj.name}
-    likes = {proj.likes}
-    userId = {proj.userId}
-    username = {proj.username}
-    id = {proj.id}
-    />);
+  const publicProjects = [];
+  const userProjects = []; 
+  projects.forEach((proj, index) => {
+    const component = <Project
+                  key= { index }
+                  name = {proj.name}
+                  likes = {proj.likes}
+                  userId = {proj.userId}
+                  username = {proj.username}
+                  id = {proj.id}
+                />;
+    if (username === proj.username) userProjects.push(component);
+    else publicProjects.push(component);
+  });
 
   return (
       <div>
-        <h1> Public Dashboard </h1>
         <Link to="/">
           <button type="button">Go Back</button>
         </Link>
+        <h1> Public Dashboard </h1>
         <div className = "projectContainer">
-          {projects}
+            {publicProjects}
+        </div>
+        <hr></hr>
+        <h1> User Dashboard </h1>
+        <div className = "projectContainer">
+            {userProjects}
+        </div>
+
         </div>
-      </div>
   );
 };
-
 export default ProjectContainer;

app/src/Dashboard/Project.tsx

@@ -1,20 +1,40 @@
 import { gql } from '@apollo/client';
 
-export const {
-  ADD_LIKE: gql`mutation AddLike($projId: ID!, $likes: Int!) {
+
+// Query
+export const GET_PROJECTS = gql`query GetAllProjects($userId: ID) {
+  getAllProjects(userId: $userId) { 
+    name 
+    likes 
+    id
+    userId
+    username 
+  }
+}`;
+
+
+// Mutation
+export const ADD_LIKE = gql`
+  mutation AddLike($projId: ID!, $likes: Int!) {
     addLike(projId: $projId, likes: $likes) 
     {
       id
       likes
     }
-  }`,
-  
-  MAKE_COPY: gql`
+  }`;
+
+export const  MAKE_COPY = gql`
   mutation MakeCopy ($userId: ID!, $projId: ID!, $username: String!) {
     makeCopy(userId: $userId, projId: $projId, username: $username) 
     {
       id
     }
   }`;
 
-}
+export const DELETE_PROJECT = gql`
+  mutation DeleteProject($projId: ID!) {
+    deleteProject(projId: $projId) 
+    {
+      id
+    }
+  }`;

app/src/Dashboard/ProjectContainer.tsx

@@ -104,7 +104,7 @@ const Project = {
     const filter = { _id: projId };
     const options = { strict: true };
     const resp = await Projects.findOneAndDelete(filter, options);
-    console.log("resp", resp);
+    // console.log("resp", resp);
     if (resp) {
       return ({
         name: resp.name,

app/src/Dashboard/gqlStrings.ts

@@ -66,7 +66,8 @@ const projectSchema = new Schema({
   },
   username: {type: String, required: true }, 
   createdAt: { type: Date, default: Date.now }
-}, { minimize: false });
+}, { minimize: false }
+);
 // option 'minimize' prevent Mongoose from removing empty 'style' value in the copy
 
 // Test schema for implementing GraphQL