cards showing and navbar done

.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  extends: ['next', 'next/core-web-vitals', 'prettier', 'airbnb'],
+  extends: ['next/core-web-vitals', 'prettier', 'airbnb'],
   env: {
     browser: true,
     es2021: true,

api/tutorData.js

@@ -0,0 +1,102 @@
+import { clientCredentials } from '../utils/client';
+
+const endpoint = clientCredentials.databaseURL;
+
+// GET ALL TUTORS
+const getAllTutors = () => new Promise((resolve, reject) => {
+  fetch(`${endpoint}/tutors.json`, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  })
+    .then((response) => response.json())
+    .then((data) => resolve(Object.values(data)))
+    .catch(reject);
+});
+
+// CREATE TUTOR
+const createTutor = (payload) => new Promise((resolve, reject) => {
+  fetch(`${endpoint}/tutors.json`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(payload),
+  })
+    .then((response) => response.json())
+    .then((data) => {
+      const setcode = { firebaseKey: data.name };
+      fetch(`${endpoint}/tutors/${setcode.firebaseKey}.json`, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(setcode),
+      }).then(resolve);
+    })
+    .catch(reject);
+});
+
+// TODO: DELETE TUTOR
+const deleteTutor = (firebaseKey) => new Promise((resolve, reject) => {
+  fetch(`${endpoint}/tutors/${firebaseKey}.json`, {
+    method: 'DELETE',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  })
+    .then((response) => response.json())
+    .then((data) => resolve(data))
+    .catch(reject);
+});
+// TODO: GET SINGLE TUTOR
+const getSingleTutor = (firebaseKey) => new Promise((resolve, reject) => {
+  fetch(`${endpoint}/tutors/${firebaseKey}.json`, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  })
+    .then((response) => response.json())
+    .then((data) => resolve(data)) // will resolve a single object
+    .catch(reject);
+});
+
+// TODO: UPDATE TUTOR
+const updateTutor = (payload) => new Promise((resolve, reject) => {
+  fetch(`${endpoint}/tutors/${payload.firebaseKey}.json`, {
+    method: 'PATCH',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(payload),
+  })
+    .then((response) => response.json())
+    .then(resolve)
+    .catch(reject);
+});
+//  TODO: FILTER BOOKS ON SALE
+// const booksOnSale = (uid) => new Promise((resolve, reject) => {
+//   fetch(`${endpoint}/books.json?orderBy="uid"&equalTo=${uid}`, {
+//     method: 'GET',
+//     headers: {
+//       'Content-Type': 'application/json',
+//     },
+//   })
+//     .then((response) => response.json())
+//     .then((data) => {
+//       const onSale = Object.values(data).filter((item) => item.sale);
+//       resolve(onSale);
+//     })
+//     .catch(reject);
+// });
+// TODO: STRETCH...SEARCH BOOKS
+
+export {
+  getAllTutors,
+  createTutor,
+  deleteTutor,
+  updateTutor,
+  getSingleTutor,
+};

components/NavBar.js

@@ -1,28 +1,22 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import React from 'react';
-import Link from 'next/link';
+// import Link from 'next/link';
 import {
-  Navbar, Container, Nav, Button,
+  Navbar, Container, Nav,
 } from 'react-bootstrap';
