chore: update deps, move pages to pages/main

Signed-off-by: Muthu Kumar <muthukumar@thefeathers.in>

package.json

@@ -13,21 +13,22 @@
 		]
 	},
 	"dependencies": {
-		"@emotion/css": "^11.5.0",
+		"@emotion/css": "^11.9.0",
-		"date-fns": "^2.25.0",
+		"date-fns": "^2.28.0",
-		"framer-motion": "^4.1.17",
+		"framer-motion": "^6.3.15",
-		"react": "^17.0.2",
+		"react": "^18.2.0",
-		"react-dom": "^17.0.2",
+		"react-dom": "^18.2.0",
-		"react-router-dom": "^5.2.0"
+		"react-router-dom": "^6.3.0"
 	},
 	"devDependencies": {
-		"@svgr/rollup": "^5.5.0",
+		"@svgr/rollup": "^6.2.1",
-		"@types/react": "^17.0.14",
+		"@types/react": "^18.0.14",
-		"@types/react-dom": "^17.0.9",
+		"@types/react-dom": "^18.0.5",
-		"@types/react-router-dom": "^5.1.8",
+		"@types/react-router-dom": "^5.3.3",
-		"@vitejs/plugin-react-refresh": "^1.3.5",
+		"@vitejs/plugin-react": "^1.3.2",
-		"react-scripts": "4.0.0",
+		"@vitejs/plugin-react-refresh": "^1.3.6",
-		"typescript": "^4.3.5",
+		"react-scripts": "5.0.1",
-		"vite": "^2.4.3"
+		"typescript": "^4.7.4",
+		"vite": "^2.9.12"
 	}
 }

src/App.tsx

@@ -1,28 +0,0 @@
-import React from "react";
-import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
-
-import Home from "./pages/Home";
-import Exp from "./pages/Exp";
-import Projects from "./pages/Projects";
-import Contact from "./pages/Contact";
-import Live from "./pages/Live";
-
-import NotFound from "./pages/404";
-
-function App() {
-	return (
-		<Router>
-			<Switch>
-				<Route exact path="/" component={Home} />
-				<Route exact path="/experience" component={Exp} />
-				<Route exact path="/projects" component={Projects} />
-				<Route exact path="/contact" component={Contact} />
-				<Route exact path="/live" component={Live} />
-
-				<Route component={NotFound} />
-			</Switch>
-		</Router>
-	);
-}
-
-export default App;

src/index.tsx

@@ -1,11 +1,31 @@
 import React from "react";
+
 import ReactDOM from "react-dom";
 import "./index.css";
-import App from "./App";
+
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+
+import Home from "./pages/main/Home";
+import Exp from "./pages/main/Exp";
+import Projects from "./pages/main/Projects";
+import Contact from "./pages/main/Contact";
+import Live from "./pages/main/Live";
+
+import NotFound from "./pages/main/404";
 
 ReactDOM.render(
 	<React.StrictMode>
-		<App />
+		<Router>
+			<Routes>
+				<Route path="/" element={<Home />} />
+				<Route path="/experience" element={<Exp />} />
+				<Route path="/projects" element={<Projects />} />
+				<Route path="/contact" element={<Contact />} />
+				<Route path="/live" element={<Live />} />
+
+				<Route path="/*" element={NotFound} />
+			</Routes>
+		</Router>
 	</React.StrictMode>,
 	document.getElementById("root"),
 );

src/pages/Live.tsx

@@ -1,23 +0,0 @@
-import React, { useEffect, useState } from "react";
-import Container from "../components/Container";
-import Timeline from "../components/Timeline";
-
-const Live: React.FunctionComponent = () => {
-	const [tl, setTl] = useState([]);
-
-	useEffect(() => {
-		fetch("/data/timeline.json")
-			.then(res => res.json())
-			.then(setTl)
-			.catch(() => {});
-	}, []);
-
-	return (
-		<Container hideNav>
-			<h1>MKRhere</h1>
-			<Timeline contents={tl} />
-		</Container>
-	);
-};
-
-export default Live;

src/pages/404.tsx → src/pages/main/404.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Link } from "react-router-dom";
-import Container from "../components/Container";
+import Container from "../../components/Container";
 
 function Home() {
 	return (

src/pages/Contact.tsx → src/pages/main/Contact.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { css } from "@emotion/css";
 import { useEffect, useState } from "react";
-import Container from "../components/Container";
+import Container from "../../components/Container";
 
 const A = css`
 	text-decoration: none;

src/pages/Exp.tsx → src/pages/main/Exp.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { css } from "@emotion/css";
-import Container from "../components/Container";
+import Container from "../../components/Container";
 
 const exp = [
 	{ title: "BlueCube", location: "Chennai", position: "Architectural Intern", year: "2015" },

src/pages/Home.tsx → src/pages/main/Home.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import Container from "../components/Container";
+import Container from "../../components/Container";
-import Dashed from "../components/Dashed";
+import Dashed from "../../components/Dashed";
 
 const Home: React.FunctionComponent = () => {
 	return (

src/pages/main/Live.tsx

@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from "react";
+import Container from "../../components/Container";
+import Timeline, { TimelineUnits } from "../../components/Timeline";
+
+type LiveInfo =
+	| {
+			live: false;
+	  }
+	| {
+			live: true;
+			videoID: string;
+	  };
+
+const Live: React.FunctionComponent = () => {
+	const [tl, setTl] = useState<TimelineUnits>([]);
+	const [liveInfo, setLiveInfo] = useState<LiveInfo>({ live: false });
+
+	useEffect(() => {
+		fetch("/data/timeline.json")
+			.then(res => res.json())
+			.then(setTl)
+			.catch(() => {});
+
+		fetch("https://api.mkr.pw/live")
+			.then(res => res.json())
+			.then(setLiveInfo)
+			.catch(() => {});
+	}, []);
+
+	return (
+		<Container hideNav>
+			<h1>MKRhere</h1>
+			<Timeline contents={tl} />
+		</Container>
+	);
+};
+
+export default Live;

src/pages/Projects.tsx → src/pages/main/Projects.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { css } from "@emotion/css";
-import Container from "../components/Container";
+import Container from "../../components/Container";
 
 const exp = [
 	{

vite.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from "vite";
-import reactRefresh from "@vitejs/plugin-react-refresh";
+import react from "@vitejs/plugin-react";
 import svgr from "@svgr/rollup";
 
 // https://vitejs.dev/config/
@@ -7,14 +7,5 @@ export default defineConfig({
 	server: {
 		port: 12000,
 	},
-	plugins: [
+	plugins: [react(), Object.assign(svgr({ ref: true, svgo: false }), { enforce: "pre" } as const)],
-		reactRefresh(),
-		Object.assign(
-			svgr({
-				ref: true,
-				svgo: false,
-			}),
-			{ enforce: "pre" } as const,
-		),
-	],
 });