From 39b8f6926224b960d922f83a950b448e2ca2bf78 Mon Sep 17 00:00:00 2001 From: ellacutler <98005116+ellacutler@users.noreply.github.com> Date: Sat, 8 Apr 2023 00:21:46 -0500 Subject: [PATCH] Added Database initialization, passing user ID between componentsm, and a very preliminary prescription view --- react/index.html | 1 + react/package.json | 2 +- react/src/App.jsx | 95 +++++++++++++++---- react/src/Components/Navbar.jsx | 19 ++-- .../src/components/schedule/ScheduledDrug.jsx | 48 ++++++---- react/src/config/firebaseconfig.js | 88 +---------------- react/src/index.css | 13 ++- react/src/pages/About.jsx | 2 +- react/src/pages/Assistant.jsx | 2 +- react/src/pages/Home.jsx | 62 +++++++----- react/src/pages/Profile.jsx | 4 +- react/src/pages/Schedule.jsx | 42 +++++++- react/tailwind.config.cjs | 4 +- 13 files changed, 214 insertions(+), 168 deletions(-) diff --git a/react/index.html b/react/index.html index 79c4701..d334796 100644 --- a/react/index.html +++ b/react/index.html @@ -1,6 +1,7 @@ + diff --git a/react/package.json b/react/package.json index 84112ba..4dd6ff8 100644 --- 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 index 6e4b5a4..d7f97cd 100644 --- 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 ( -
- - - } /> - } /> - } /> - } /> - } /> - - -
- ) +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 ( +
+ + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + +
+ ); + + } + } export default App diff --git a/react/src/Components/Navbar.jsx b/react/src/Components/Navbar.jsx index 2178d88..9d60e59 100644 --- 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 (
- Schedule - Assistant - Profile + const styles = " hover:decoration-emerald-900 w-1/3 text-black font-bold rounded-full " + return (
+ Schedule + + + Assistant + Profile
); } -export default Navbar \ No newline at end of file + + diff --git a/react/src/components/schedule/ScheduledDrug.jsx b/react/src/components/schedule/ScheduledDrug.jsx index 75fd3ee..7bce5a5 100644 --- 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 ( +
+
+

{this.props.CHEMICAL}

+

{"Take " + this.props.DOSAGE + " of this medicine in the " + this.props.TIME}

+

+ +
+
+ ); } - // 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( -
{this.uid }
- ) - - ); } -export default ScheduledDrug; \ No newline at end of file + +export {ScheduledDrug}; diff --git a/react/src/config/firebaseconfig.js b/react/src/config/firebaseconfig.js index c812a1a..2d0189f 100644 --- 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; -}; \ No newline at end of file diff --git a/react/src/index.css b/react/src/index.css index 9ef50f5..55123c8 100644 --- 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 index 44dc002..b768719 100644 --- 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 index 97b2e8f..e07ac8b 100644 --- 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); diff --git a/react/src/pages/Home.jsx b/react/src/pages/Home.jsx index f9d9dc8..363f07b 100644 --- a/react/src/pages/Home.jsx +++ b/react/src/pages/Home.jsx @@ -1,11 +1,13 @@ import { useState } from 'react'; -import Navbar from '../components/Navbar'; +import {Navbar} from '../components/Navbar'; import { initializeApp } from "firebase/app"; import { GoogleAuthProvider, signInWithPopup, getAuth } from "firebase/auth"; -import { auth, app, addNewUser } from "../config/firebaseconfig" +import { auth, app } from "../config/firebaseconfig" import { Link, redirect, Navigate } from 'react-router-dom'; +import { getDatabase, ref, set, off, child, get } from 'firebase/database'; -const Home = (allUsers) => { + +const Home = () => { // this is basically the landing page // don't need the nav bar if people aren't logged in that's going to cause problems // const userCred = await signInWithPopup(auth, new GoogleAuthProvider()); @@ -16,7 +18,7 @@ const Home = (allUsers) => {

Hi! Welcome to "Explainer MD"

- +
@@ -27,13 +29,13 @@ const Redirect = async => { } -const SignIn = (allUsers) => { +const SignIn = async => { var test = "test"; var object = {"something":"test"} console.log(object) console.log(object.something) console.log(JSON.stringify(object)) -//const [user, setUser] = useState(0) +// const [user, setUser] = useState(0) const provider = new GoogleAuthProvider(); signInWithPopup(auth, provider) @@ -41,37 +43,47 @@ const SignIn = (allUsers) => { // This gives you a Google Access Token. You can use it to access the Google API. const credential = GoogleAuthProvider.credentialFromResult(result); const token = credential.accessToken; + const db = getDatabase(); // The signed-in user info. + // user. anything is undefined, that's the current problem const user = result.user; // is this the user id?? ? + const userId = user.uid; console.log(JSON.stringify(user)); - if (user && allUsers && allUsers["allUsers"]) { - if (!allUsers["allUsers"][user.uid]) { - const newUser = { - displayName: user.displayName, - email: user.email, - photoURL: user.photoURL, - }; - - addNewUser(newUser, user.uid); + console.log(JSON.stringify(user.displayName)); + console.log(JSON.stringify(user)); + const dbRef = ref(db); + get(child(dbRef, `users/${userId}`)).then((snapshot) => { + if (snapshot.exists()) { + console.log("def"); + console.log(snapshot.val()); + window.location.href = "http://localhost:5173/schedule"; + } else { + console.log("abc"); + set(ref(db, 'users/' + userId), { + + username: user.displayName, + + }); + window.location.href = "http://localhost:5173/schedule"; + } - } - window.location.href = "http://localhost:5173/schedule"; + }).catch((error) => { + console.log(error); + }); + + + - // IdP data available using getAdditionalUserInfo(result) - return 1 - /* .then( () => { - redirect("./schedule") - }) */ + return 0 - - // ... }).catch((error) => { + console.log("there is an error here "); // Handle Errors here. const errorCode = error.code; const errorMessage = error.message; // The email of the user's account used. - const email = error.customData.email; + // const email = error.customData.email; // The AuthCredential type that was used. const credential = GoogleAuthProvider.credentialFromError(error); // ... diff --git a/react/src/pages/Profile.jsx b/react/src/pages/Profile.jsx index 24eb670..f869235 100644 --- a/react/src/pages/Profile.jsx +++ b/react/src/pages/Profile.jsx @@ -3,7 +3,7 @@ import Tabs from 'react-bootstrap/Tabs'; import Tab from 'react-bootstrap/Tab'; import Schedule from '../pages/Schedule'; import { Link } from 'react-router-dom'; -import Navbar from '../components/Navbar'; +import {Navbar} from "../Components/Navbar"; const Profile = () => { @@ -17,7 +17,7 @@ const Profile = () => {

Profile page

- + ); } diff --git a/react/src/pages/Schedule.jsx b/react/src/pages/Schedule.jsx index 8541808..291f328 100644 --- a/react/src/pages/Schedule.jsx +++ b/react/src/pages/Schedule.jsx @@ -1,14 +1,50 @@ import { useState } from 'react'; -import Navbar from '../components/Navbar'; +import {Navbar} from "../Components/Navbar"; +import { ScheduledDrug } from '../Components/schedule/ScheduledDrug'; +import { GoogleAuthProvider, signInWithPopup, getAuth, onAuthStateChanged } from "firebase/auth"; +import { auth, app } from "../config/firebaseconfig" +import { Link, redirect, Navigate } from 'react-router-dom'; +import { getDatabase, ref, set, off, child, get } from 'firebase/database'; -const Schedule = () => { + + +const Schedule = ({user = ""}) => { const [count, setCount] = useState(0); const [selectedImage, setSelectedImage] = useState(null); + const [userdata, setuserdata] = useState("null") + + console.log("hi here we are ") + console.log(JSON.stringify(user)); + const userid = JSON.stringify(user); + + const h1styles = "text-black text-4xl text-center text-bold"; + const db = getDatabase(); + const dbRef = ref(db); + // this currently causes a + get(child(dbRef, `users/${user}`)).then((snapshot) => { + if (snapshot.exists()) { + console.log("def"); + console.log(snapshot.val()); + setuserdata(snapshot.val()); + + + + } + }).catch((error) => { + console.log(error); + }); + + + return (
-

Schedule page

+

{"Hi, " + userdata.username}

+ + + + diff --git a/react/tailwind.config.cjs b/react/tailwind.config.cjs index f4b467f..e47b080 100644 --- a/react/tailwind.config.cjs +++ b/react/tailwind.config.cjs @@ -4,7 +4,9 @@ module.exports = { "./src/**/*.{js,jsx,ts,tsx}", "./src/pages/App.jsx", "./src/pages/Home.jsx", - "./index.html" + "./index.html", + "./src/pages/Schedule.jsx", + "./src/Components/Navbar.jsx", ], theme: { extend: {},