Refactored AboutMe sub-components Components out of the main file
parent
cc1a0a124b
commit
c4c185ec5a
@ -1,264 +0,0 @@
|
||||
import "./AboutMe.scss";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Tooltip } from "antd";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import axios from "axios";
|
||||
|
||||
interface NowPlayingData {
|
||||
introduction: string;
|
||||
lastfm: {
|
||||
artist: string;
|
||||
track: string;
|
||||
playing: boolean;
|
||||
url: string | undefined;
|
||||
};
|
||||
}
|
||||
|
||||
function LastFmLi() {
|
||||
const [nowPlayingData, setNowPlayingData] = useState<NowPlayingData>({
|
||||
introduction: "",
|
||||
lastfm: {
|
||||
artist: "nobody",
|
||||
playing: false,
|
||||
track: "nothing",
|
||||
url: undefined,
|
||||
},
|
||||
});
|
||||
|
||||
async function updateNowPlaying() {
|
||||
try {
|
||||
const songRequestData = await axios.get("https://api.jakecover.me");
|
||||
|
||||
setNowPlayingData(songRequestData.data);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
updateNowPlaying();
|
||||
|
||||
const interval = setInterval(updateNowPlaying, 10000);
|
||||
|
||||
return () => {
|
||||
clearInterval(interval);
|
||||
};
|
||||
}, []);
|
||||
if (nowPlayingData.lastfm.playing) {
|
||||
return (
|
||||
<li>
|
||||
<a
|
||||
href={nowPlayingData.lastfm.url}
|
||||
target={"_blank"}
|
||||
rel="noreferrer"
|
||||
style={{ color: "inherit", textDecoration: "inherit" }}
|
||||
>
|
||||
listening to {nowPlayingData.lastfm.track} by{" "}
|
||||
{nowPlayingData.lastfm.artist}
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
return <li>not listening to anything right now.</li>;
|
||||
}
|
||||
|
||||
function Age() {
|
||||
// Accounts for leap years and stuff
|
||||
function milliseconds_year() {
|
||||
const dateObj = new Date();
|
||||
const dateInit = Math.round(
|
||||
new Date(dateObj.getFullYear(), 0, 1).getTime()
|
||||
);
|
||||
const dateEnd = Math.round(
|
||||
new Date(dateObj.getFullYear(), 11, 31, 23, 59, 59, 999).getTime()
|
||||
);
|
||||
return dateEnd - dateInit;
|
||||
}
|
||||
|
||||
function searchSternBorcotTree(
|
||||
target: number,
|
||||
left_n: number,
|
||||
left_d: number,
|
||||
right_n: number,
|
||||
right_d: number,
|
||||
count: number = 0
|
||||
): [number, number] {
|
||||
count++;
|
||||
const center_n: number = left_n + right_n;
|
||||
const center_d: number = left_d + right_d;
|
||||
// Check to see if we've gone too deep
|
||||
if (count > 25) return [center_n, center_d];
|
||||
// Check to see if we're close enough to the target
|
||||
if (Math.abs(target - center_n / center_d) > 0.001) {
|
||||
// Look right down the tree
|
||||
if (target > center_n / center_d)
|
||||
return searchSternBorcotTree(
|
||||
target,
|
||||
center_n,
|
||||
center_d,
|
||||
right_n,
|
||||
right_d,
|
||||
count
|
||||
);
|
||||
// Ok now look left
|
||||
return searchSternBorcotTree(
|
||||
target,
|
||||
left_n,
|
||||
left_d,
|
||||
center_n,
|
||||
center_d,
|
||||
count
|
||||
);
|
||||
}
|
||||
return [center_n, center_d];
|
||||
}
|
||||
|
||||
function CalcAge() {
|
||||
let ageMs = new Date().getTime() - 1021004428000;
|
||||
const yearMs = milliseconds_year();
|
||||
const ageYearsComponent = Math.floor(ageMs / yearMs);
|
||||
const ageSecondsComponent = Math.floor((ageMs % yearMs) / 1000);
|
||||
const [target_n, target_d] = searchSternBorcotTree(
|
||||
ageSecondsComponent / (yearMs / 1000),
|
||||
0,
|
||||
1,
|
||||
1,
|
||||
1
|
||||
);
|
||||
return `${ageYearsComponent} and ${target_n}/${target_d}`;
|
||||
}
|
||||
|
||||
const millisecondsYear = milliseconds_year();
|
||||
const time = new Date().getTime();
|
||||
// eslint-disable-next-line
|
||||
const memoizedCallbackCalcAge = useCallback(CalcAge, [
|
||||
millisecondsYear,
|
||||
time,
|
||||
]);
|
||||
|
||||
const [age, setAge] = useState(memoizedCallbackCalcAge());
|
||||
|
||||
function UpdateAge() {
|
||||
setAge(memoizedCallbackCalcAge());
|
||||
}
|
||||
|
||||
const memoizedCallbackUpdateAge = useCallback(UpdateAge, [
|
||||
memoizedCallbackCalcAge,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
memoizedCallbackUpdateAge();
|
||||
|
||||
const interval = setInterval(memoizedCallbackUpdateAge, 5000);
|
||||
|
||||
return () => {
|
||||
clearInterval(interval);
|
||||
};
|
||||
}, [memoizedCallbackUpdateAge]);
|
||||
|
||||
return <li>{age} years old</li>;
|
||||
}
|
||||
|
||||
export function AboutMe() {
|
||||
function EmailHandler() {
|
||||
const email = "Y29udGFjdEBqYWtlY292ZXIubWU=";
|
||||
window.prompt("Thanks for being a human! Here's my email:", atob(email));
|
||||
}
|
||||
|
||||
return (
|
||||
<div id={"about-me-parent"}>
|
||||
<div id={"about-me"} className={"about-me-card"}>
|
||||
<h1> Hi! I'm Jake!</h1>
|
||||
|
||||
<div id={"info-parent"}>
|
||||
<div id={"specific-info"}>
|
||||
<h2> A bit about me:</h2>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<b>Name</b>: Jake Cover
|
||||
</li>
|
||||
<li><b>Occupation:</b> Student</li>
|
||||
<li><b>Location:</b> Southern California</li>
|
||||
<li>
|
||||
<b>Projects:</b>{" "}
|
||||
<button
|
||||
onClick={() =>
|
||||
document.getElementById("project-header")?.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "start",
|
||||
})
|
||||
}
|
||||
>
|
||||
Down there
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<b>Resume:</b> <Link to={"/resume"}>Over here</Link>
|
||||
</li>
|
||||
<li>
|
||||
<b>Find Me:</b>
|
||||
<ul>
|
||||
<li>
|
||||
Email: <button onClick={EmailHandler}>Click This</button>
|
||||
</li>
|
||||
<li>
|
||||
Twitter:{" "}
|
||||
<Tooltip title={":("}>
|
||||
<a
|
||||
href={"https://github.com/JakeCover"}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
@cobular_
|
||||
</a>
|
||||
</Tooltip>
|
||||
</li>
|
||||
<li>
|
||||
GitHub:{" "}
|
||||
<a
|
||||
href={"https://github.com/JakeCover"}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
JakeCover
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
Telegram:{" "}
|
||||
<a
|
||||
href={"https://t.me/cobular"}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
@cobular
|
||||
</a>
|
||||
</li>
|
||||
<li>Elsewhere: Probably @cobular</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id={"fun-info"}>
|
||||
<h2>I'm:</h2>
|
||||
<ul>
|
||||
<Age />
|
||||
|
||||
<LastFmLi />
|
||||
<Tooltip
|
||||
title={
|
||||
"Hey! This part is still a work in progress, check back in a bit to see if it's working!"
|
||||
}
|
||||
>
|
||||
<li>
|
||||
doing (general stuff - in class, projects, sleeping, games)
|
||||
</li>
|
||||
</Tooltip>
|
||||
<li>rather colorblind</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,113 @@
|
||||
import "./AboutMe.scss";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Tooltip } from "antd";
|
||||
import { Age } from "./Age";
|
||||
import { LastFmLi } from "./LastFmLi";
|
||||
|
||||
|
||||
export function AboutMe() {
|
||||
function EmailHandler() {
|
||||
const email = "Y29udGFjdEBqYWtlY292ZXIubWU=";
|
||||
window.prompt("Thanks for being a human! Here's my email:", atob(email));
|
||||
}
|
||||
|
||||
return (
|
||||
<div id={"about-me-parent"}>
|
||||
<div id={"about-me"} className={"about-me-card"}>
|
||||
<h1> Hi! I'm Jake!</h1>
|
||||
|
||||
<div id={"info-parent"}>
|
||||
<div id={"specific-info"}>
|
||||
<h2> A bit about me:</h2>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<b>Name</b>: Jake Cover
|
||||
</li>
|
||||
<li>
|
||||
<b>Occupation:</b> Student
|
||||
</li>
|
||||
<li>
|
||||
<b>Location:</b> Southern California
|
||||
</li>
|
||||
<li>
|
||||
<b>Projects:</b>{" "}
|
||||
<button
|
||||
onClick={() =>
|
||||
document.getElementById("project-header")?.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "start",
|
||||
})
|
||||
}
|
||||
>
|
||||
Down there
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<b>Resume:</b> <Link to={"/resume"}>Over here</Link>
|
||||
</li>
|
||||
<li>
|
||||
<b>Find Me:</b>
|
||||
<ul>
|
||||
<li>
|
||||
Email: <button onClick={EmailHandler}>Click This</button>
|
||||
</li>
|
||||
<li>
|
||||
Twitter:{" "}
|
||||
<Tooltip title={":("}>
|
||||
<a
|
||||
href={"https://github.com/JakeCover"}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
@cobular_
|
||||
</a>
|
||||
</Tooltip>
|
||||
</li>
|
||||
<li>
|
||||
GitHub:{" "}
|
||||
<a
|
||||
href={"https://github.com/JakeCover"}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
JakeCover
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
Telegram:{" "}
|
||||
<a
|
||||
href={"https://t.me/cobular"}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
@cobular
|
||||
</a>
|
||||
</li>
|
||||
<li>Elsewhere: Probably @cobular</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id={"fun-info"}>
|
||||
<h2>I'm:</h2>
|
||||
<ul>
|
||||
<Age />
|
||||
<LastFmLi />
|
||||
<Tooltip
|
||||
title={
|
||||
"Hey! This part is still a work in progress, check back in a bit to see if it's working!"
|
||||
}
|
||||
>
|
||||
<li>
|
||||
doing (general stuff - in class, projects, sleeping, games)
|
||||
</li>
|
||||
</Tooltip>
|
||||
<li>rather colorblind</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,98 @@
|
||||
import {useCallback, useEffect, useState} from "react";
|
||||
|
||||
export function Age() {
|
||||
// Accounts for leap years and stuff
|
||||
function milliseconds_year() {
|
||||
const dateObj = new Date();
|
||||
const dateInit = Math.round(
|
||||
new Date(dateObj.getFullYear(), 0, 1).getTime()
|
||||
);
|
||||
const dateEnd = Math.round(
|
||||
new Date(dateObj.getFullYear(), 11, 31, 23, 59, 59, 999).getTime()
|
||||
);
|
||||
return dateEnd - dateInit;
|
||||
}
|
||||
|
||||
function searchSternBorcotTree(
|
||||
target: number,
|
||||
left_n: number,
|
||||
left_d: number,
|
||||
right_n: number,
|
||||
right_d: number,
|
||||
count: number = 0
|
||||
): [number, number] {
|
||||
count++;
|
||||
const center_n: number = left_n + right_n;
|
||||
const center_d: number = left_d + right_d;
|
||||
// Check to see if we've gone too deep
|
||||
if (count > 25) return [center_n, center_d];
|
||||
// Check to see if we're close enough to the target
|
||||
if (Math.abs(target - center_n / center_d) > 0.001) {
|
||||
// Look right down the tree
|
||||
if (target > center_n / center_d)
|
||||
return searchSternBorcotTree(
|
||||
target,
|
||||
center_n,
|
||||
center_d,
|
||||
right_n,
|
||||
right_d,
|
||||
count
|
||||
);
|
||||
// Ok now look left
|
||||
return searchSternBorcotTree(
|
||||
target,
|
||||
left_n,
|
||||
left_d,
|
||||
center_n,
|
||||
center_d,
|
||||
count
|
||||
);
|
||||
}
|
||||
return [center_n, center_d];
|
||||
}
|
||||
|
||||
function CalcAge() {
|
||||
let ageMs = new Date().getTime() - 1021004428000;
|
||||
const yearMs = milliseconds_year();
|
||||
const ageYearsComponent = Math.floor(ageMs / yearMs);
|
||||
const ageSecondsComponent = Math.floor((ageMs % yearMs) / 1000);
|
||||
const [target_n, target_d] = searchSternBorcotTree(
|
||||
ageSecondsComponent / (yearMs / 1000),
|
||||
0,
|
||||
1,
|
||||
1,
|
||||
1
|
||||
);
|
||||
return `${ageYearsComponent} and ${target_n}/${target_d}`;
|
||||
}
|
||||
|
||||
const millisecondsYear = milliseconds_year();
|
||||
const time = new Date().getTime();
|
||||
// eslint-disable-next-line
|
||||
const memoizedCallbackCalcAge = useCallback(CalcAge, [
|
||||
millisecondsYear,
|
||||
time,
|
||||
]);
|
||||
|
||||
const [age, setAge] = useState(memoizedCallbackCalcAge());
|
||||
|
||||
function UpdateAge() {
|
||||
setAge(memoizedCallbackCalcAge());
|
||||
}
|
||||
|
||||
const memoizedCallbackUpdateAge = useCallback(UpdateAge, [
|
||||
memoizedCallbackCalcAge,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
memoizedCallbackUpdateAge();
|
||||
|
||||
const interval = setInterval(memoizedCallbackUpdateAge, 5000);
|
||||
|
||||
return () => {
|
||||
clearInterval(interval);
|
||||
};
|
||||
}, [memoizedCallbackUpdateAge]);
|
||||
|
||||
return <li>{age} years old</li>;
|
||||
}
|
||||
@ -0,0 +1,61 @@
|
||||
import {useEffect, useState} from "react";
|
||||
import axios from "axios";
|
||||
|
||||
interface NowPlayingData {
|
||||
introduction: string;
|
||||
lastfm: {
|
||||
artist: string;
|
||||
track: string;
|
||||
playing: boolean;
|
||||
url: string | undefined;
|
||||
};
|
||||
}
|
||||
|
||||
export function LastFmLi() {
|
||||
const [nowPlayingData, setNowPlayingData] = useState<NowPlayingData>({
|
||||
introduction: "",
|
||||
lastfm: {
|
||||
artist: "nobody",
|
||||
playing: false,
|
||||
track: "nothing",
|
||||
url: undefined,
|
||||
},
|
||||
});
|
||||
|
||||
async function updateNowPlaying() {
|
||||
try {
|
||||
const songRequestData = await axios.get("https://api.jakecover.me");
|
||||
|
||||
setNowPlayingData(songRequestData.data);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
updateNowPlaying();
|
||||
|
||||
const interval = setInterval(updateNowPlaying, 10000);
|
||||
|
||||
return () => {
|
||||
clearInterval(interval);
|
||||
};
|
||||
}, []);
|
||||
|
||||
if (nowPlayingData.lastfm.playing) {
|
||||
return (
|
||||
<li>
|
||||
<a
|
||||
href={nowPlayingData.lastfm.url}
|
||||
target={"_blank"}
|
||||
rel="noreferrer"
|
||||
style={{color: "inherit", textDecoration: "inherit"}}
|
||||
>
|
||||
listening to {nowPlayingData.lastfm.track} by{" "}
|
||||
{nowPlayingData.lastfm.artist}
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
return <li>not listening to anything right now.</li>;
|
||||
}
|
||||
Loading…
Reference in New Issue