From 968d93a1ba84f48e6a0b292c81a561f616fd7034 Mon Sep 17 00:00:00 2001
From: 3zachm <3zachn4@gmail.com>
Date: Sat, 24 Dec 2022 15:35:35 -0800
Subject: [PATCH 1/3] move animation presence to app level rather than layout
---
layouts/DashLayout.tsx | 10 ++++++++--
layouts/HomeLayout.tsx | 9 +++++++--
pages/_app.tsx | 9 ++++++++-
3 files changed, 23 insertions(+), 5 deletions(-)
diff --git a/layouts/DashLayout.tsx b/layouts/DashLayout.tsx
index d212598..3d6536f 100644
--- a/layouts/DashLayout.tsx
+++ b/layouts/DashLayout.tsx
@@ -18,7 +18,13 @@ function DashLayout(props: DashLayoutProps) {
// get the current route for animation purposes
const router = useRouter();
return (
- <>
+
Dashboard - InvestBot
@@ -57,7 +63,7 @@ function DashLayout(props: DashLayoutProps) {
-
+
);
}
diff --git a/layouts/HomeLayout.tsx b/layouts/HomeLayout.tsx
index 8273c0f..da130f1 100644
--- a/layouts/HomeLayout.tsx
+++ b/layouts/HomeLayout.tsx
@@ -23,7 +23,12 @@ function HomeLayout(props: HomeLayoutProps) {
// get the current route for animation purposes
const router = useRouter();
return (
- <>
+
InvestBot
@@ -59,7 +64,7 @@ function HomeLayout(props: HomeLayoutProps) {
-
+
);
}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index c6d8054..d9d8111 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -2,6 +2,7 @@ import "../styles/globals.css";
import type { ReactElement, ReactNode } from "react";
import type { NextPage } from "next";
import type { AppProps } from "next/app";
+import { AnimatePresence, domAnimation, LazyMotion } from "framer-motion";
export type NextPageWithLayout = NextPage & {
getLayout?: (page: ReactElement) => ReactNode;
@@ -15,5 +16,11 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
// Use the layout defined at the page level, if available
const getLayout = Component.getLayout ?? ((page) => page);
- return getLayout();
+ return (
+
+
+ {getLayout()}
+
+
+ );
}
From e8d337bfeb55cc54c20c806d09dec687336ebfb9 Mon Sep 17 00:00:00 2001
From: 3zachm <3zachn4@gmail.com>
Date: Sat, 24 Dec 2022 15:38:59 -0800
Subject: [PATCH 2/3] update styling
---
components/dashboard/NavBar.tsx | 2 +-
pages/dashboard/index.tsx | 10 +++++-----
2 files changed, 6 insertions(+), 6 deletions(-)
diff --git a/components/dashboard/NavBar.tsx b/components/dashboard/NavBar.tsx
index b940fd6..af25a5f 100644
--- a/components/dashboard/NavBar.tsx
+++ b/components/dashboard/NavBar.tsx
@@ -6,7 +6,7 @@ function NavBar() {
return (
1
2
3
4
5
From 3c9556369a91f430e97237bcea3bea07e3ab16cb Mon Sep 17 00:00:00 2001
From: 3zachm <3zachn4@gmail.com>
Date: Sat, 24 Dec 2022 17:41:25 -0800
Subject: [PATCH 3/3] sort visualization and reverse order init
---
pages/api/fakeRanking.ts | 177 ++++++++++++++++++------------------
pages/dashboard/ranking.tsx | 138 +++++++++++++++++++++++-----
2 files changed, 205 insertions(+), 110 deletions(-)
diff --git a/pages/api/fakeRanking.ts b/pages/api/fakeRanking.ts
index 0b5731d..eb93f4d 100644
--- a/pages/api/fakeRanking.ts
+++ b/pages/api/fakeRanking.ts
@@ -9,6 +9,7 @@ export default async function handler(
res: NextApiResponse
) {
const sortBy = req.query.s ? (req.query.s as string) : undefined;
+ const sortAsc = req.query.a ? (req.query.a as string) : undefined;
let data = fakeData;
if (sortBy) {
@@ -25,6 +26,10 @@ export default async function handler(
} else if (sortBy === "name") {
data = data.sort((a, b) => a.name.localeCompare(b.name));
}
+ if (sortAsc === "true") {
+ // slow but only needed for temporary fake data anyway
+ data = data.reverse();
+ }
}
res.status(200).json({ data });
@@ -48,7 +53,7 @@ const fakeData: fakeDataEntry[] = [
points: 70, /// uninvested points
shares: 20,
dailyChange: -500,
- dailyChangePercent: -0.523,
+ dailyChangePercent: -0.0498504486540378863409770687936,
},
{
id: 1,
@@ -57,7 +62,7 @@ const fakeData: fakeDataEntry[] = [
points: 10020,
shares: 200,
dailyChange: 5420,
- dailyChangePercent: 0.14,
+ dailyChangePercent: 0.0379259673920649359736897347981,
},
{
id: 2,
@@ -70,138 +75,138 @@ const fakeData: fakeDataEntry[] = [
},
{
id: 3,
- name: "SecondSock",
+ name: "SecondSockSan",
netWorth: 153495,
points: 15020,
shares: 20,
- dailyChange: 5432,
- dailyChangePercent: 0.104,
+ dailyChange: -10432,
+ dailyChangePercent: -0.06796312583471774324896576435715,
},
{
id: 0,
- name: "Ente",
+ name: "e__n__t__e",
netWorth: 429481824,
points: 1002022,
shares: 94214,
- dailyChange: 3294444224,
- dailyChangePercent: 0.94,
+ dailyChange: 329444422,
+ dailyChangePercent: 4.2932124926634939999741296760186,
},
{
id: 5,
- name: "ObnoxiouslyLongNameWICKED",
- netWorth: 0,
- points: 100,
- shares: 0,
- dailyChange: 0,
- dailyChangePercent: 0,
+ name: "luckytohavefoundyou14252",
+ netWorth: 8024,
+ points: 423,
+ shares: 4,
+ dailyChange: 9,
+ dailyChangePercent: 0.00112163509471585244267198404786,
},
{
id: 6,
- name: "User",
- netWorth: 0,
- points: 100,
- shares: 0,
- dailyChange: 0,
- dailyChangePercent: 0,
+ name: "ZeroxZerich",
+ netWorth: 842190,
+ points: 88542,
+ shares: 532,
+ dailyChange: -10219,
+ dailyChangePercent: -0.01213384153219582279533121979601,
},
{
id: 7,
- name: "User",
- netWorth: 0,
- points: 100,
- shares: 0,
- dailyChange: 0,
- dailyChangePercent: 0,
+ name: "joeeyo",
+ netWorth: 10000000,
+ points: 9999979,
+ shares: 1,
+ dailyChange: 1,
+ dailyChangePercent: 0.0000001,
},
{
id: 8,
- name: "User",
- netWorth: 0,
- points: 100,
- shares: 0,
- dailyChange: 0,
- dailyChangePercent: 0,
+ name: "dd_maru",
+ netWorth: 10328421,
+ points: 328421,
+ shares: 252,
+ dailyChange: 85192,
+ dailyChangePercent: 0.00824830823607984221402284047097,
},
{
id: 9,
- name: "User",
- netWorth: 0,
- points: 100,
- shares: 0,
- dailyChange: 0,
- dailyChangePercent: 0,
+ name: "Goldeneye128",
+ netWorth: 58292,
+ points: 6521,
+ shares: 63,
+ dailyChange: -1942,
+ dailyChangePercent: -0.03331503465312564331297605160228,
},
{
id: 10,
- name: "User",
- netWorth: 0,
- points: 100,
- shares: 0,
- dailyChange: 0,
- dailyChangePercent: 0,
+ name: "lilpastatv",
+ netWorth: 7328919,
+ points: 40,
+ shares: 93,
+ dailyChange: 921821,
+ dailyChangePercent: 0.12577857662228222197571019682439,
},
{
id: 11,
- name: "User",
- netWorth: 0,
- points: 100,
- shares: 0,
- dailyChange: 0,
- dailyChangePercent: 0,
+ name: "domiswitch",
+ netWorth: 43290,
+ points: 5002,
+ shares: 15,
+ dailyChange: 2429,
+ dailyChangePercent: 0.05610995610995610995610995610996,
},
{
id: 12,
- name: "User",
- netWorth: 0,
- points: 100,
- shares: 0,
- dailyChange: 0,
- dailyChangePercent: 0,
+ name: "minosura",
+ netWorth: 904328,
+ points: 32901,
+ shares: 83,
+ dailyChange: 94821,
+ dailyChangePercent: 0.10485244291894091524314186887943,
},
{
id: 13,
- name: "User",
- netWorth: 0,
- points: 100,
- shares: 0,
- dailyChange: 0,
- dailyChangePercent: 0,
+ name: "scienceteam_member",
+ netWorth: 34894,
+ points: 958,
+ shares: 5,
+ dailyChange: -7964,
+ dailyChangePercent: -0.22823408035765461110792686421734,
},
{
id: 14,
- name: "User",
- netWorth: 0,
- points: 100,
- shares: 0,
- dailyChange: 0,
- dailyChangePercent: 0,
+ name: "witchdev",
+ netWorth: 94382912,
+ points: 8532,
+ shares: 329,
+ dailyChange: -421,
+ dailyChangePercent: -0.0000044605531984433792422085896,
},
{
id: 15,
- name: "User",
- netWorth: 0,
- points: 100,
- shares: 0,
- dailyChange: 0,
- dailyChangePercent: 0,
+ name: "justone123879",
+ netWorth: 8889123,
+ points: 86333,
+ shares: 153,
+ dailyChange: 53289,
+ dailyChangePercent: 0.00599485461051669551653183334284,
},
{
id: 16,
- name: "User",
- netWorth: 0,
- points: 100,
- shares: 0,
- dailyChange: 0,
- dailyChangePercent: 0,
+ name: "marcelr_",
+ netWorth: 400329,
+ points: 39291,
+ shares: 52,
+ dailyChange: 1329,
+ dailyChangePercent: 0.00331976948959480827019776234047,
},
{
id: 17,
- name: "User",
- netWorth: 0,
- points: 100,
- shares: 0,
- dailyChange: 0,
- dailyChangePercent: 0,
+ name: "fossabot",
+ netWorth: 20005,
+ points: 0,
+ shares: 1,
+ dailyChange: -31042,
+ dailyChangePercent: -1.5517120719820044988752811797051,
},
];
diff --git a/pages/dashboard/ranking.tsx b/pages/dashboard/ranking.tsx
index 54ec832..13b8956 100644
--- a/pages/dashboard/ranking.tsx
+++ b/pages/dashboard/ranking.tsx
@@ -6,15 +6,75 @@ import { fakeDataEntry } from "../api/fakeRanking";
function Ranking() {
const [sortBy, setSortBy] = useState("netWorth");
+ const [sortAsc, setSortAsc] = useState(false);
const [fakeData, setFakeData] = useState([]);
useEffect(() => {
- fetch(`/api/fakeRanking?s=${sortBy}`)
+ // fetch data from api on change to sort method
+ fetch(`/api/fakeRanking?s=${sortBy}&a=${sortAsc}`)
.then((res) => res.json())
.then((data) => {
setFakeData(data.data);
});
- }, [sortBy]);
+ }, [sortBy, sortAsc]);
+
+ const SortSVG = (props: { sortType: string; children?: ReactElement }) => {
+ // if not current sort, return a line, otherwise return an arrow corresponding to sortAsc
+ if (sortBy != props.sortType) {
+ return (
+
+
+
+ );
+ }
+ return (
+
+
+
+ );
+ };
+
+ const setSortMethod = (sortType: string) => {
+ // if same sort, toggle asc
+ // a change in sort means asc should be false for intuitive behavior
+ if (sortBy == sortType) {
+ setSortAsc(!sortAsc);
+ } else {
+ setSortAsc(false);
+ setSortBy(sortType);
+ }
+ };
return (
<>
@@ -37,37 +97,64 @@ function Ranking() {
{/* TODO: responsive for extremely skinny displays (i.e. galaxy fold), or really for mobile entirely so info is not lost */}
-
- #
- setSortBy("name")}
+ {/* Column names and arrows */}
+
+
#
+
setSortMethod("name")}
>
- Name
-
- setSortBy("netWorth")}>Assets
- setSortBy("points")}
+
+ Name
+
+
+
+
setSortMethod("netWorth")}
>
- Points
-
- setSortBy("shares")}
+
+ Assets
+
+
+
+
setSortMethod("points")}
>
- Shares
-
- setSortBy("dailyChange")}>Daily
-
+
+ Points
+
+
+
+
setSortMethod("shares")}
+ >
+
+ Shares
+
+
+
+
setSortMethod("dailyChange")}
+ >
+
+ Daily
+
+
+
+