From bcb0b543a71609c9341b28bfef7c8ba03295817c Mon Sep 17 00:00:00 2001 From: Cobular <22972550+Cobular@users.noreply.github.com> Date: Mon, 18 Jan 2021 14:59:03 -0800 Subject: [PATCH] Refactored AboutMe sub-components Components out of the main file --- src/components/AboutMe.tsx | 264 ---------------------- src/components/{ => AboutMe}/AboutMe.scss | 0 src/components/AboutMe/AboutMe.tsx | 113 +++++++++ src/components/AboutMe/Age.tsx | 98 ++++++++ src/components/AboutMe/LastFmLi.tsx | 61 +++++ src/components/Home.tsx | 2 +- 6 files changed, 273 insertions(+), 265 deletions(-) delete mode 100644 src/components/AboutMe.tsx rename src/components/{ => AboutMe}/AboutMe.scss (100%) create mode 100644 src/components/AboutMe/AboutMe.tsx create mode 100644 src/components/AboutMe/Age.tsx create mode 100644 src/components/AboutMe/LastFmLi.tsx diff --git a/src/components/AboutMe.tsx b/src/components/AboutMe.tsx deleted file mode 100644 index 1a42c34..0000000 --- a/src/components/AboutMe.tsx +++ /dev/null @@ -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({ - 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 ( -
  • - - listening to {nowPlayingData.lastfm.track} by{" "} - {nowPlayingData.lastfm.artist} - -
    • - ); - } - return
  • not listening to anything right now.
    • ; -} - -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
  • {age} years old
    • ; -} - -export function AboutMe() { - function EmailHandler() { - const email = "Y29udGFjdEBqYWtlY292ZXIubWU="; - window.prompt("Thanks for being a human! Here's my email:", atob(email)); - } - - return ( -
    -
    -

    Hi! I'm Jake!

    - -
    -
    -

    A bit about me:

    - -
      -
    • - Name: Jake Cover -
      • -
    • Occupation: Student
      • -
    • Location: Southern California
      • -
    • - Projects:{" "} - -
      • -
    • - Resume: Over here -
      • -
    • - Find Me: - -
      • -
    -
    -
    -

    I'm:

    -
      - - - - -
    • - doing (general stuff - in class, projects, sleeping, games) -
      • -       -
    • rather colorblind
      • -
    -
    -
    -
    -
    - ); -} diff --git a/src/components/AboutMe.scss b/src/components/AboutMe/AboutMe.scss similarity index 100% rename from src/components/AboutMe.scss rename to src/components/AboutMe/AboutMe.scss diff --git a/src/components/AboutMe/AboutMe.tsx b/src/components/AboutMe/AboutMe.tsx new file mode 100644 index 0000000..e1b37d9 --- /dev/null +++ b/src/components/AboutMe/AboutMe.tsx @@ -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 ( +
    +
    +

    Hi! I'm Jake!

    + +
    +
    +

    A bit about me:

    + +
      +
    • + Name: Jake Cover +
      • +
    • + Occupation: Student +
      • +
    • + Location: Southern California +
      • +
    • + Projects:{" "} + +
      • +
    • + Resume: Over here +
      • +
    • + Find Me: + +
      • +
    +
    +
    +

    I'm:

    +
      + + + +
    • + doing (general stuff - in class, projects, sleeping, games) +
      • +       +
    • rather colorblind
      • +
    +
    +
    +
    +
    + ); +} diff --git a/src/components/AboutMe/Age.tsx b/src/components/AboutMe/Age.tsx new file mode 100644 index 0000000..30c086c --- /dev/null +++ b/src/components/AboutMe/Age.tsx @@ -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
  • {age} years old
    • ; +} diff --git a/src/components/AboutMe/LastFmLi.tsx b/src/components/AboutMe/LastFmLi.tsx new file mode 100644 index 0000000..c17918b --- /dev/null +++ b/src/components/AboutMe/LastFmLi.tsx @@ -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({ + 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 ( +
  • + + listening to {nowPlayingData.lastfm.track} by{" "} + {nowPlayingData.lastfm.artist} + +
    • + ); + } + return
  • not listening to anything right now.
    • ; +} \ No newline at end of file diff --git a/src/components/Home.tsx b/src/components/Home.tsx index e8771a9..dcba879 100644 --- a/src/components/Home.tsx +++ b/src/components/Home.tsx @@ -1,6 +1,6 @@ import "./Home.scss"; import { ProjectGrid } from "./ProjectGrid"; -import { AboutMe } from "./AboutMe"; +import { AboutMe } from "./AboutMe/AboutMe"; export function Home() { return (