-import { signOut } from '../utils/auth';
+// import { signOut } from '../utils/auth';
 
 export default function NavBar() {
   return (
-    <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
+    <Navbar bg="primary" variant="dark">
       <Container>
-        <Link passHref href="/">
-          <Navbar.Brand>CHANGE ME</Navbar.Brand>
-        </Link>
-        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
-        <Navbar.Collapse id="responsive-navbar-nav">
-          <Nav className="me-auto">
-            {/* CLOSE NAVBAR ON LINK SELECTION: https://stackoverflow.com/questions/72813635/collapse-on-select-react-bootstrap-navbar-with-nextjs-not-working */}
-            <Link passHref href="/">
-              <Nav.Link>Home</Nav.Link>
-            </Link>
-            <Button variant="danger" onClick={signOut}>Sign Out</Button>
-          </Nav>
-        </Navbar.Collapse>
+        <Navbar.Brand href="/">theTechAcademy</Navbar.Brand>
+        <Nav className="me-auto">
+          <Nav.Link href="/">Home</Nav.Link>
+          <Nav.Link href="/viewTutors">View Tutors</Nav.Link>
+          <Nav.Link href="/mytutors">My Tutors</Nav.Link>
+          <Nav.Link href="/mybookings">My Bookings</Nav.Link>
+        </Nav>
       </Container>
     </Navbar>
   );

components/SearchBar.js

@@ -0,0 +1,7 @@
+// import React from 'react';
+// import { useState } from 'react';
+
+// export default SearchBar() {
+
+//   return ();
+// };

components/TutorCard.js

@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types';
+import { Button, Image } from 'react-bootstrap';
+import Card from 'react-bootstrap/Card';
+// import Link from 'next/link';
+
+export default function TutorCard({ tutorObj }) {
+  return (
+    <>
+      <Card style={{
+        height: '400px',
+        width: '18rem',
+        margin: '10px',
+        cursor: 'pointer',
+      }}
+      >
+        <Image variant="top" src={tutorObj?.image} alt={tutorObj?.tutor_name} />
+        <div>
+          <h4 className="card-text bold">{tutorObj?.tutor_name}</h4>
+          <p>Subjects: {tutorObj?.subject}</p>
+          <p className="card-text-bold">${tutorObj?.rate} per hour</p>
+          <Button variant="success">Learn more about {tutorObj?.tutor_name}</Button>
+        </div>
+      </Card>
+    </>
+  );
+}
+
+TutorCard.propTypes = {
+  tutorObj: PropTypes.shape({
+    image: PropTypes.string,
+    tutor_name: PropTypes.string,
+    subject: PropTypes.string,
+    rate: PropTypes.number,
+  }).isRequired,
+};

next.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   reactStrictMode: true,
   // I don't want it to run when compiling as I trust the CI stage of the pipeline and Husky.
-  ignoreDuringBuilds: true,
+  // ignoreDuringBuilds: true,
 };

package.json

@@ -1,8 +1,8 @@
 {
-  "name": "next-firebase-starter",
+  "name": "thetekacademy",
   "private": true,
   "version": "1.0.0",
-  "author": "Trinity Christiana",
+  "author": "sheryl boles",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -21,7 +21,7 @@
     "axios": "^0.21.1",
     "bootstrap": "^5.1.3",
     "firebase": "^8.2.0",
-    "next": "12.0.7",
+    "next": "^12.3.4",
     "prop-types": "^15.7.2",
     "react": "17.0.2",
     "react-bootstrap": "^2.4.0",

pages/index.js

@@ -21,6 +21,7 @@ function Home() {
         Sign Out
       </Button>
     </div>
+
   );
 }
 

pages/viewTutors.js

@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react';
+import TutorCard from '../components/TutorCard';
+import { getAllTutors } from '../api/tutorData';
+import { useAuth } from '../utils/context/authContext';
+
+export default function ViewTutors() {
+  const [tutors, setTutors] = useState([]);
+  const { user } = useAuth();
+
+  // const seeTutorCards = () => {
+  // };
+
+  useEffect(() => {
+    getAllTutors().then(setTutors);
+  }, [user]);
+
+  return (
+    <div className="d-flex flex-wrap">
+      {/* map over tutors here using tutorcard component */}
+      {tutors.map((tutor) => (
+        <TutorCard key={tutor.firebaseKey} tutorObj={tutor} />
+      ))}
+    </div>
+  );
+}

styles/globals.css

@@ -17,6 +17,6 @@ a {
   box-sizing: border-box;
 }
 
-body {
+/* body {
   background-color: #88effd;
-}
+} */

utils/client.js

@@ -9,7 +9,7 @@ const clientCredentials = {
   storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
   messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
   appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
-  databaseURL: process.env.NEXT_FIREBASE_PUBLIC_DATABASE_URL,
+  databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
 };
 
 if (!firebase.apps.length) {