Merge branch 'student-search-iitk-master'

.gitignore

@@ -36,7 +36,7 @@ yarn-error.log*
 next-env.d.ts
 
 #next-pwa
-/public/sw.js
+/public/sw.js*
 /public/workbox*
 
 #scripts

components/Overlay.tsx

@@ -1,7 +1,7 @@
 import Modal from "@mui/material/Modal";
 import React, {useState, useEffect} from "react";
 import FadeAnim from "./fadeAnim";
-
+import GuestFooter from "./Treefooter";
 interface OverlayProps {
 	clearOverlay: Function;
 	children?: any | any[];

components/Treefooter.tsx

@@ -0,0 +1,43 @@
+import Paper from "@mui/material/Paper";
+import Container from "@mui/material/Container";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+
+export default function GuestFooter() {
+    return (
+        <Paper sx={{marginTop: 'calc(10% + 60px)',
+        position: 'fixed',
+        bottom: 0,
+        width: '100%'
+        }} component="footer" square variant="outlined">
+        <Container maxWidth="lg">
+          {/* <Box
+            sx={{
+              flexGrow: 1,
+              justifyContent: "center",
+              display: "flex",
+              my:1
+            }}
+          >
+              
+          </Box> */}
+
+          <Box
+            sx={{
+              flexGrow: 1,
+              justifyContent: "center",
+              display: "flex",
+              mb: 2,
+            }}
+          >
+            <div>
+                <img src="/cslogo.png" width={15} height={15} alt="Logo" />
+            </div>
+            <Typography variant="caption">
+                Family tree data provided by <a href="https://www.iitk.ac.in/counsel/">Counselling Service IITK</a>
+            </Typography>
+          </Box>
+        </Container>
+      </Paper>
+    );
+  }

components/fadeAnim.tsx

@@ -9,6 +9,9 @@ interface FadeAnimProps {
 }
 
 const  FadeAnim = React.forwardRef((props: FadeAnimProps, ref) => {
+	console.log("Logging children");
+	console.log(props.children);
+	console.log("logged children");
 	return (
 		<TransitionGroup 
 			style={props.style} 

components/treeSCard.tsx

@@ -1,8 +1,7 @@
+import React from "react";
 import SCard from "../components/SCard";
-import Card from "@mui/material/Card"
-import Button from "@mui/material/Button";
-import React, {useState} from "react";
-import {Student} from "./commontypes";
+import Card from "@mui/material/Card";
+import { Student } from "./commontypes";
 
 interface TreeCardProps {
 	baapu?: Student;
@@ -15,51 +14,51 @@ interface TreeCardProps {
 function TreeCard(props: TreeCardProps) {
 	return (
 		<div className="tree-view">
-			{ props.baapu != undefined
+			{props.baapu != undefined
 				? <SCard
 					pointer={true}
 					compact={"ultra"}
 					data={props.baapu}
-					onClick={()=>{
+					onClick={() => {
+						//smoothly scroll to top
+						document.getElementsByClassName("MuiModal-root")[0].scrollTo(0,0);
 						props.displayCard(props.baapu);
 					}}
 				/>
 				: <Card>Not Available :(</Card>
 			}
-			<SCard 
+			<SCard
 				pointer={true}
 				compact={true}
 				data={props.data}
-				onClick={()=>{
+				onClick={() => {
 					props.displayCard(props.data);
 				}}
 			/>
-			<div
-				className="bacchas"
-			>
-			{props.bacchas.length > 0 
-			?props.bacchas.map((el) => //this is fine because bacchas is *always* an array, no matter what - if no bacchas then it is an empty array - doQuery in App.js will simply return an empty array
-				<SCard
-					pointer={true}
-					compact={"ultra"}
-					data={el}
-					key={el.i}
-					onClick={(e)=>{
-						//smoothly scroll to top
-						document.getElementsByClassName("MuiModal-root")[0].scrollTo(0,0);
-// 						let start = null;
-// 						let scroll = window
-// 						window.requestAnimationFrame(function step(currentTime) {
-// 							if (!start) start = currentTime;
-// 							
-// 						});
-						//actually show the card
-						props.displayCard(el);
-					}}
-				/>
-			)
-			: ""
-			}
+			<div className="bacchas">
+				{props.bacchas.length > 0
+					? props.bacchas.map((el) =>
+						<SCard
+							pointer={true}
+							compact={"ultra"}
+							data={el}
+							key={el.i}
+							onClick={(e)=>{
+									//smoothly scroll to top
+									document.getElementsByClassName("MuiModal-root")[0].scrollTo(0,0);
+// 										let start = null;
+// 										let scroll = window
+// 										window.requestAnimationFrame(function step(currentTime) {
+// 											if (!start) start = currentTime;
+// 											
+// 										});
+// 										actually show the card
+									props.displayCard(el);
+								}}
+						/>
+					)
+					: ""
+				}
 			</div>
 		</div>
 	);

pages/index.tsx

@@ -13,6 +13,7 @@ import {DarkModeSharp, LightModeRounded, HelpOutlineRounded, MailOutlineRounded}
 import TreeCard from "../components/treeSCard";
 import SCard from "../components/SCard";
 import {Student as StudentType, Query as QueryType, Options as OptType} from "../components/commontypes";
+import GuestFooter from "../components/Treefooter";
 
 //start shared search worker
 if (!(typeof window === "undefined") && window.Worker) {//only on the client, TODO: find better method - do when dealing w/ SSG
@@ -57,14 +58,19 @@ export default function Home(props: Object) {
 		if (event.data[0] == "ft") {
 // 			document.body.style.overflow = "hidden"; //hotfix
 			let [baapu, student, bacchas] = event.data[1];
-			setCurr(<TreeCard
+			setCurr([
+			<TreeCard
 				key="open"
 				data={student}
 				baapu={baapu /*TreeCard'll handle undefined*/}
 				bacchas={bacchas}
 				displayCard={displayCard}
 				clearOverlay={clearOverlay}
-			/>);
+			/>,
+			<div className="footer-absolute" key="footer">
+				<GuestFooter />
+			</div>
+			]);
 		}
 
 	}
@@ -170,22 +176,22 @@ export default function Home(props: Object) {
 
 	const displayElement = (element: any) => {
 		clearOverlay();
-		setCurr(element);
+		setCurr([element]);
 // 		document.body.style.overflow = "hidden"; //hotfix
 	}
 
 	const displayCard = (student: StudentType) =>{
 		clearOverlay();
 // 		document.body.style.overflow = "hidden"; //hotfix
-		setCurr(<SCard
+		setCurr([<SCard
 			compact={false}
 			data={student}
 			key="closed"
 		>
 		<Button
 			onClick={() => {displayTree(student);}}
 		>Open Family Tree</Button>
-		</SCard>);
+		</SCard>]);
 	}
 
 	const displayTree = (student: StudentType) => {

styles/styles.css

@@ -160,8 +160,8 @@ a {
 	display:flex;
 	flex-direction:column;
 	justify-content:flex-start;
-	margin-top:auto;
 	align-items:center;
+	margin-bottom: 40px;
 }
 
 .tree-view > * {
@@ -284,4 +284,24 @@ display:flex;
 	100% {
 		transform: rotate(360deg);
 	}
+}
+
+.footer-absolute {
+	position: fixed;
+    bottom: 0;
+	height: fit-content;
+	left: 0;
+	/* for preventing transitions from affecting it */
+	transform: none !important;
+	margin: none !important;
+    /* right: 0; This will position the footer to the right */
+}
+
+.tree-container {
+    display: flex;
+	flex-direction: column;
+	justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+	width: 100%;
 }