Merge pull request #144 from MinorityProgrammers/dashboard

Overview Dashboard

components/CreateProfile/CreateProfileForm1.js

@@ -182,10 +182,6 @@ const CreateProfileQuestions1 = function ({
                   ))
               }
             </div>
-            <div className="tw-mt-8 tw-flex tw-flex-col tw-w-80 tw-pl-4 tw-justify-center tw-text-center">
-              <h2>Connect Wallet</h2>
-              <Account />
-            </div>
           </div>
         </CreateProfileForm>
         <div className="cp-navButtonsContainer">

components/dashboard/Course.js

@@ -0,0 +1,116 @@
+import React, { useEffect, useState } from 'react';
+import Link from 'next/link';
+import axios from 'axios';
+
+const Course = ({ course, userData, token }) => {
+  const [userModules, setUserModules] = useState([]);
+  const [modules, setModules] = useState([]);
+  useEffect(() => {
+    if (course) {
+      axios
+        .get(`${process.env.BASE_URI}/course/${course.courseId._id}/module`, {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        })
+        .then((res) => {
+          setModules(res.data.data);
+        });
+      axios
+        .get(`${process.env.BASE_URI}/learn/${course.courseId._id}/moduleById/${userData._id}`)
+        .then((res) => {
+          const resModules = res.data.data;
+          setUserModules(resModules);
+        });
+    }
+  }, []);
+  const totalUserModules = userModules.filter(
+    (eModule) => modules.some((module) => eModule.moduleId._id === module._id),
+  );
+  const totalModulesLength = modules.length;
+
+  // user progress
+  let completionRate = 0;
+  totalUserModules.forEach((module) => {
+    completionRate += module.completionRate;
+  });
+  const userPercentages = Math.round(completionRate / totalModulesLength);
+  return (
+    <div
+      key={course?.createdAt}
+      className="overview-course-card d-flex flex-row justify-content-between"
+    >
+      {/* First and Second */}
+      <div className="d-flex flex-row" style={{ width: '40%' }}>
+        {/* First Column - logo */}
+        <div
+          className="overview-career-card-image d-flex justify-content-center align-items-center"
+          style={{ paddingRight: '10px', width: '30%' }}
+        >
+          <img alt="company's logo" src={course?.courseId.image} />
+        </div>
+        {/* Second Column - Title + Description */}
+        <div
+          className="overview-course-card-info d-flex flex-column"
+          style={{ width: '70%' }}
+        >
+          <p className="overview-course-card-info-title">
+            {course?.courseId?.name}
+          </p>
+          <p className="overview-course-card-description">
+            {course?.courseId?.description}
+          </p>
+        </div>
+      </div>
+      {/* Third Column */}
+      <div
+        className="d-flex flex-column justify-content-center"
+        style={{ width: '20%', marginRight: '2%' }}
+      >
+        <p
+          style={{
+            fontSize: '12px',
+            color: 'white',
+            textAlign: 'center',
+          }}
+        >
+          {userPercentages}
+          % Completed
+          {' '}
+        </p>
+        <div className="overview-wrapper">
+          <div className="overview-barContainer">
+            <div className="overview-filler" style={{ width: `${userPercentages}%` }} />
+          </div>
+        </div>
+      </div>
+      {/* Fourth and Fifth Column */}
+      <div className="d-flex flex-row overview-course-detail" style={{ width: '40%' }}>
+        {/* Fourth Column */}
+        <div
+          className="overview-course-currency d-flex justify-content-center flex-column align-items-center"
+          style={{ marginRight: '2%' }}
+        >
+          <p style={{ fontSize: '12px' }}>$MINORITY Earned</p>
+          <p style={{ fontSize: '16px', fontWeight: '700' }}>
+            $
+            {parseInt(course.completionRate, 10) !== 100
+              ? 0
+              : course?.courseId?.earn}
+          </p>
+        </div>
+
+        <Link href={`/courses/${course.courseId._id}`}>
+          <a
+            className="button-more view-course"
+          >
+            View Course
+          </a>
+        </Link>
+
+      </div>
+    </div>
+  );
+};
+
+export default Course;

