ellacutler · ellacutler · Apr 8, 2023
diff --git a/react/index.html b/react/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

diff --git a/react/package.json b/react/package.json
@@ -23,7 +23,7 @@
     "@vitejs/plugin-react": "^3.1.0",
     "autoprefixer": "^10.4.13",
     "postcss": "^8.4.21",
-    "tailwindcss": "^3.2.4",
+    "tailwindcss": "^3.3.1",
     "vite": "^4.1.0"
   }
 }
diff --git a/react/src/App.jsx b/react/src/App.jsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+
 // import reactLogo from './assets/react.svg'
 // import './App.css'
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
@@ -7,25 +7,80 @@ import About from './pages/About';
 import Profile from './pages/Profile';
 import Schedule from './pages/Schedule';
 import Assistant from './pages/Assistant';
-import { useDbData } from './config/firebaseconfig.js';
-
-
-function App() {
-  const [dbUsers, dbUsersError] = useDbData('/users');
-
-  return (
-    <div className="App">
-      <BrowserRouter>
-        <Routes>
-          <Route exact path='/schedule' element={<Schedule/>} />
-          <Route path="/" element={<Home allUsers={dbUsers}/>} />
-          <Route path="/about" element={<About />} />
-          <Route path="/profile" element={<Profile />} />
-          <Route path="/assistant" element={<Assistant />} />
-        </Routes>
-      </BrowserRouter>
-    </div>
-  )
+import { Navbar } from './Components/Navbar';
+import { ScheduledDrug } from './Components/schedule/ScheduledDrug';
+import React, {useState,useEffect} from "react";
+import { onAuthStateChanged,getAuth} from 'firebase/auth';
+import { getDatabase, ref, set, off, child, get } from 'firebase/database';
+
+
+
+
+class App extends React.Component {
+
+  constructor(props){
+    super(props);
+    this.state = {
+      user: " ",
+
+    }
+  }
+
+  // After this component renders, we will call on auth lister which will begin auth listener process
+  componentDidMount(){
+    this.authListener();
+  }
+
+
+
+
+
+  authListener() {
+    const auth = getAuth();
+   onAuthStateChanged(auth, (user) => {
+  if (user) {
+    // User is signed in, see docs for a list of available properties
+    // https://firebase.google.com/docs/reference/js/firebase.User
+
+
+    const uid = user.uid;
+    console.log(uid);
+    console.log(this.state.user);
+    this.setState({
+      user:user.uid,
+    });
+    // SO THIS IS DOING THE RIGHT THING 
+    // ...
+  } else {
+    this.setState({
+      user: " ",
+    });
+    // User is signed out
+    // ...
+  }
+})} ;
+
+
+
+  render(){
+    return (
+      <div className="App bg-slate-300">
+        <BrowserRouter>
+          <Routes>
+            <Route exact path='/schedule' element={<Schedule user={this.state.user}/>} />
+            <Route path="/" element={<Home user={this.state.user} />} />
+            <Route path="/about" element={<About />} />
+            <Route path="/profile" element={<Profile />} />
+            <Route path="/assistant" element={<Assistant />} />
+            <Route path="/navtest" element={<Navbar />} />
+            <Route path="/ptest" element = {<ScheduledDrug />} />
+          </Routes>
+        </BrowserRouter>
+      </div>
+    );
+
+  }
+
 }
 
 export default App
diff --git a/react/src/Components/Navbar.jsx b/react/src/Components/Navbar.jsx
@@ -1,14 +1,17 @@
 import { React, useState } from "react";
 import { Link } from "react-router-dom";
-
-const Navbar = () => {
+// bg-blue-500 hover:bg-blue-700
+export const Navbar = () => {
     const [curTab, setCurTab] = useState("schedule");
-
-    return (<div className= "grid grid-cols-3">
-        <Link to = "/schedule" >Schedule</Link> 
-        <Link to = "/assistant"> Assistant </Link> 
-        <Link to = "/profile"> Profile </Link>
+    const styles = " hover:decoration-emerald-900 w-1/3 text-black font-bold rounded-full "
+    return (<div className= " my-9 grid grid-cols-3 text-center place-items-center">
+        <Link to = "/schedule" className= {styles}> Schedule </Link> 
+
+
+        <Link to = "/assistant" className = {styles}> Assistant </Link> 
+        <Link to = "/profile"className={styles}> Profile </Link>
     </div>
     );
 }
-export default Navbar
+
+
diff --git a/react/src/components/schedule/ScheduledDrug.jsx b/react/src/components/schedule/ScheduledDrug.jsx
@@ -1,26 +1,36 @@
+import React, {Component} from "react";
 import { useState } from 'react';
 
-class ScheduledDrug extends React.Component {
-    constructor(props) {
-        super(props);
-        this.uid = "";
-      }
-      componentDidMount() {
-        this.props.firebase.auth().onAuthStateChanged((user) => {
-          if (user) {
-            this.uid = user.uid;
-          }
-        });
+class ScheduledDrug extends Component{
+
+    render() {
+        // this is just an example of what this could look like and i hope we make it look better asp 
+        return (
+        <div className = "  my-9 grid grid-cols-1  place-items-center ">
+          <div className = " w-4/5 border-solid border-4 border-black">
+           <h1 className= "text-3xl"> {this.props.CHEMICAL} </h1>
+           <h2 className = "text-2xl"> {"Take " + this.props.DOSAGE + " of this medicine in the " + this.props.TIME} </h2>
+           <h3 className = "test-3xl"> </h3>
+
+          </div>
+          </div>
+        );
       }
-      // need a mapping function to return all prescriptions 
+
+}
+ScheduledDrug.defaultProps = {
+CHEMICAL: "Wellbutruin",
+TIME: "Morning",
+DOSAGE: "75mg",
+DISEASE: "Being too hot",
+FILLTIME: "Abc",
+REFILLTIME: " Idk if we fr need these",
+QUANTITY: " 30 pills",
+INFO: "stop being anxious",
+
 
 
-    render (
-        return(
-            <div>{this.uid }</div>
-        )
-
-    ); 
 }
 
-export default ScheduledDrug;
+
+export {ScheduledDrug};
diff --git a/react/src/config/firebaseconfig.js b/react/src/config/firebaseconfig.js
@@ -1,16 +1,6 @@
-import { useEffect, useState } from "react";
 import { initializeApp } from "firebase/app";
 import { getAuth } from "firebase/auth";
-import { getFirestore } from "firebase/firestore";
-import { useState, useEffect } from "react";
-import { ref, onValue } from "firebase/database";
-import {
-  deleteObject,
-  getDownloadURL,
-  getStorage,
-  ref as sRef,
-  uploadBytes,
-} from "firebase/storage";
+import { getDatabase } from "firebase/database";
 
 const firebaseConfig = {
     apiKey: "AIzaSyDWQwGfrwlkyAZuwBatkhzQJVH5IPnFv7A",
@@ -24,79 +14,5 @@ const firebaseConfig = {
   };
 export const app = initializeApp(firebaseConfig);
 
-
+export const database = getDatabase(app);
 export const auth = getAuth(app);
-
-const database = getFirestore(app);
-
-
-// Get data from a specific path in the entire database
-export const useDbData = (path) => {
-  const [data, setData] = useState();
-  const [error, setError] = useState(null);
-
-  useEffect(
-      () =>
-          onValue( // reference error with on value 
-              ref(database, path),
-              (snapshot) => {
-                  setData(snapshot.val());
-              },
-              (error) => {
-                  setError(error);
-              }
-          ),
-      [path]
-  );
-
-  return [data, error];
-};
-
-// Add new user to the user table in the database
-export const addNewUser = (newUser, uid) => {
-  set(ref(database, "users/" + uid), newUser);
-};
-
-
-// Image upload and delete functions
-
-export const uploadFile = async (file) => {
-  let fileLink = `images/${file.name}`;
-  let downloadURL = "";
-  let isSuccessful = false;
-  const imageReference = sRef(storage, fileLink);
-
-  try {
-    await uploadBytes(imageReference, file);
-    downloadURL = await getDownloadURL(imageReference);
-    console.log("File upload successful");
-    isSuccessful = true;
-  } catch (err) {
-    console.log("Error: " + err);
-  }
-
-  return [isSuccessful, downloadURL];
-};
-
-export const deleteFile = async (url) => {
-  let fileRef = sRef(storage, url);
-  try {
-    let deleteResult = await deleteObject(fileRef);
-    console.log(deleteResult);
-  } catch (error) {
-    console.log(error);
-  }
-};
-
-export const getImageLinkOfExistingImage = async (imageFileName) => {
-  let fileLink = `images/${imageFileName}`;
-  let imageLink = "";
-  const imageReference = sRef(storage, fileLink);
-  try {
-    imageLink = await getDownloadURL(imageReference);
-  } catch (err) {
-    console.log(err);
-  }
-
-  return imageLink;
-};
diff --git a/react/src/index.css b/react/src/index.css
@@ -1,6 +1,17 @@
-@tailwind base;
+@import "tailwindcss/base";
+
+@import "tailwindcss/components";
+
+@import "tailwindcss/utilities";
+
+:root{
+  background-color: rgb(203 213 225);
+}
+/*@tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/*
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;

diff --git a/react/src/pages/About.jsx b/react/src/pages/About.jsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import Navbar from '../components/Navbar';
+import {Navbar} from '../components/Navbar';
 
 
 const About = () => {

diff --git a/react/src/pages/Assistant.jsx b/react/src/pages/Assistant.jsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import Navbar from '../components/Navbar';
+import {Navbar} from "../Components/Navbar";
 
 const Assistant = () => {
   const [count, setCount] = useState(0);