Even more data

src/App.tsx

@@ -16,6 +16,7 @@ import { FONT_FAMILY } from './components/_data/Constants';
 import { HardCodedMainPage } from './components/HardcodedMainPage/HardCodedMainPage';
 import { Team } from './components/HardCodedTeamPage/LegacyHardCodedTeamPage';
 import { Sponsors } from './components/HardCodedSponsorsPage/LegacyHardCodedSponsorsPage';
+import { FIREBASE_DATABASE_REFERENCE } from '.';
 
 
 // This line is to remove a bug that Firefox has
@@ -26,7 +27,7 @@ type AppProps = {
 	IEOREDGE: boolean,
 	currYear: number,
 	firebase?: any,
-	ContentEditor: React.FC<ContentEditorProps>
+	ContentEditor: React.FC<ContentEditorProps> | null
 }
 const debugURL = "/Editor";
 
@@ -96,17 +97,17 @@ const App: React.FC<AppProps> = ({ IEOREDGE, currYear, firebase, ContentEditor }
 		prefetchImages();
 		let splitTitle = window.location.href.split("igem");
 		if (splitTitle.length === 2) {
-			setPageTitle(splitTitle[1].split("Team:Washington")[1]);
+			setPageTitle((splitTitle[1].split("Team:Washington")[1]).split("?")[0]);
 			setDebugMode(false);
 		} else {
 			DebugFonts(); // Set fonts in body
 		}
 		setLoading(false);
-		let dataRef: firebase.database.Reference | null = null;
+		let dataRef: FIREBASE_DATABASE_REFERENCE | null = null;
 		if (firebase) {
 			dataRef = firebase.database().ref(`/${currYear}/ContentData`);
 			if (dataRef) {
-				dataRef.on("value", (snap) => {
+				dataRef.on("value", (snap: any) => {
 					setContentData(snap.val() as ContentData);
 				});
 			}
@@ -158,41 +159,11 @@ const App: React.FC<AppProps> = ({ IEOREDGE, currYear, firebase, ContentEditor }
 					<div className={`${debugMode ? "app-content-dev" : "app-content-real"}
                         ${windowWidth < 600 ? "mobile" : ""}`}>
 						{/** Comment out this in final build */}
-						{pageTitle === "/Editor" &&
+						{pageTitle === "/Editor" && ContentEditor &&
 							<ContentEditor
 								contentData={contentData}
 								currYear={currYear}
 							/>}
-						{/******HARDCODED DESCRIPTION PAGE**********/}
-						{pageTitle !== "/Editor"
-							&& (pageTitle === "/Description") &&
-							<div className="main-temporary">
-								{pageTitle !== '/Description' &&
-									<div>
-										<h1 style={{ margin: "auto", textAlign: "center" }}>Immunosense: Detecting small molecules using a chemically-induced dimerization system</h1>
-
-										<h2 style={{ margin: "auto", textAlign: "center" }}>Abstract:</h2>
-										<p>
-											Although biosensors are commonly used to detect many different molecules of interest, they cannot effectively detect small hydrophobic molecules in biological systems. We propose combining chemically induced dimerization (CID), in which two proteins dimerize only in the presence of a ligand, with a traditional luciferase assay to create a biosensor that luminesces when the desired molecule is introduced. Using molecule-specific nanobodies, we can design the two CID binders to attach to a wide variety of small molecules, even those that are challenging for conventional biosensors to detect. Through its specificity and ability to bind to small or hydrophobic molecules, the CID system overcomes problems that other biosensors face. As a proof-of-concept, we implemented an in vivo CID biosensor to detect the presence of cannabidiol. With the nanobody CID system, we hope to introduce a novel biosensor that can detect a variety of important small molecules across research, biotechnology, and medicine.
-										</p>
-									</div>
-								}
-
-								<h1 style={{ margin: "auto", textAlign: "center" }}>Project Inspiration and Description</h1>
-								<p>
-									Our project focuses on developing technologies that help researchers to detect small molecules, which traditionally have been much more difficult to detect using biological assays than larger molecules. Our technologies revolve around chemically induced dimerization (CID), in which two proteins dimerize in the presence of a small molecule. This method has been previously used to control cell signaling, regulatory and metabolic pathways, and logic gates for biological computation in living mammalian cells. However, few naturally-occuring CID systems and their derivatives are currently available for research and therapeutic purposes. Creating a CID system with desired affinity and specificity for any given small molecule remains an unsolved problem for computational design and other protein engineering approaches. Solving it would open a wide range of possibilities in the development of diagnostic biosensors, high-precision therapeutics, and beyond.
-                                </p>
-								<p>
-									We are using a novel strategy to select CID binders from a vast and diverse combinatorial antibody library, and applying them towards the development of a biosensor. We will specifically be developing a biosensor using these antibodies to detect cannabidiol (CBD), a compound derived from the hemp plant which has been used to treat epilepsy, anxiety, and chronic pain, although more research is needed to verify its effectiveness. We are working to engineer this biosensor both as a proof of concept and as a way to help further research into CBD.
-                                </p>
-								<p>
-									We hope that the result of our project will benefit the scientific community by creating a generalizable bioengineered tool that can detect the presence of small molecules with a high degree of accuracy and efficiency, at a lower cost than other tools that have been traditionally used.
-                                </p>
-								<p>
-									This project was inspired by work in the Gu Lab at the University of Washington and their work dealing with the creation of a CID system. We wanted to take what we learned from last year, build upon it, and package everything in a consumer friendly device to detect CBD. Furthermore, since our team has had experience with CID devices from our 2018 project that dealt with detecting anchor binders for cholecalciferol and artemisinin.
-                                </p>
-							</div>}
-
 						{/*********HARDCODED MAIN PAGE*********** */}
 						{pageTitle !== "/Editor"
 							&& pageTitle === "" &&

src/components/ContentEditor/WidgetEditor/WidgetEditor.tsx

@@ -7,13 +7,14 @@ import equal from 'deep-equal';
 import { EnvironmentContext } from '../../../contexts/EnvironmentContext/EnvironmentContext';
 import { WidgetLiveEdit } from '../WidgetLiveEdit/WidgetLiveEdit';
 import { FailureWidget, FailureEditWidget } from './FailureWidget/FailureWidget';
+import { FIREBASE_USER } from '../../../index';
 
 type WidgetEditorProps = {
 	content: ContentSingularData | undefined,
 	contentHash: string,
 	currYear: number,
 	pageToEdit: string,
-	user: firebase.User | null,
+	user: FIREBASE_USER | null,
 	deleteWidget: (contentHash: string) => void
 }
 
@@ -72,7 +73,8 @@ export const WidgetEditor: React.FC<WidgetEditorProps> = ({ content, contentHash
 					editing={false}
 					setEditing={setEditing}
 					editedContent={editedContent}
-					deleteWidget={deleteWidget} />
+					deleteWidget={deleteWidget}
+					firebase={firebase} />
 			</div>
 		</>}
 
@@ -122,7 +124,8 @@ export const WidgetEditor: React.FC<WidgetEditorProps> = ({ content, contentHash
 					editing={true}
 					setEditing={setEditing}
 					editedContent={editedContent}
-					deleteWidget={deleteWidget} />
+					deleteWidget={deleteWidget}
+					firebase={firebase} />
 			</div>
 		</>}
 	</div>

src/components/ContentEditor/WidgetLiveEdit/WidgetLiveEdit.tsx

@@ -2,24 +2,25 @@ import React, { useState, useEffect } from 'react';
 import { ContentSingularData } from '../../_data/ContentSingularData';
 import Button from '@material-ui/core/Button';
 import { HistoryTypes } from '../../_debug/EditorHistory';
-import firebase from 'firebase';
 import './WidgetLiveEdit.css';
 import {
-	LIVE_EDIT_TIMETOUT,
+	LIVE_EDIT_TIMEOUT,
 	LIVE_EDIT_REFRESH,
 	CURRENTLY_EDITED_BY_YOU_MESSAGE,
 	SAFE_MESSAGE
 } from '../../_data/Constants';
+import { FIREBASE, FIREBASE_DATABASE_REFERENCE, FIREBASE_USER } from '../../../index';
 
 type WidgetLiveEditProps = {
 	contentHash: string,
 	currYear: number,
 	pageToEdit: string,
-	user: firebase.User | null
+	user: FIREBASE_USER | null
 	editing: boolean
 	setEditing: any,
 	editedContent: ContentSingularData,
-	deleteWidget: (contentHash: string) => void
+	deleteWidget: (contentHash: string) => void,
+	firebase: FIREBASE
 };
 
 enum EditingState {
@@ -35,13 +36,12 @@ enum EditingState {
  */
 
 export const WidgetLiveEdit: React.FC<WidgetLiveEditProps> = ({
-	contentHash, currYear, pageToEdit, user, editing, setEditing, editedContent, deleteWidget
+	contentHash, currYear, pageToEdit, user, editing, setEditing, editedContent, deleteWidget, firebase
 }) => {
-
 	let [editingState, setEditingState] = useState<EditingState>(EditingState.SAFE);
 	let [message, setMessage] = useState<string>(SAFE_MESSAGE);
 
-	let widgetRef: firebase.database.Reference = firebase.database().ref(`${currYear}/LiveEditHistory/${pageToEdit}/${contentHash}`);
+	let widgetRef: FIREBASE_DATABASE_REFERENCE = firebase.database().ref(`${currYear}/LiveEditHistory/${pageToEdit}/${contentHash}`);
 
 	// update firebase with the current timestamp
 	const updateOnce = () => {
@@ -66,13 +66,13 @@ export const WidgetLiveEdit: React.FC<WidgetLiveEditProps> = ({
 
 	useEffect(() => {
 		// set up listener to firebase, re-render when updated
-		widgetRef.on('value', (snapshot) => {
+		widgetRef.on('value', (snapshot: any) => {
 			let record = snapshot.val();
 			if (record) {
 				let diff: number = (Date.now() - record.timestamp) / 1000;
 				let saved: boolean = record.saved;
 
-				if (!saved && diff < LIVE_EDIT_TIMETOUT) {
+				if (!saved && diff < LIVE_EDIT_TIMEOUT) {
 					// not saved and not yet timed out
 					let editorName = record.editor;
 					if (user && editorName === user.email) {

src/components/ContentMapping/ContentMapping.ts

@@ -22,8 +22,6 @@ import { WYSIWYGEditor } from '../ContentWidgets/WYSIWYG/WYSIWYGEditor';
 import { WYSIWYGWidget } from '../ContentWidgets/WYSIWYG/WYSIWYGWidget';
 import { Accordion } from '../ContentWidgets/Accordion/Accordion';
 import { AccordionEditor } from '../ContentWidgets/Accordion/AccordionEditor';
-import { TeamPage } from '../ContentWidgets/TeamPage/TeamPage';
-import { TeamPageEditor } from '../ContentWidgets/TeamPage/TeamPageEditor';
 import { ImageCarousel } from '../ContentWidgets/ImageCarousel.tsx/ImageCarousel';
 import { ImageCarouselEditor } from '../ContentWidgets/ImageCarousel.tsx/ImageCarouselEditor';
 import { ExampleImage } from '../ContentWidgets/ExampleImage/ExampleImage';

src/components/ContentView/ContentView.css

@@ -1,79 +1,82 @@
-
-
 .sidebar-content-view {
-    display: flex;
-    justify-content: space-between;
-    padding: 5rem;
+	display: flex;
+	justify-content: space-between;
+	padding: 5%;
+	max-width: 1920px;
+	margin: auto;
 }
 
 .sidebar-content-view #content-view-container {
-    justify-self: center;
-    align-self: center;
-    flex-grow: 1;
+	justify-self: center;
+	align-self: center;
+	flex-grow: 1;
 }
 
 #sidebar-progress {
-    width: 5px;
-    background-color: darkgrey;
-    border-radius: 50px;
-    height: 100%;
+	width: 5px;
+	background-color: darkgrey;
+	border-radius: 50px;
+	height: 100%;
 }
 
-#sidebar-progress > span {
-    background-color: #420DAB;
-    display: block;
-    border-radius: 50px;
+#sidebar-progress>span {
+	background-color: #420DAB;
+	display: block;
+	border-radius: 50px;
 }
 
 .content-view-container-w-sidebar {
-    width: 50%;
-    margin-left: 5px;
+	width: 50%;
+	margin-left: 5px;
 }
 
 #sidebar-container {
-    position: sticky;
-    top: 20%;
-    height: 100px;
-    display: flex;
-    justify-content: space-between center;
-    align-items: center;
-    margin-right: 3rem;
-    width: 18%;
+	position: sticky;
+	top: 20%;
+	height: 100px;
+	display: flex;
+	justify-content: space-between center;
+	align-items: center;
+	width: 19%;
 }
 
+/**
+ TODO: This is voodoo magic wtf
+*/
+
 #sidebar-container {
-    display: none;
+	display: none;
 }
 
 @media (min-width: 600px) {
-    #sidebar-container {
-        display: flex;
-    }
+	#sidebar-container {
+		display: flex;
+	}
 }
 
 #sidebar {
-    list-style: none;
-    width: 90%;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+	list-style: none;
+	width: 90%;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
 }
 
 #sidebar li {
-    margin-bottom: 5px;
-    padding: 2px;
-    cursor: pointer;
-    width: 90%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-weight: bold;
-    text-align: right;
+	margin-bottom: 5px;
+	padding: 2px;
+	cursor: pointer;
+	width: 90%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	font-weight: bold;
+	text-align: right;
 }
 
 li.nonactive-section {
-    color: darkgrey;
+	color: darkgrey;
 }
 
 li.active-section {
-    color: black;
+	color: black;
 }

src/components/ContentView/ContentView.tsx

@@ -76,7 +76,7 @@ export const ContentView: React.FC<ContentViewProps> = ({ contentData, pageTitle
 							ContentWidget = ContentMapping[content!.type].widget;
 						}
 
-						return content!.type === "BANNER" ? null : <Fade><div id={contentHash} key={contentHash}>
+						return content!.type === "BANNER" ? null : <Fade key={contentHash}><div id={contentHash}>
 							<ContentWidget {...content} />
 						</div></Fade>
 					})

src/components/ContentWidgets/Header/Header.tsx

@@ -8,24 +8,13 @@ import { ContentSingularData } from '../../_data/ContentSingularData';
  * Elisa Truong
  * September 1, 2019
  */
-export const Header: React.FC<ContentSingularData> = ({ header_content, header_priority }) => {
-	if (!header_content || !header_priority) {
+export const Header: React.FC<ContentSingularData> = ({ header_content }) => {
+	if (!header_content) {
 		return <></>;
 	}
 
-	let header;
-	if (header_priority === 1) {
-		header = <h1>{header_content}</h1>;
-	} else if (header_priority === 2) {
-		header = <h2>{header_content}</h2>;
-	} else if (header_priority === 3) {
-		header = <h3>{header_content}</h3>;
-	} else if (header_priority === 4) {
-		header = <h4>{header_content}</h4>;
-	}
-
 	return <div className="wi-content-wrapper">
-		{header}
+		<h1>{header_content}</h1>
 		<div className="header-sep"></div>
 	</div>
 }

src/components/ContentWidgets/PdfViewer/PdfViewer.tsx

@@ -23,9 +23,11 @@ export const PdfViewer: React.FC<ContentSingularData> = ({
 		height: pdfViewer_pdfHeightPixel + "px"
 	};
 
-	return <embed
-		className="pdf-viewer-pdf wi-content-wrapper"
-		src={pdfViewer_pdfLink}
-		type="application/pdf"
-		style={pdfStyle} />
+	return <div className="centered">
+		<embed
+			className="pdf-viewer-pdf wi-content-wrapper"
+			src={pdfViewer_pdfLink}
+			type="application/pdf"
+			style={pdfStyle} />
+	</div>
 }

src/components/ContentWidgets/SideBar/SideBar.tsx

@@ -93,8 +93,12 @@ export const SideBar: React.FC<SideBarProps> = ({
 		}
 	});
 
+	let totalSections = 0;
 	let generateSectionLinks = contentData[pageTitle].contentOrder!!.map((content) => {
 		let widgetInfo = contentData[pageTitle].content![content]
+		if (widgetInfo!.type === "HEADER") {
+			totalSections++;
+		}
 		return widgetInfo!.type === "HEADER" ? <li id={content + "-link"}
 			key={content}
 			className={content === currentActiveSection.sectionID ? "active-section" : "nonactive-section"}
@@ -105,7 +109,7 @@ export const SideBar: React.FC<SideBarProps> = ({
 
 	let progress = currentActiveSection ?
 		Math.round((currentActiveSection.index + 1) / currentActiveSection.totalSections * 100.0) : 0;
-	return <div id="sidebar-container" style={{ height: (contentData[pageTitle].contentOrder!.length * 12) + "px" }}>
+	return <div id="sidebar-container" style={{ height: (totalSections * 27) + "px" }}>
 		<ul id="sidebar">
 			{contentData[pageTitle].content ? generateSectionLinks : null}
 		</ul>