components/dashboard/CourseCard.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import EmptyOverviewComponent from './EmptyOverviewComponent';
+import Course from './Course';
+
+const CourseCard = ({
+  userCourses, currentView, userData, token,
+}) => {
+//   const precentage = (id) => {
+//     const arr = userModules.filter((e) => (
+//       e.id === id
+//     ));
+//     console.log(arr.length > 0 ? arr[0].prg : 0);
+//     return arr.length > 0 ? arr[0].prg : 0;
+//   };
+  const courses = userCourses.filter((course) => course.categories.includes(currentView));
+  return (
+    <>
+      {courses.length > 0 ? (
+        <div className="overview-courses-cards d-flex flex-column">
+          {userCourses.map((course) => (
+            <Course userData={userData} course={course} token={token} key={course._id} />
+          ))}
+        </div>
+      ) : (
+        <EmptyOverviewComponent
+          imgURL="https://s3-alpha-sig.figma.com/img/4ee3/cff9/cf0ef958c8ee474d3c466885d8a7acb2?Expires=1639353600&Signature=TUwGQk6amGy9LVngHcQ9lpNszIIYYHcey9eFrtByZlXq4AYii34O9UV9gD6A12kkvefHyADputgq6M3rDcTSa693YyLBsATyREcjTHgqfSE3vIIzXCpyfxnfMQgt-TWTTyHYiGIO0V-6N0rj7Q0LcOK4Bou5G7gmGnbKSlQ1UGy19IXXOuSwtNaM2E1Yil-4DhsxCGDFN6shDvn6CiMzy~DPjAzOw2iLucONYSLAeHBvb4AkRf6T9f3UXtG3xhXG-RY69Yw2MP-NZFGgXYu0fivIn1CDxZf-PdnaSrvKjjg-vxylIHFfY1UviTIlhbj1WorWh~N1Y3d8SIPe~6FhNA__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
+          description={`You haven’t  enrolled for any courses in ${currentView} on MPA yet. You can enroll for one in the Courses Section. Remember, you earn $MINORITY tokens when you complete a course.`}
+          btnText="Enroll For Your First Course"
+        />
+      )}
+    </>
+  );
+};
+
+export default CourseCard;

components/dashboard/DonutChartComponent.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import 'chart.js/auto';
+import { Doughnut } from 'react-chartjs-2';
+
+const DonutChartComponent = ({ data, winSize }) => {
+  const options = {
+    responsive: true,
+    maintainAspectRatio: true,
+    cutout: winSize >= 1100 ? 35 : 50,
+    layout: {
+    //   padding: 5,
+    },
+    stroke: {
+      width: 5,
+    },
+    legend: {
+      labels: {
+        fontColor: 'white',
+      },
+    },
+
+    plugins: {
+      datalabels: { color: '#ffffff' },
+      legend: {
+        display: false,
+        position: 'right',
+        align: 'center',
+        labels: {
+          color: 'white',
+        },
+      },
+    },
+  };
+  return (
+    <div className="statistics-charts static-card tw-flex">
+      <div className="dashboard-static-chart tw-relative">
+        <Doughnut options={options} width="90%" height="90%" data={data} />
+        <div className="chart-static-text">
+          <p>
+            <span>
+              {data.centerText.value}
+            </span>
+            {data.centerText.text}
+
+          </p>
+
+        </div>
+      </div>
+      <div className="static-chart-detail">
+        <h2>
+          {data.title}
+        </h2>
+        <div className="labels">
+          {data.labels.map((t, i) => (
+            <div className="tag">
+              <div style={{ background: data.datasets[0].backgroundColor[i] }} />
+              <p>{t}</p>
+
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DonutChartComponent;

components/dashboard/EmptyOverviewComponent.js

@@ -1,7 +1,7 @@
 import React from 'react';
+import Link from 'next/link';
 
 const EmptyOverviewComponent = ({
-  btnFunction,
   btnText,
   imgURL,
   description,
@@ -21,14 +21,14 @@ const EmptyOverviewComponent = ({
     >
       {description}
     </p>
-    <button
-      type="button"
-      className="btn btn-primary"
-      style={{ background: '#151371', width: '80%', fontSize: '12px' }}
-      onClick={btnFunction}
-    >
-      {btnText}
-    </button>
+    <Link href="/learn">
+      <a
+        type="button"
+        className="button-more"
+      >
+        {btnText}
+      </a>
+    </Link>
   </div>
 );
 export default EmptyOverviewComponent;