Firebase Working + Project Structure (#4)

* NPM Init

* Small refactoring

* Project Structure and Firebase

* Renaming AddToDB

Author: jkluge

my-app/.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "findmynextcourse"
+  }
+}

my-app/README.md

@@ -1,12 +1,27 @@
-# React + Vite
+Project Structure Draft:
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+```
+.
+├── firebase.js      // handles fetching and saving to the realtime database on firebase
+├── firebase.json    // used for firebase deploy
+├── index.html       // the main index page - contains header and loads the index.jsx
+├── package.json     // used for nodejs (npm) packages
+├── package-lock.json    // used for nodejs (npm) packages
+├── README.md        // this file ^^
+├── src              // contains all source filed
+│   ├── assets       //  content, e.g. pictures, ressources etc.
+│   │   └── react.svg
+│   ├── index.jsx    // the react router - routes between pages, all pages are inserted here
+│   ├── model.js     // the model - handles prog. logic, that is either global or account specific
+│   ├── pages        // pages combine the presenters to a webpage. mby obsolete for 1 page project
+│   │   └── HomeRoot.jsx  // The future homepage?
+│   ├── presenters   // Presenters link views and the model. 
+│   |                   Hooks to modify the model & component  state is defined here
+│   │   └── HandleSearchPresenter.jsx  // An example presenter
+│   ├── styles.css   // a style document - mby one for each view?
+│   └── views        // views define parts of pages cosmetically. 
+│       └── DummyView.jsx
+└── vite.config.js
+```
 
-Currently, two official plugins are available:
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend using TypeScript and enable type-aware lint rules. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

my-app/firebase.js

@@ -0,0 +1,56 @@
+import { initializeApp } from "firebase/app";
+import { getAuth, GoogleAuthProvider, onAuthStateChanged } from "firebase/auth";
+import { get, getDatabase, ref, set, serverTimestamp } from "firebase/database";
+
+// Your web app's Firebase configuration
+const firebaseConfig = {
+    apiKey: "AIzaSyCBckVI9nhAP62u5jZJW3F4SLulUv7znis",
+    authDomain: "findmynextcourse.firebaseapp.com",
+    databaseURL: "https://findmynextcourse-default-rtdb.europe-west1.firebasedatabase.app",
+    projectId: "findmynextcourse",
+    storageBucket: "findmynextcourse.firebasestorage.app",
+    messagingSenderId: "893484115963",
+    appId: "1:893484115963:web:59ac087d280dec919ccd5e"
+  };
+  
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+export const auth = getAuth(app);
+export const db = getDatabase(app);
+// export const googleProvider = new GoogleAuthProvider();
+// googleProvider.addScope("profile");
+// googleProvider.addScope("email");
+
+// fetches all relevant information to create the model
+async function firebaseToModel(model) {
+	const courses = await fetchCourses();
+    model.setCourses(courses);
+}
+
+export function connectToFirebase(model) {
+	// onAuthStateChanged(auth, (user) => {
+	// 	model.setUser(user);
+	// }); !can be used for auth! 
+
+	firebaseToModel(model);
+}
+
+export async function addCourse(course){
+	if(!course?.courseCode)
+		return;
+    const myRef = ref(db, `courses/${course.courseCode}`);
+	await set(myRef, course);
+}
+
+export async function fetchCourses() {
+	const myRef = ref(db, `courses`);
+	const snapshot = await get(myRef);
+	if (!snapshot.exists()) return [];
+	const value = snapshot.val();
+	const courses = [];
+	for (const id of Object.keys(courses)) {
+		courses = [...courses, courses[id]];
+	}
+	return courses;
+}

my-app/firebase.json

@@ -0,0 +1,10 @@
+{
+  "hosting": {
+    "public": "dist",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ]
+  }
+}

my-app/index.html

@@ -1,15 +1,11 @@
 <!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" />
-    <link href="/src/styles.css" rel="stylesheet">
-    <title>Vite + React</title>
-  </head>
-  <body>
-  <h1 class="text-3xl font-bold underline">
-    Hello world!
-  </h1>
-  </body>
+	<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" />
+		<title>Vite + React</title>
+	</head>
+	<div id="root"></div>
+	<script type="module" src="/src/index.jsx"></script>
 </html>