Use node 16 and legacy-peer-deps for build and deploy

Author: Redande

.github/workflows/main.yml

@@ -10,13 +10,13 @@ jobs:
     steps:
       - name: Checkout 🛎️
         uses: actions/[email protected]
-      - name: Use Node 14
+      - name: Use Node 16
         uses: actions/setup-node@v3
         with:
-          node-version: '14.x'
+          node-version: '16.x'
       - name: Install and Build
         run: |
-          npm ci
+          npm ci --legacy-peer-deps
           npm run build
       - name: Deploy 🚀
         uses: JamesIves/[email protected]

package-lock.json

@@ -4,6 +4,7 @@
     "node": "16.x"
   },
   "dependencies": {
+    "@apollo/client": "^3.7.15",
     "@fortawesome/fontawesome-free": "^6.2.1",
     "@fortawesome/fontawesome-svg-core": "^6.2.1",
     "@fortawesome/free-brands-svg-icons": "^6.2.1",

package.json

@@ -1,76 +1,76 @@
-// import React from "react"
-// import withSimpleErrorBoundary from "../../util/withSimpleErrorBoundary"
-// import CourseSettings from "../../../course-settings"
+import React from "react"
+import withSimpleErrorBoundary from "../../util/withSimpleErrorBoundary"
+import CourseSettings from "../../../course-settings"
 
-// import { useQuery } from "@apollo/client/react"
-// import { gql } from "apollo-boost"
-// import { Button } from "@material-ui/core"
-// import OverallPoints from "./OverallPoints"
+import { useQuery } from "@apollo/client"
+import { gql } from "apollo-boost"
+import { Button } from "@material-ui/core"
+import OverallPoints from "./OverallPoints"
 
-// const PROGRESS = gql`
-//   {
-//     currentUser {
-//       email
-//       progress(course_id: "59314cb4-a9ca-43c9-b9a7-58c19325b44c") {
-//         course {
-//           id
-//           name
-//         }
-//         user_course_progress {
-//           id
-//           progress
-//         }
-//         user_course_service_progresses {
-//           id
-//           progress
-//           service {
-//             id
-//             name
-//           }
-//         }
-//       }
-//     }
-//   }
-// `
+const PROGRESS = gql`
+  {
+    currentUser {
+      email
+      progress(course_id: "59314cb4-a9ca-43c9-b9a7-58c19325b44c") {
+        course {
+          id
+          name
+        }
+        user_course_progress {
+          id
+          progress
+        }
+        user_course_service_progresses {
+          id
+          progress
+          service {
+            id
+            name
+          }
+        }
+      }
+    }
+  }
+`
 
-// const Points = (props) => {
-//   const course = props.course || CourseSettings.default.slug
-//   const { data, loading, error, refetch } = useQuery(PROGRESS)
+const Points = (props) => {
+  const course = props.course || CourseSettings.default.slug
+  const { data, loading, error, refetch } = useQuery(PROGRESS)
 
-//   if (loading) {
-//     return <>Loading...</>
-//   }
+  if (loading) {
+    return <>Loading...</>
+  }
 
-//   if (error) {
-//     return <>Error while fetching progress: {error}</>
-//   }
+  if (error) {
+    return <>Error while fetching progress: {error}</>
+  }
 
-//   if (!data || !data.currentUser) {
-//     return (
-//       <>
-//         <Button
-//           onClick={() => {
-//             refetch()
-//           }}
-//         >
-//           Refresh
-//         </Button>
-//         <p>Please log in to see your points.</p>
-//       </>
-//     )
-//   }
+  if (!data || !data.currentUser) {
+    return (
+      <>
+        <Button
+          onClick={() => {
+            refetch()
+          }}
+        >
+          Refresh
+        </Button>
+        <p>Please log in to see your points.</p>
+      </>
+    )
+  }
 
-//   const points = data.currentUser.progress.user_course_progress.progress[0]
-//   const courseName = data.currentUser.progress.course.name
-//   return (
-//     <>
-//       <OverallPoints
-//         refetch={refetch}
-//         courseName={courseName}
-//         progress={data.currentUser.progress}
-//       />
-//     </>
-//   )
-// }
+  const points = data.currentUser.progress.user_course_progress.progress[0]
+  const courseName = data.currentUser.progress.course.name
+  return (
+    <>
+      <OverallPoints
+        refetch={refetch}
+        courseName={courseName}
+        progress={data.currentUser.progress}
+      />
+    </>
+  )
+}
 
-// export default withSimpleErrorBoundary(Points)
+export default withSimpleErrorBoundary(Points)