linting with prettier

y-pankaj · May 8, 2021 · ede738c · ede738c
1 parent de5a2fb
commit ede738c
Show file tree

Hide file tree

Showing 13 changed files with 213 additions and 138 deletions.
diff --git a/components/calendar-date.js b/components/calendar-date.js
@@ -1,12 +1,17 @@
 export default function CalendarDate(props) {
   return (
-    <div className={`table-cell h-32 w-32 rounded-md border-4
-                      ${props.date===null? 'bg-yellow-200':
-                          props.date===props.today? 'bg-yellow-600': 'bg-yellow-400'} 
-                      `}>
-      <h1>
-        {props.date}
-      </h1>
+    <div
+      className={`table-cell h-32 w-32 rounded-md border-4
+                      ${
+                        props.date === null
+                          ? "bg-yellow-200"
+                          : props.date === props.today
+                          ? "bg-yellow-600"
+                          : "bg-yellow-400"
+                      } 
+                      `}
+    >
+      <h1>{props.date}</h1>
     </div>
-  )
-}
+  );
+}
diff --git a/components/calendar.js b/components/calendar.js
@@ -1,44 +1,46 @@
-import CalendarDate from './calendar-date'
+import CalendarDate from "./calendar-date";
 
 export default function Calendar(props) {
-
-  var date = new Date(2000, 3 );
+  var date = new Date(2000, 3);
   console.log(date);
   var todayDate = date.getDate();
   console.log(date.getFullYear());
   var year = date.getFullYear();
   var month = date.getMonth();
   var firstDay = new Date(date.getFullYear(), date.getMonth(), 1).getDay();
-  firstDay = (firstDay===0) ? 7 : firstDay
+  firstDay = firstDay === 0 ? 7 : firstDay;
   // console.log(firstDay.getDay());
   console.log(firstDay);
   // month variable is 1 indexed
-  function daysInMonth (month, year) {
+  function daysInMonth(month, year) {
     return new Date(year, month, 0).getDate();
   }
 
-  console.log(daysInMonth(month+1, year))
-  function getDateForCalendar (blockNum) {
-    if ( blockNum < firstDay || blockNum > daysInMonth(month+1, year) + firstDay - 1) {
-      return null
+  console.log(daysInMonth(month + 1, year));
+  function getDateForCalendar(blockNum) {
+    if (
+      blockNum < firstDay ||
+      blockNum > daysInMonth(month + 1, year) + firstDay - 1
+    ) {
+      return null;
     }
     return blockNum - firstDay + 1;
   }
-  var calendar = []
-  var totalDivsInCalendar = firstDay - 1 + daysInMonth(month+1, year);
-  totalDivsInCalendar = Math.floor((totalDivsInCalendar + 6)/7);
-  for(var i = 0; i < totalDivsInCalendar; i++){
-    var calendarRow = []
-    for(var j = 0; j < 7; j ++) {
-      calendarRow.push(<CalendarDate date={getDateForCalendar( 7*i + j + 1)}
-                          today={todayDate}/>)
+  var calendar = [];
+  var totalDivsInCalendar = firstDay - 1 + daysInMonth(month + 1, year);
+  totalDivsInCalendar = Math.floor((totalDivsInCalendar + 6) / 7);
+  for (var i = 0; i < totalDivsInCalendar; i++) {
+    var calendarRow = [];
+    for (var j = 0; j < 7; j++) {
+      calendarRow.push(
+        <CalendarDate
+          date={getDateForCalendar(7 * i + j + 1)}
+          today={todayDate}
+        />
+      );
     }
-    calendar.push(<div className="table-row">{calendarRow}</div>)
+    calendar.push(<div className="table-row">{calendarRow}</div>);
   }
 
-  return (
-    <div>
-      {calendar}
-    </div>
-  )
-}
+  return <div>{calendar}</div>;
+}
diff --git a/components/date-tasks.js b/components/date-tasks.js
@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function DateTasks() {
+  return (
+    <div className="w-96 h-96 m-auto bg-gray-500">
+      <span>Task go here</span>
+    </div>
+  );
+}
diff --git a/components/navbar.js b/components/navbar.js
@@ -1,79 +1,145 @@
-import { signIn, signOut, useSession } from 'next-auth/client'
+import { signIn, signOut, useSession } from "next-auth/client";
 
 export default function Navbar() {
-
   const [session, loading] = useSession();
 
   function hideNavbar() {
-    const mobileMenu = document.querySelector('.mobile-menu')
-    mobileMenu.classList.toggle('hidden');
-    const mobileMenuOpen = document.querySelector('.mobile-menu-open')
-    const mobileMenuClose = document.querySelector('.mobile-menu-close')
-    mobileMenuClose.classList.toggle('hidden');
-    mobileMenuOpen.classList.toggle('hidden');
+    const mobileMenu = document.querySelector(".mobile-menu");
+    mobileMenu.classList.toggle("hidden");
+    const mobileMenuOpen = document.querySelector(".mobile-menu-open");
+    const mobileMenuClose = document.querySelector(".mobile-menu-close");
+    mobileMenuClose.classList.toggle("hidden");
+    mobileMenuOpen.classList.toggle("hidden");
   }
 
   return (
     <nav className="bg-gray-100">
       <div className="px-8 mx-auto max-w-7xl">
         <div className="flex justify-between">
           <div className="flex items-center space-x-4">
-            <div >
-              <a href="#" className="flex items-center px-2 py-5 text-gray-700 hover:text-gray-900">
-                <svg class="w-6 h-6 mr-2 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7"></path></svg>
+            <div>
+              <a
+                href="#"
+                className="flex items-center px-2 py-5 text-gray-700 hover:text-gray-900"
+              >
+                <svg
+                  class="w-6 h-6 mr-2 text-blue-400"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M13 5l7 7-7 7M5 5l7 7-7 7"
+                  ></path>
+                </svg>
                 <span className="font-bold">KeepYourStreak</span>
               </a>
             </div>
 
             {/* secondary navbar */}
             <div className="hidden md:flex items-center space-x-3">
-              <a href="#" className="px-2 py-5 text-gray-700 hover:text-gray-900">Todo</a>
-              <a href="#" className="px-2 py-5 text-gray-700 hover:text-gray-900">Calendar</a>
+              <a
+                href="#"
+                className="px-2 py-5 text-gray-700 hover:text-gray-900"
+              >
+                Todo
+              </a>
+              <a
+                href="#"
+                className="px-2 py-5 text-gray-700 hover:text-gray-900"
+              >
+                Calendar
+              </a>
             </div>
-
           </div>
 
           {!loading && !session && (
             <>
               <div className="hidden md:flex items-center space-x-1">
-                <a href="#" onClick={() => signIn('google')} className="px-2 py-5 text-gray-700 hover:text-gray-900">Log In</a>
-                <a href="#" onClick={() => signIn('google')} className="px-2 py-3 text-gray-700 hover:text-gray-900
-                                        text-yellow-900 hover:text-yellow:700
-                                        bg-yellow-400 hover:bg-yellow-300 rounded
-                                        transition duration-300">Sign up</a>
+                <a
+                  href="#"
+                  onClick={() => signIn("google")}
+                  className="px-2 py-5 text-gray-700 hover:text-gray-900"
+                >
+                  Log In
+                </a>
+                <a
+                  href="#"
+                  onClick={() => signIn("google")}
+                  className="px-2 py-3 text-gray-700 hover:text-gray-900
+                              text-yellow-900 hover:text-yellow:700
+                              bg-yellow-400 hover:bg-yellow-300 rounded
+                              transition duration-300"
+                >
+                  Sign up
+                </a>
               </div>
             </>
           )}
 
           {!loading && session && (
             <>
               <div className="hidden md:flex items-center space-x-1">
-                <a href="#" onClick={() => signOut()} className="px-2 py-5 text-gray-700 hover:text-gray-900">Log Out</a>
+                <a
+                  href="#"
+                  onClick={() => signOut()}
+                  className="px-2 py-5 text-gray-700 hover:text-gray-900"
+                >
+                  Log Out
+                </a>
               </div>
             </>
           )}
 
-
-
-
           {/* mobile button */}
           <div className="md:hidden flex items-center">
             <button className="mobile-menu-button" onClick={hideNavbar}>
-              <svg class="w-6 h-6 mobile-menu-open" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 hidden mobile-menu-close" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              <svg
+                class="w-6 h-6 mobile-menu-open"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M4 6h16M4 12h16M4 18h16"
+                ></path>
+              </svg>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-6 w-6 hidden mobile-menu-close"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M6 18L18 6M6 6l12 12"
+                />
               </svg>
             </button>
           </div>
         </div>
-        
+
         {/* mobile menu */}
         <div className="mobile-menu hidden md:hidden">
-          <a href="#" className="block py-2 px-2">Todo</a>
-          <a href="#" className="block py-2 px-2">Calendar</a>
+          <a href="#" className="block py-2 px-2">
+            Todo
+          </a>
+          <a href="#" className="block py-2 px-2">
+            Calendar
+          </a>
         </div>
-
       </div>
     </nav>
-  )
+  );
 }
diff --git a/middleware/database.js b/middleware/database.js
@@ -1,9 +1,9 @@
-import { MongoClient } from 'mongodb';
-import nextConnect from 'next-connect';
+import { MongoClient } from "mongodb";
+import nextConnect from "next-connect";
 
-import dotenv from 'dotenv'
-dotenv.config()
-const client = new MongoClient( process.env.MONGODB_URI , {
+import dotenv from "dotenv";
+dotenv.config();
+const client = new MongoClient(process.env.MONGODB_URI, {
   useNewUrlParser: true,
   useUnifiedTopology: true,
 });
@@ -15,4 +15,4 @@ async function database(req, res, next) {
 }
 const middleware = nextConnect();
 middleware.use(database);
-export default middleware;
+export default middleware;
diff --git a/pages/_app.js b/pages/_app.js
@@ -1,14 +1,14 @@
-import { Provider } from 'next-auth/client'
-import '../styles/globals.css'
-import Navbar from '../components/navbar'
+import { Provider } from "next-auth/client";
+import "../styles/globals.css";
+import Navbar from "../components/navbar";
 
 function MyApp({ Component, pageProps }) {
   return (
     <Provider session={pageProps.session}>
-      <Navbar/>
+      <Navbar />
       <Component {...pageProps} />
     </Provider>
-  )
+  );
 }
 
-export default MyApp
+export default MyApp;
diff --git a/pages/api/auth/[...nextauth].js b/pages/api/auth/[...nextauth].js
@@ -1,18 +1,18 @@
-import NextAuth from 'next-auth'
-import Providers from 'next-auth/providers'
-import dotenv from 'dotenv'
-dotenv.config()
+import NextAuth from "next-auth";
+import Providers from "next-auth/providers";
+import dotenv from "dotenv";
+dotenv.config();
 
 export default NextAuth({
   // Configure one or more authentication providers
   providers: [
     Providers.Google({
       clientId: process.env.GOOGLE_CLIENT_ID,
-      clientSecret: process.env.GOOGLE_CLIENT_SECRET
+      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
     }),
     // ...add more providers here
   ],
 
   // A database is optional, but required to persist accounts in a database
   database: process.env.DATABASE_URI,
-})
+});
diff --git a/pages/api/data.js b/pages/api/data.js
@@ -1,15 +1,14 @@
-import nextConnect from 'next-connect';
-import middleware from '../../middleware/database';
+import nextConnect from "next-connect";
+import middleware from "../../middleware/database";
 
 const handler = nextConnect();
 
 handler.use(middleware);
 
 handler.get(async (req, res) => {
-
-    let doc = await req.db.collection('CalendarRecord').findOne()
-    // console.log(doc);
-    res.json(doc);
+  let doc = await req.db.collection("CalendarRecord").findOne();
+  // console.log(doc);
+  res.json(doc);
 });
 
-export default handler;
+export default handler;
diff --git a/pages/api/hello.js b/pages/api/hello.js
@@ -1,5 +1,5 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 
 export default (req, res) => {
-  res.status(200).json({ name: 'John Doe' })
-}
+  res.status(200).json({ name: "John Doe" });
+};