finish homepage, added docs

Author: nellysegi

README.md

@@ -19,6 +19,17 @@
 ![GitHubActions](https://img.shields.io/badge/GitHub_Actions-2088FF?style=for-the-badge&logo=github-actions&logoColor=white)
 ![Jest](https://img.shields.io/badge/-jest-C21325?style=for-the-badge&logo=jest&logoColor=white)
 ![Canva](https://img.shields.io/badge/Canva-%2300C4CC.svg?&style=for-the-badge&logo=Canva&logoColor=white)
+![Jira](https://img.shields.io/badge/Jira-0052CC?style=for-the-badge&logo=Jira&logoColor=white)
+![Zoom](https://img.shields.io/badge/Zoom-2D8CFF?style=for-the-badge&logo=zoom&logoColor=white)
+![VSCode](https://img.shields.io/badge/VSCode-0078D4?style=for-the-badge&logo=visual%20studio%20code&logoColor=white)
+![JSON](https://img.shields.io/badge/json-5E5C5C?style=for-the-badge&logo=json&logoColor=white)
+![Prettier](https://img.shields.io/badge/prettier-1A2C34?style=for-the-badge&logo=prettier&logoColor=F7BA3E)
+![MacOS](https://img.shields.io/badge/mac%20os-000000?style=for-the-badge&logo=apple&logoColor=white)
+![Windows11](https://img.shields.io/badge/Windows_11-0078d4?style=for-the-badge&logo=windows-11&logoColor=white)
+![LinkedIn](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)
+![StackOverflow](https://img.shields.io/badge/Stack_Overflow-FE7A16?style=for-the-badge&logo=stack-overflow&logoColor=white)
+![Powershell](https://img.shields.io/badge/powershell-5391FE?style=for-the-badge&logo=powershell&logoColor=white)
+![Fiverr](https://img.shields.io/badge/fiverr-1DBF73?style=for-the-badge&logo=fiverr&logoColor=white)
 
 </div>
 
@@ -157,6 +168,7 @@ Here’s a list of features being considered by our team:
 - Enhanced security through change password and email functionality/profile page
 - A dark mode and light mode feature to reduce eye strain.
 - A completed forgot password and remember me functionality. /additional customizations via a settings page
+- Fix CLS gauge so that the marker is at the correct position.
 
 ## Contributors
 

nextlevelpackage/cli.js

@@ -5,8 +5,7 @@ const { sendToApi } = require('./sendToApi');
 const { spawn } = require('child_process');
 
 const bundleBuildAnalyzer = () => {
-  // const buildURL = `http://localhost:3000/dashboard/api/build`;
-  // const bundleURL = `http://localhost:3000/dashboard/api/bundle`;
+
   const buildURL = `https://www.nextlevel-dash.com/dashboard/api/build`;
   const bundleURL = `https://www.nextlevel-dash.com/dashboard/api/bundle`;
 
@@ -45,32 +44,4 @@ const bundleBuildAnalyzer = () => {
   });
 }
 
-bundleBuildAnalyzer();
-
-// const { exec } = require('child_process');
-// // function that will run next build and collect data, sending to api
-// const bundleBuildAnalyzer = () => {
-//   const buildURL = `http://localhost:3000/dashboard/api/build`;
-//   const bundleURL = `http://localhost:3000/dashboard/api/bundle`;
-
-//   // use exec to run next build and get next bundle analyzer terminal output
-//   const command = 'ANALYZE=true next build';
-//   const startTime = Date.now(); // start time before execution
-//   exec(command, (error, stdout) => {
-//     if (error) {
-//       console.error(`error in exec: ${error}`);
-//       return;
-//     }
-//     // compute and send the build time to build time endpoint
-//     const endTime = Date.now(); // end time after execution has finished
-//     const buildTime = endTime - startTime;
-//     console.log('Build time:', buildTime);
-//     sendToApi({buildTime}, buildURL);
-
-//     //bundle analyzer data is console logged in stdout
-//     const bundleLog = stdout;
-//     sendToApi({bundleLog}, bundleURL);
-//   });
-// }
-
-// bundleBuildAnalyzer();
+bundleBuildAnalyzer();

nextlevelpackage/index.js

@@ -19,10 +19,6 @@ export default function NextWebVitals() {
     const body = JSON.stringify(data);
     const url = 'https://www.nextlevel-dash.com/dashboard/api/webvitals';
 
-    
-    // if(navigator.sendBeacon) {
-    //   navigator.sendBeacon(url, body);
-    // } else {
       fetch(url, {
         method: 'POST',
         headers: {
@@ -39,6 +35,5 @@ export default function NextWebVitals() {
       }).catch((error) => {
         console.error('index.js .catch error Error sending web vitals data:', error);
       })
-    // }
   })
 }

nextlevelpackage/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextlevelpackage",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "this package will connect you to the nextlevel dashboard",
   "main": "index.js",
   "scripts": {

nextlevelpackage/sendToApi.js

@@ -1,6 +1,3 @@
-//const fetch = require('node-fetch');
-//this is for importing commonjs, we need to do es6
-// got this line from https://stackoverflow.com/questions/69041454/error-require-of-es-modules-is-not-supported-when-importing-node-fetch
 const fetch = (...args) => import('node-fetch').then(({default: fetch}) => fetch(...args));
 require('dotenv').config({ path: '.env.local' });
 
@@ -28,40 +25,4 @@ const sendToApi = (data, url) => {
     });
   }
 
-module.exports = { sendToApi };
-
-// TRY THIS LATER!!!
-// import fetch from 'node-fetch';
-// import dotenv from 'dotenv';
-// dotenv.config({ path: '.env.local' });
-
-
-// creating a sendToApi function that will send data to different endpoints
-// endpoint for bundle analyzer data, endpoint for build time data
-// const sendToApi = async (data, url) => {
-//     // check if api key is in the environment variables
-//     if (!process.env.NEXT_PUBLIC_API_KEY) {
-//       console.log('API key not found in environment variables');
-//       return;
-//     } 
-//     const apiKey = process.env.NEXT_PUBLIC_API_KEY;
-//     const body = JSON.stringify(data);
-//     try {
-//       const response = await fetch(url, {
-//         method: 'POST',
-//         body,
-//         headers: {
-//           'Content-Type': 'application/json',
-//           'API-Key': apiKey
-//         },
-//         keepalive: true
-//       });
-//       if (!response.ok) {
-//         throw new Error(`HTTP error, status: ${response.status}`);
-//       }
-//     } catch (err) {
-//       console.log('Error sending data to server:', err);
-//     };
-//   }
-
-// module.exports = { sendToApi };
+module.exports = { sendToApi };

public/NEXTLEVELANI.mp4

@@ -24,6 +24,7 @@ function TopNav() {
         </div>
         <div className={styles.links}>
           <Link href="/">Home</Link>
+          <Link href="https://github.com/oslabs-beta/NextLevel" target="_blank" rel="noopener noreferrer">Docs</Link>
           {status === 'authenticated' ? (
             <>
               <Link href={`/dashboard?username=${session?.user?.email}`}>Dashboard</Link>

public/NextLevelGifHomepage.gif

@@ -4,7 +4,7 @@ import useBundleData from '../hooks/useBundleData';
 import { set } from 'mongoose';
 
 
-function BuildTimeMetrics({username}) {
+function BundleLog({username}) {
   console.log('entering build time metrics for username:', username);
 
   const [bundleLogs, setBundleLogs] = useState([]);
@@ -35,9 +35,9 @@ function BuildTimeMetrics({username}) {
   useEffect(() => {
     const logsLength = bundleLogs.length;
     setCurrentIndex(logsLength - 1);
-    console.log('Current Index:', currentIndex);
+    // console.log('Current Index:', currentIndex);
     setCurrentLog(bundleLogs[currentIndex]);
-    console.log('Current Log:', currentLog);
+    // console.log('Current Log:', currentLog);
   }, [bundleLogs]);
 
   const toggleBack = () => {
@@ -83,4 +83,4 @@ function BuildTimeMetrics({username}) {
   );
 }
 
-export default BuildTimeMetrics;
+export default BundleLog;

public/TransparentGifLogo.gif

@@ -16,7 +16,7 @@ import {
 } from 'chart.js';
 import 'chartjs-adapter-date-fns';
 import useWebVitalsData from '../hooks/useWebVitalsData';
-import WebVitalsFilter from './webvitalsfilter';
+import WebVitalsFilter from './WebVitalsFilter';
 
 ChartJS.register(
   CategoryScale,

public/transparent gif v2 (1).gif

@@ -73,7 +73,6 @@ const WebVitalRatings = ({ data }) => {
                     poorRange={[ranges[metric][2],ranges[metric][3]]}
                     currentValue={val}
                     metricType={metric}
-                    // className={styles.ratingGauge}
                 />
             );
         });

src/app/about/page.js

@@ -2,35 +2,11 @@
 
 import React, { useEffect, useState, useRef } from 'react';
 import styles from '../dashboard.module.css';
-// import { Line } from 'react-chartjs-2';
-// import {
-//   Chart as ChartJS,
-//   CategoryScale,
-//   LinearScale,
-//   PointElement,
-//   LineElement,
-//   Title,
-//   Tooltip,
-//   Legend,
-//   TimeScale
-// } from 'chart.js';
-// import 'chartjs-adapter-date-fns';
 import useWebVitalsData from '../hooks/useWebVitalsData';
-import WebVitalsFilter from './webvitalsfilter';
+import WebVitalsFilter from './WebVitalsFilter';
 import CLSChart from './CLSChart';
 import WebVitalRatings from './WebVitalRatings';
-import WebVitalsChart from './webvitalschart';
-
-// ChartJS.register(
-//   CategoryScale,
-//   LinearScale,
-//   PointElement,
-//   LineElement,
-//   Title,
-//   Tooltip,
-//   Legend,
-//   TimeScale
-// );
+import WebVitalsChart from './WebVitalsChart';
 
 function WebVitalsContainer({ username}) {
   const [webVitalsData, setWebVitalsData] = useState([]);
@@ -43,8 +19,8 @@ function WebVitalsContainer({ username}) {
   const oneDayAgo = new Date(now.getTime() - (24 * 60 * 60 * 1000));
   const defaultStart = oneDayAgo.toISOString().slice(0, 16); // format to 'YYYY-MM-DDTHH:MM'
 
-  const [startDate, setStartDate] = useState(defaultStart); // July 18, 2024, at 14:35:50 '2024-07-18T14:35:50'
-  const [endDate, setEndDate] = useState(defaultEnd); // July 19, 2024, at 11:45:00 '2024-07-19T12:45:00'
+  const [startDate, setStartDate] = useState(defaultStart);
+  const [endDate, setEndDate] = useState(defaultEnd);
 
   const onSubmit = (startDate, endDate) => {
     setStartDate(startDate);

src/app/components/topnav.js

@@ -1,15 +1,15 @@
 import React from 'react';
 import styles from '../dashboard.module.css';
-import BuildTimeChart from './buildtimechart';
-import BuildTimeMetrics from './buildtimemetrics';
+import BuildTimeChart from './BuildTimeChart';
+import BundleLog from './BundleLog';
 
 function BuildTimeContainer({ username }) {
   return (
     <div className={styles.chartContainer}>
       <h2 className={styles.chartTitle}>Build Time</h2>
       <div className={styles.buildCharts}>
         <BuildTimeChart className={styles.buildTimeDiv} username={username}/>
-        <BuildTimeMetrics username={username}/>
+        <BundleLog username={username}/>
       </div>
     </div>
   );

src/app/dashboard/components/buildtimemetrics.js renamed to src/app/dashboard/components/BundleLog.js

@@ -3,9 +3,9 @@ import { IoSettingsOutline } from "react-icons/io5";
 import Link from 'next/link';
 
 function SideBar(props) {
-  console.log('Props sidebar:', props);
+  // console.log('Props sidebar:', props);
   const username = props.username;
-  console.log('Username sidebar:', username);
+  // console.log('Username sidebar:', username);
   return (
     <div className={styles.sidebar}>
       <div className={styles.sidebarTop}>

src/app/dashboard/components/CLSChart.js

@@ -116,9 +116,6 @@ function WebVitalsChart({ webVitalsData }) {
           display: true,
           text: 'Date/Time',
         },
-        // ticks: {
-        //   source: 'data', // Ensures only data points are used for ticks
-        // },
       },
       y: {
         title: {

src/app/dashboard/components/WebVitalRatings.js

@@ -3,14 +3,14 @@
 import React, { useEffect, useState } from 'react';
 
 const useBuildTimeData = async (username) => {
-  console.log('entering use effect useBuildTimeData for:', username);
+  // console.log('entering use effect useBuildTimeData for:', username);
   try {
     // const res = await fetch(`https://nextlevel-dash.com/dashboard/api/build?username=${username}`);
     const res = await fetch(`http://localhost:3000/dashboard/api/build?username=${username}`);
     if (res.ok) {
-      console.log('Res from useBuildTimeData:', res);
+      // console.log('Res from useBuildTimeData:', res);
       const data = await res.json();
-      console.log('Data from useBuildTimeData:', data);
+      // console.log('Data from useBuildTimeData:', data);
       return data;
     } else {
       console.error('Response not ok');

src/app/dashboard/components/WebVitalsContainer.js

@@ -3,14 +3,14 @@
 import React, { useEffect, useState } from 'react';
 
 const useBundleData = async (username) => {
-  console.log('entering use effect usebundledata for:', username);
+  // console.log('entering use effect usebundledata for:', username);
   try {
     // const res = await fetch(`https://nextlevel-dash.com/dashboard/api/bundle?username=${username}`);
     const res = await fetch(`http://localhost:3000/dashboard/api/bundle?username=${username}`);
     if (res.ok) {
-      console.log('res from useBundleData:', res);
+      // console.log('res from useBundleData:', res);
       const data = await res.json();
-      console.log('Data from useBundleData:', data);
+      // console.log('Data from useBundleData:', data);
       return data;
     } else {
       console.error('Response not ok');

src/app/dashboard/components/buildtimecontainer.js

@@ -5,9 +5,9 @@ async function fetchWebVitals (username, metricType, startDate, endDate) {
     // const res = await fetch(`https://nextlevel-dash.com/dashboard/api/webvitals?username=${username}&metricType=${metricType}`);
     const res = await fetch(`http://localhost:3000/dashboard/api/webvitals?username=${username}&metricType=${metricType}&start=${startDate}&end=${endDate}`);
       if (res.ok) {
-        console.log('Res from useWebVitalsData:', res);
+        // console.log('Res from useWebVitalsData:', res);
         const resData = await res.json();
-        console.log('Data from useWebVitalsData:', resData);
+        // console.log('Data from useWebVitalsData:', resData);
         return resData;  //array of obj with all metric types
       } else {
         console.error('Response not ok');
@@ -20,11 +20,11 @@ async function fetchWebVitals (username, metricType, startDate, endDate) {
 }
 
 const useWebVitalsData = async (username, startDate, endDate) => {
-  console.log('entering use effect useWebVitalsData for:', username);
+  // console.log('entering use effect useWebVitalsData for:', username);
   const metricTypes = ['FCP', 'LCP', 'TTFB', 'FID', 'INP', 'CLS'];
   try {
     const metricsCombined = await Promise.all(metricTypes.map(metricType => fetchWebVitals(username, metricType, startDate, endDate)));
-    console.log('Metrics Combined:', metricsCombined.flat());
+    // console.log('Metrics Combined:', metricsCombined.flat());
     return metricsCombined.flat(); // Flatten the array of arrays into a single array
   } catch (error) {
     console.error('Error in useWebVitals:', error);

src/app/dashboard/components/sidebar.js

@@ -4,14 +4,14 @@ import React, { useEffect, useState } from 'react';
 import styles from './dashboard.module.css';
 import WebVitalsContainer from './components/WebVitalsContainer';
 import APIKey from './components/APIkey';
-import BuildTimeContainer from './components/buildtimecontainer';
+import BuildTimeContainer from './components/BuildTimeContainer';
 import withAuth from '../components/withAuth';
-import SideBar from './components/sidebar';
+import SideBar from './components/Sidebar';
 
 function Dashboard(props) {
-  console.log('Props:', props);
+  // console.log('Props:', props);
   const username = props.searchParams.username;
-  console.log('Username:', username);
+  // console.log('Username:', username);
 
   return (
     <div className={styles.dashboardContainer}>

src/app/dashboard/components/webvitalschart.js

@@ -1,3 +1,5 @@
+//not currently in use
+
 import React from 'react'
 
 const Settings = () => {

src/app/dashboard/hooks/useBuildTimeData.js

@@ -4,7 +4,7 @@ body, html {
   padding: 0;
   font-family: 'Poppins', sans-serif;
   height: 100%;
-  background-color: hsl(240, 7%, 8%);
+  background-color: #1b212c;
   /* display: flex;
   justify-content: center;
   align-items: center; */