- {
return {
id: idx + 1,
@@ -478,30 +479,30 @@ const NewExp = ({ formState, setFormState, copyID, setCopyId, ...rest }) => {
type='button'
className='rounded-md border w-1/6 border-gray-300 bg-white py-2 px-4 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2'
onClick={
- status === FormStates.Info
- ? () => {
- localStorage.removeItem("ID")
+ status === FormStates.Info ?
+ () => {
+ localStorage.removeItem('ID');
setFormState(-1);
- }
- : () => {
- setStatus(status - 1);
- }
+ } :
+ () => {
+ setStatus(status - 1);
+ }
}
>
{status === FormStates.Info ? 'Cancel' : 'Back'}
diff --git a/apps/frontend/components/Parameter.tsx b/apps/frontend/components/Parameter.tsx
index 60b78436..078953d6 100644
--- a/apps/frontend/components/Parameter.tsx
+++ b/apps/frontend/components/Parameter.tsx
@@ -53,6 +53,7 @@ const NumberParam = ({ form, type, index, ...rest }) => {
{['default', 'min', 'max', 'step'].map((label, i) => {
return (
{
const router = useRouter();
useEffect(() => {
if (!user) {
- console.log("User is not signed in; redirecting them to /signin");
+ console.log('User is not signed in; redirecting them to /signin');
router.push('/signin');
}
}, [user, router]);
- return <>{user ? children : "Not logged in"};
+ return <>{user ? children : 'Not logged in'};
};
export default ProtectedRoute;
diff --git a/apps/frontend/components/Toggle.tsx b/apps/frontend/components/Toggle.tsx
index a73c3669..1591e88b 100644
--- a/apps/frontend/components/Toggle.tsx
+++ b/apps/frontend/components/Toggle.tsx
@@ -7,7 +7,7 @@ export const Toggle = ({ label, onChange }) => {
const [enabled, setEnabled] = useState(false);
useEffect(() => {
onChange();
- }, [enabled]);
+ }, [enabled]); // TODO adding onChange causes render loop
return (
diff --git a/apps/frontend/firebase/db.ts b/apps/frontend/firebase/db.ts
index 8f062df9..60826dc6 100644
--- a/apps/frontend/firebase/db.ts
+++ b/apps/frontend/firebase/db.ts
@@ -1,16 +1,16 @@
-import { firebaseApp } from "./firebaseClient";
-import { getDoc, getFirestore, updateDoc } from "firebase/firestore";
-import { collection, setDoc, doc, query, where, onSnapshot } from "firebase/firestore";
-import { getDownloadURL, getStorage, ref, uploadBytes } from "firebase/storage";
+import { firebaseApp } from './firebaseClient';
+import { getDoc, getFirestore, updateDoc } from 'firebase/firestore';
+import { collection, setDoc, doc, query, where, onSnapshot } from 'firebase/firestore';
+import { getDownloadURL, getStorage, ref, uploadBytes } from 'firebase/storage';
// Initialize Cloud Firestore and get a reference to the service
const db = getFirestore(firebaseApp);
const storage = getStorage(firebaseApp);
-const experiments = collection(db, "Experiments")
+const experiments = collection(db, 'Experiments');
export const submitExperiment = async (values, userId) => {
- const newExperiment = doc(experiments)
- console.log("Experiment submitted. Values:", values);
+ const newExperiment = doc(experiments);
+ console.log('Experiment submitted. Values:', values);
setDoc(newExperiment, {
creator: userId,
name: values.name,
@@ -27,84 +27,83 @@ export const submitExperiment = async (values, userId) => {
created: Date.now(),
params: JSON.stringify({
params: values.parameters,
- })
- })
- console.log("Created Experiment: " + newExperiment.id)
- return newExperiment.id
+ }),
+ });
+ console.log(`Created Experiment: ${newExperiment.id}`);
+ return newExperiment.id;
};
export const uploadExec = async (id, file) => {
- const fileRef = ref(storage, "experiment" + id)
+ const fileRef = ref(storage, `experiment${id}`);
return await uploadBytes(fileRef, file).then((snapshot) => {
- const experimentRef = doc(db, "Experiments", id)
+ const experimentRef = doc(db, 'Experiments', id);
updateDoc(experimentRef, {
- file: "experiment" + id
+ file: `experiment${id}`,
}).then(() => {
- console.log("Uploaded file for experiment " + id)
- return true
- }).catch(error => console.log("Upload doc error: ", error))
- return true
- }).catch(error => {
- console.log("Upload bytes error: ", error)
- return false
- })
+ console.log(`Uploaded file for experiment ${id}`);
+ return true;
+ }).catch((error) => console.log('Upload doc error: ', error));
+ return true;
+ }).catch((error) => {
+ console.log('Upload bytes error: ', error);
+ return false;
+ });
};
export const getDocById = (id) => {
- getDoc(doc(db, "Experiments", id)).then(docSnap => {
+ getDoc(doc(db, 'Experiments', id)).then((docSnap) => {
if (docSnap.exists()) {
return docSnap.data();
} else {
- console.log("No such document!");
+ console.log('No such document!');
}
- })
-
-}
+ });
+};
export const downloadExp = (event) => {
- const id = event.target.getAttribute('data-id')
- console.log(`Downloading results for ${id}`)
- const fileRef = ref(storage, `results/result${id}.csv`)
- getDownloadURL(fileRef).then(url => {
- const anchor = document.createElement('a')
- anchor.href = url
- anchor.download = `result${id}.csv`
- document.body.appendChild(anchor)
- anchor.click()
- document.body.removeChild(anchor)
- }).catch(error => console.log("Get download url for exp error: ", error))
-}
+ const id = event.target.getAttribute('data-id');
+ console.log(`Downloading results for ${id}`);
+ const fileRef = ref(storage, `results/result${id}.csv`);
+ getDownloadURL(fileRef).then((url) => {
+ const anchor = document.createElement('a');
+ anchor.href = url;
+ anchor.download = `result${id}.csv`;
+ document.body.appendChild(anchor);
+ anchor.click();
+ document.body.removeChild(anchor);
+ }).catch((error) => console.log('Get download url for exp error: ', error));
+};
export const downloadExpZip = (event) => {
- const id = event.target.getAttribute('data-id')
- console.log(`Downloading results for ${id}`)
- const fileRef = ref(storage, `results/result${id}.zip`)
- getDownloadURL(fileRef).then(url => {
- const anchor = document.createElement('a')
- anchor.href = url
- anchor.download = `result${id}.csv`
- document.body.appendChild(anchor)
- anchor.click()
- document.body.removeChild(anchor)
- }).catch(error => console.log("Upload download url for zip error: ", error))
-}
+ const id = event.target.getAttribute('data-id');
+ console.log(`Downloading results for ${id}`);
+ const fileRef = ref(storage, `results/result${id}.zip`);
+ getDownloadURL(fileRef).then((url) => {
+ const anchor = document.createElement('a');
+ anchor.href = url;
+ anchor.download = `result${id}.csv`;
+ document.body.appendChild(anchor);
+ anchor.click();
+ document.body.removeChild(anchor);
+ }).catch((error) => console.log('Upload download url for zip error: ', error));
+};
export const subscribeToExp = (id, callback) => {
- const unsubscribe = onSnapshot(doc(db, "Experiments", id), doc => {
- console.log(`exp ${id} data updated: `, doc.data())
- callback(doc.data())
- })
- return unsubscribe
-}
+ const unsubscribe = onSnapshot(doc(db, 'Experiments', id), (doc) => {
+ console.log(`exp ${id} data updated: `, doc.data());
+ callback(doc.data());
+ });
+ return unsubscribe;
+};
export const listenToExperiments = (uid, callback) => {
- const q = query(experiments, where("creator", "==", uid))
+ const q = query(experiments, where('creator', '==', uid));
const unsubscribe = onSnapshot(q, (snapshot) => {
- let result: unknown[] = []
- snapshot.forEach(doc => result.push(doc.data()))
- callback(result)
- })
- return unsubscribe
-}
+ const result: unknown[] = [];
+ snapshot.forEach((doc) => result.push(doc.data()));
+ callback(result);
+ });
+ return unsubscribe;
+};
diff --git a/apps/frontend/firebase/fbAuth.tsx b/apps/frontend/firebase/fbAuth.tsx
index cb395fb9..aa12bbfc 100644
--- a/apps/frontend/firebase/fbAuth.tsx
+++ b/apps/frontend/firebase/fbAuth.tsx
@@ -5,10 +5,10 @@ import React, {
useContext,
createContext,
useDebugValue,
- FC
} from 'react';
import { firebaseApp } from './firebaseClient';
-import { createUserWithEmailAndPassword, getAuth, onAuthStateChanged, signInWithEmailAndPassword, signOut, User } from 'firebase/auth'
+import { createUserWithEmailAndPassword, getAuth, onAuthStateChanged, signInWithEmailAndPassword, signOut, User } from 'firebase/auth';
+import noImage from '../images/NoImage.png'
export interface AuthContextType {
user: User | null;
@@ -19,7 +19,7 @@ export interface AuthContextType {
const AuthContext = createContext({
user: null,
userId: null,
- authService: null
+ authService: null,
});
export const useAuth = () => useContext(AuthContext);
@@ -36,13 +36,13 @@ export const AuthProvider: React.FC = ({ children }) => {
const [loading, setLoading] = useState(true);
useEffect(() => onAuthStateChanged(auth, (newUser) => {
- console.log("OnAuthStateChanged fired", newUser);
+ console.log('OnAuthStateChanged fired', newUser);
setLoading(false);
if (newUser) {
- console.log("User is signed in");
+ console.log('User is signed in');
setUser(newUser);
} else {
- console.log("No user signed in");
+ console.log('No user signed in');
}
}), [auth]);
@@ -58,30 +58,30 @@ export const AuthProvider: React.FC = ({ children }) => {
}, [user]),
userPhotoUrl: useMemo(() => {
- return user?.photoURL;
+ return user?.photoURL || noImage;
}, [user]),
signInWithEmailAndPassword: async (email: string, password: string) => {
return await signInWithEmailAndPassword(auth, email, password)
- .then((userCredential) => {
- console.log("sign in success, UserCred is ", userCredential);
+ .then((userCredential) => {
+ console.log('sign in success, UserCred is ', userCredential);
// no need to set state because onAuthStateChanged will pick it up
- }).catch((error) => {
- console.error('Firebase sign in error', error);
- throw error;
- });
+ }).catch((error) => {
+ console.error('Firebase sign in error', error);
+ throw error;
+ });
},
signUpWithEmailAndPassword: async (email: string, password: string) => {
return await createUserWithEmailAndPassword(auth, email, password)
- .then((userCredential) => {
- console.log("sign up success, UserCred is ", userCredential);
- }).catch((error) => {
- console.error('Firebase sign up error', error);
- throw error;
- });
+ .then((userCredential) => {
+ console.log('sign up success, UserCred is ', userCredential);
+ }).catch((error) => {
+ console.error('Firebase sign up error', error);
+ throw error;
+ });
},
signInWithGoogle: async () => {
- console.error("TODO");
+ console.error('TODO');
},
signOut: async () => {
return await signOut(auth);
diff --git a/apps/frontend/firebase/firebaseClient.ts b/apps/frontend/firebase/firebaseClient.ts
index e9605361..09c59bd4 100644
--- a/apps/frontend/firebase/firebaseClient.ts
+++ b/apps/frontend/firebase/firebaseClient.ts
@@ -2,13 +2,13 @@ import { initializeApp } from 'firebase/app';
const firebaseConfig = {
- apiKey: "AIzaSyDj-Y8FFq2C80ZSVUVAWd3eqcmSzXMHXus",
- authDomain: "gladosbase.firebaseapp.com",
- databaseURL: "https://gladosbase-default-rtdb.firebaseio.com",
- projectId: "gladosbase",
- storageBucket: "gladosbase.appspot.com",
- messagingSenderId: "431843551362",
- appId: "1:431843551362:web:0bb28196e90f31a194ec9b"
+ apiKey: 'AIzaSyDj-Y8FFq2C80ZSVUVAWd3eqcmSzXMHXus',
+ authDomain: 'gladosbase.firebaseapp.com',
+ databaseURL: 'https://gladosbase-default-rtdb.firebaseio.com',
+ projectId: 'gladosbase',
+ storageBucket: 'gladosbase.appspot.com',
+ messagingSenderId: '431843551362',
+ appId: '1:431843551362:web:0bb28196e90f31a194ec9b',
};
export const firebaseApp = initializeApp(firebaseConfig);
diff --git a/apps/frontend/images/NoImage.png b/apps/frontend/images/NoImage.png
new file mode 100644
index 00000000..32ea5c18
Binary files /dev/null and b/apps/frontend/images/NoImage.png differ
diff --git a/apps/frontend/next.config.js b/apps/frontend/next.config.js
index 7ca34f03..239ff1db 100644
--- a/apps/frontend/next.config.js
+++ b/apps/frontend/next.config.js
@@ -1,6 +1,22 @@
-/** @type {import('next').NextConfig} */
+/**
+ * @type {import('next').NextConfig}
+ */
+// TODO VSCode is detecting error "Parsing error: Cannot find module 'next/babel'" but the fix below just causes ESLint errors:
+// https://stackoverflow.com/questions/71662525/failed-to-load-config-next-babel-to-extend-from-eslintrc-json
+// https://nextjs.org/docs/api-reference/next.config.js/introduction
+
const nextConfig = {
reactStrictMode: true,
+ images: {
+ // https://nextjs.org/docs/api-reference/next/image#remote-patterns
+ remotePatterns: [
+ {
+ protocol: 'https',
+ hostname: 'tailwindui.com',
+ pathname: '/img/**'
+ },
+ ],
+ }
};
module.exports = nextConfig;
diff --git a/apps/frontend/pages/dashboard.tsx b/apps/frontend/pages/dashboard.tsx
index 30dee8ed..e02d4adb 100644
--- a/apps/frontend/pages/dashboard.tsx
+++ b/apps/frontend/pages/dashboard.tsx
@@ -1,9 +1,8 @@
import NewExp, { FormStates } from '../components/NewExp';
import { useAuth } from '../firebase/fbAuth';
-import { subscribeToExp, listenToExperiments, downloadExp, downloadExpZip} from '../firebase/db';
+import { subscribeToExp, listenToExperiments, downloadExp, downloadExpZip } from '../firebase/db';
import { Fragment, useState, useEffect } from 'react';
import { Disclosure, Menu, Transition } from '@headlessui/react';
-import Link from 'next/link';
import {
CheckBadgeIcon,
ChevronDownIcon,
@@ -11,13 +10,12 @@ import {
RectangleStackIcon,
MagnifyingGlassIcon,
BarsArrowUpIcon,
- StarIcon
} from '@heroicons/react/24/solid';
-import { MenuAlt1Icon, XIcon } from '@heroicons/react/outline';
import { Logo } from '../components/Logo';
import classNames from 'classnames';
import Router from 'next/router';
+import Image from 'next/image';
const navigation = [{ name: 'Admin', href: '#', current: false }];
const userNavigation = [
@@ -82,10 +80,10 @@ const Navbar = (props) => {
Open user menu
- 
@@ -110,9 +108,9 @@ const Navbar = (props) => {
authService
.signOut()
.then(() => {
- Router.reload()
+ Router.reload();
})
- .catch((err) => console.log("Sign out error", err))
+ .catch((err) => console.log('Sign out error', err))
);
}}
className={classNames(
@@ -141,9 +139,9 @@ const Navbar = (props) => {
as='a'
href={item.href}
className={classNames(
- item.current
- ? 'text-white bg-blue-800'
- : 'text-blue-200 hover:text-blue-100 hover:bg-blue-600',
+ item.current ?
+ 'text-white bg-blue-800' :
+ 'text-blue-200 hover:text-blue-100 hover:bg-blue-600',
'block px-3 py-2 rounded-md text-base font-medium'
)}
aria-current={item.current ? 'page' : undefined}
@@ -177,10 +175,10 @@ const Navbar = (props) => {
};
-const ExpLog = ({projectinit, setFormState, setCopyId}) => {
- const [project, setProject] = useState(projectinit);
- useEffect(() => subscribeToExp(project.expId, setProject),[])
- return (
+const ExpLog = ({ projectinit, setFormState, setCopyId }) => {
+ const [project, setProject] = useState(projectinit);
+ useEffect(() => subscribeToExp(project.expId, setProject), []); // TODO adding project causes render loop
+ return (
- )
-}
+
+ );
+};
const SearchBar = (props) => {
return (
@@ -267,15 +265,15 @@ const SearchBar = (props) => {
export default function DashboardPage() {
const { userId, authService } = useAuth();
- const [experiments, setExperiments] = useState([] as unknown[]); // TODO experiment type
+ const [experiments, setExperiments] = useState([] as unknown[]); // TODO experiment type
useEffect(() => {
if (!userId) {
return;
}
- return listenToExperiments(userId, (newExperimentList)=> setExperiments(newExperimentList))
- },[userId])
-
+ return listenToExperiments(userId, (newExperimentList) => setExperiments(newExperimentList));
+ }, [userId]);
+
const [copyID, setCopyId] = useState(null);
const [formState, setFormState] = useState(FormStates.Closed);
const [label, setLabel] = useState('New Experiment');
@@ -297,7 +295,7 @@ export default function DashboardPage() {
className='fixed top-0 right-0 w-1/2 h-full bg-gray-50'
aria-hidden='true'
/>
-
+
@@ -191,27 +189,27 @@ const ExpLog = ({projectinit, setFormState, setCopyId}) => {
{project['finished'] == true ?
- :
+ ' '}
{project['finished'] == true && (project['fileOutput'] != '' || project['scatter'] != '')?
- :
+ ' '}
+
{
/>
-
- +
FAILS: {project['fails']} SUCCESSES: {project['passes']}
@@ -237,9 +235,9 @@ const ExpLog = ({projectinit, setFormState, setCopyId}) => { {project.location}
{/* Navbar */}
-
@@ -397,9 +395,9 @@ export default function DashboardPage() {
@@ -412,9 +410,9 @@ export default function DashboardPage() {
@@ -427,9 +425,9 @@ export default function DashboardPage() {
@@ -446,14 +444,17 @@ export default function DashboardPage() {
role='list'
className='relative z-0 divide-y divide-gray-200 border-b border-gray-200'
>
- {experiments?.map((project: any) => ( // TODO a type for experiments should alleviate the need for `any` here
-
-
-
- ))}
+ {experiments?.map((project: any) => { // TODO a type for experiments should alleviate the need for `any` here
+ console.log('Project for this experiment is', project);
+ return (
+
+
+
+ );
+ })}
-
{activityItems.map((item) => (
-
- +
-
-- +diff --git a/apps/frontend/pages/index.tsx b/apps/frontend/pages/index.tsx index 1b9ecccb..0e024fb6 100644 --- a/apps/frontend/pages/index.tsx +++ b/apps/frontend/pages/index.tsx @@ -1,10 +1,8 @@ import Head from 'next/head'; -import Image from 'next/image'; import { useRouter } from 'next/router'; import Link from 'next/link'; import styles from '../styles/Home.module.css'; -import { Fragment } from 'react'; -import { Popover, Transition } from '@headlessui/react'; +import { Popover } from '@headlessui/react'; import { Bars3Icon } from '@heroicons/react/24/outline'; import { ChevronRightIcon } from '@heroicons/react/24/solid'; @@ -38,7 +36,7 @@ function Home({ form }) { // // router.push('/dashboard'); // } return ( -@@ -212,7 +210,7 @@ function Home({ form }) { router.push('/dashboard'); } } catch (error) { - console.log("Sign up error", error); + console.log('Sign up error', error); } })} className='space-y-6' @@ -226,8 +224,6 @@ function Home({ form }) {+
Glados @@ -103,7 +101,7 @@ function Home({ form }) { className='inline-flex items-center text-white bg-gray-900 rounded-full p-1 pr-2 sm:text-base lg:text-sm xl:text-base hover:text-gray-200' > - We're launching! + We're launching! Visit our repository @@ -131,8 +129,8 @@ function Home({ form }) {{/**/}- TODO: include rose logo and other stuff -*/} + TODO: include rose logo and other stuff +-*/}