From 2f2dddb1fbca6fd01084a2911589d1600b1fcb36 Mon Sep 17 00:00:00 2001 From: swve Date: Tue, 28 Jun 2022 20:58:21 +0200 Subject: [PATCH 1/6] =?UTF-8?q?=F0=9F=97=91=EF=B8=8F=20clean=20code?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Calendar/Calendar.tsx | 14 ++------------ components/Calendar/YearCalendar.tsx | 8 -------- components/Header/Header.tsx | 2 +- components/Loading/Loading.tsx | 10 ++++++---- pages/commits/[[...slug]].tsx | 7 ++----- pages/index.tsx | 8 +++++++- 6 files changed, 18 insertions(+), 31 deletions(-) diff --git a/components/Calendar/Calendar.tsx b/components/Calendar/Calendar.tsx index c4cc4dc..041621a 100644 --- a/components/Calendar/Calendar.tsx +++ b/components/Calendar/Calendar.tsx @@ -5,7 +5,7 @@ import { randomInt } from "crypto"; import { useRouter } from "next/router"; import { useSelector, useDispatch } from "react-redux"; import { SelectedDateInterface, updateDate } from "@redux/actions"; -import { Divider, Tooltip } from "@mui/material"; +import { Tooltip } from "@mui/material"; import { GitSt } from "@services/gitstory"; import CircularProgress from "@mui/material/CircularProgress"; import Link from "next/link"; @@ -33,6 +33,7 @@ export default function Calendar(props) { // init weekdays & Months const weekdaysArray = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"]; const monthsArray = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; + // Get date object - Dates in month - First day of month let date = dayjs(props.date).locale("fr"); let daysInMonth = date.daysInMonth(); @@ -60,7 +61,6 @@ export default function Calendar(props) { isScanOn ? null : setIsLoading(false); } - // async function scanMonth(month, year) { setIsScanOn(true); setIsLoading(true); @@ -75,11 +75,6 @@ export default function Calendar(props) { fillCalendar(); }, [isLoading]); - // 📣 Interaction - //-------------------------------- - - // 📣 Rendering - //-------------------------------- function renderCalendar() { if (isLoading) { return ( @@ -157,14 +152,9 @@ export default function Calendar(props) { } } - // 📣 Final Rendering - //-------------------------------- return
{renderCalendar()}
; } -// 📣 Styling -//-------------------------------- - const MonthBox = styled.div` display: flex; justify-content: center; diff --git a/components/Calendar/YearCalendar.tsx b/components/Calendar/YearCalendar.tsx index 39fe25b..04536e2 100644 --- a/components/Calendar/YearCalendar.tsx +++ b/components/Calendar/YearCalendar.tsx @@ -5,12 +5,8 @@ import { randomInt } from "crypto"; import FancyRender from "@components/Loading/FancyRender"; export default function YearCalendar({ withRelativeTop = false, year }) { - // 📣 Filling & Init the YearCalendar - //-------------------------------- - let year_dates = []; - // Fill a Year of Month dates function createYearDates(year) { for (let i = 0; i < 12; i++) { year_dates.push(`${year}-${i + 1}-1`); @@ -19,8 +15,6 @@ export default function YearCalendar({ withRelativeTop = false, year }) { createYearDates(year); - // 📣 Final Rendering - //-------------------------------- return ( @@ -32,8 +26,6 @@ export default function YearCalendar({ withRelativeTop = false, year }) { ); } -// 📣 Styling -//-------------------------------- const YearCalendarBox = styled.div` top: -150px; position: relative; diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx index 13d44d1..c7551e0 100644 --- a/components/Header/Header.tsx +++ b/components/Header/Header.tsx @@ -87,7 +87,7 @@ export default function Header({ withLeftPart = true, withPaddings = false, ...p - {props.title} | Gitstory + {props.title} | GitStory {/* SEO */} diff --git a/components/Loading/Loading.tsx b/components/Loading/Loading.tsx index db1f389..26d1f81 100644 --- a/components/Loading/Loading.tsx +++ b/components/Loading/Loading.tsx @@ -3,9 +3,11 @@ import styled from "styled-components"; import CircularProgress from "@mui/material/CircularProgress"; function Loading() { - return - - ; + return ( + + + + ); } const LoadingBox = styled.div` @@ -17,7 +19,7 @@ const LoadingBox = styled.div` overflow: clip; font-size: 14px; box-shadow: 0 9px 11px 2px rgb(3 8 19 / 20%); -margin-top: 30px; + margin-top: 30px; position: relative; padding: 120px; display: flex; diff --git a/pages/commits/[[...slug]].tsx b/pages/commits/[[...slug]].tsx index 474a23d..dc2beb3 100644 --- a/pages/commits/[[...slug]].tsx +++ b/pages/commits/[[...slug]].tsx @@ -64,7 +64,6 @@ export default function Repo() { useEffect(() => { if (router.isReady) { - // Get Date if (slug[3] === "date") { let date = new Date(parseInt(slug[4]), parseInt(slug[5]) - 1, parseInt(slug[6])); updateReduxDate(); @@ -135,10 +134,9 @@ export default function Repo() { - {console.log(commit)} - + @@ -234,7 +232,6 @@ const SubRepoInfo = styled.div` } `; -// Commit Box Design const CommitBox = styled.li` list-style: none; margin: 10px; @@ -260,7 +257,7 @@ const CommitRightGlobal = styled.div` margin-left: 20px; } - svg{ + svg { background-color: #10131b8f; padding: 5px; border-radius: 3px; diff --git a/pages/index.tsx b/pages/index.tsx index 8d2cf99..3698074 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -29,7 +29,13 @@ export default function Home() { return ( -
+
{" "} Beta From 2923ae7e54aebbf0e620cbd7c4e2ae7cc89e83c9 Mon Sep 17 00:00:00 2001 From: swve Date: Tue, 28 Jun 2022 21:21:07 +0200 Subject: [PATCH 2/6] =?UTF-8?q?=E2=9C=A8=20add=20random=20example=20github?= =?UTF-8?q?=20projects?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Header/Header.tsx | 3 ++- pages/index.tsx | 3 ++- services/example_repos.ts | 22 ++++++++++++++++++++++ 3 files changed, 26 insertions(+), 2 deletions(-) create mode 100644 services/example_repos.ts diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx index c7551e0..b4234f5 100644 --- a/components/Header/Header.tsx +++ b/components/Header/Header.tsx @@ -8,6 +8,7 @@ import LogoutIcon from "@mui/icons-material/Logout"; import { GitSt } from "@services/gitstory"; import Dialog from "@components/Dialog/Dialog"; import SignWithGitHub from "@components/Buttons/SignWithGitHub"; +import { getExampleRepo } from "@services/example_repos"; export default function Header({ withLeftPart = true, withPaddings = false, ...props }) { const { data: session } = useSession(); @@ -124,7 +125,7 @@ export default function Header({ withLeftPart = true, withPaddings = false, ...p diff --git a/pages/index.tsx b/pages/index.tsx index 3698074..a352ddb 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -4,6 +4,7 @@ import { useRouter } from "next/router"; import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn"; import Footer from "@components/Footer/Footer"; import Header from "@components/Header/Header"; +import { getExampleRepo } from "@services/example_repos"; export default function Home() { const [searchValue, setSearchValue] = useState([]); @@ -44,7 +45,7 @@ export default function Home() { Internet's git time machine - + Press Enter/Return to search diff --git a/services/example_repos.ts b/services/example_repos.ts new file mode 100644 index 0000000..3351d49 --- /dev/null +++ b/services/example_repos.ts @@ -0,0 +1,22 @@ +const repos = [ + "tryghost/ghost", + "vercel/next.js", + "facebook/react", + "tiangolo/fastapi", + "tiangolo/typer", + "mongodb/mongo", + "swve/framestack", + "swve/gitstory", + "framer/motion", + "torvalds/linux", + "apple/swift", + "chromium/chromium", + "mozilla/firefox", + "twbs/bootstrap", + "facebook/react-native", + "python/cpython", +]; + +export function getExampleRepo() { + return repos[Math.floor(Math.random() * repos.length)]; +} From 9994915158a70f7509f1114cc9a023f923c7145f Mon Sep 17 00:00:00 2001 From: swve Date: Tue, 28 Jun 2022 21:49:14 +0200 Subject: [PATCH 3/6] =?UTF-8?q?=E2=9C=A8=20add=20session=20loading?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Buttons/SignWithGitHub.tsx | 15 +++++++++++---- components/Header/Header.tsx | 21 ++++++++++++--------- 2 files changed, 23 insertions(+), 13 deletions(-) diff --git a/components/Buttons/SignWithGitHub.tsx b/components/Buttons/SignWithGitHub.tsx index 07e045f..a85ed1a 100644 --- a/components/Buttons/SignWithGitHub.tsx +++ b/components/Buttons/SignWithGitHub.tsx @@ -1,16 +1,23 @@ import React from "react"; import styled from "styled-components"; import GitHubIcon from "@mui/icons-material/GitHub"; +import CircularProgress from "@mui/material/CircularProgress"; function SignWithGitHub(props) { - return ( - <> + if (props.withLoading) { + return ( + + + + ); + } else { + return ( Sign in with GitHub - - ); + ); + } } export default SignWithGitHub; diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx index b4234f5..8769461 100644 --- a/components/Header/Header.tsx +++ b/components/Header/Header.tsx @@ -9,9 +9,10 @@ import { GitSt } from "@services/gitstory"; import Dialog from "@components/Dialog/Dialog"; import SignWithGitHub from "@components/Buttons/SignWithGitHub"; import { getExampleRepo } from "@services/example_repos"; +import FancyRender from "@components/Loading/FancyRender"; export default function Header({ withLeftPart = true, withPaddings = false, ...props }) { - const { data: session } = useSession(); + const { data: session, status } = useSession(); const [headerSearchValue, setHeaderSearchValue] = useState([]); const [apiUsageCounter, setApiUsageCounter] = useState(0); @@ -32,7 +33,6 @@ export default function Header({ withLeftPart = true, withPaddings = false, ...p const visitor_limitation = 60; const signed_user_limitation = 5000; let api_limitation = session ? signed_user_limitation : visitor_limitation; - //alert("API usage: " + api_usage_counter + "/" + api_limitation); if (apiUsageCounter > api_limitation) { setOpenApiPopup(true); } else { @@ -54,7 +54,6 @@ export default function Header({ withLeftPart = true, withPaddings = false, ...p router.push("/"); }; - // Execute functions saveGitHubSessionToCookie(); if (props.disable_api_usage_check) { //setOpenApiPopup(true); @@ -63,9 +62,12 @@ export default function Header({ withLeftPart = true, withPaddings = false, ...p } const ProfileBox = () => { + if (status === "loading") { + return signIn()}>; + } if (session) { return ( - <> + {session.user.name} @@ -73,14 +75,15 @@ export default function Header({ withLeftPart = true, withPaddings = false, ...p + + ); + } else { + return ( + <> + signIn()}> ); } - return ( - <> - signIn()}> - - ); }; return ( From 21e30a122c76e3885b9a0c577672f00331db2f1a Mon Sep 17 00:00:00 2001 From: swve Date: Tue, 28 Jun 2022 22:01:18 +0200 Subject: [PATCH 4/6] =?UTF-8?q?=F0=9F=90=9B=20disable=20render=20effect?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Header/Header.tsx | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx index 8769461..7a55405 100644 --- a/components/Header/Header.tsx +++ b/components/Header/Header.tsx @@ -67,15 +67,13 @@ export default function Header({ withLeftPart = true, withPaddings = false, ...p } if (session) { return ( - - - {session.user.name} - - signOut()}> - - - - + + {session.user.name} + + signOut()}> + + + ); } else { return ( From 2bc32610943d7cb23fd0dcecf83696b533f564bf Mon Sep 17 00:00:00 2001 From: swve Date: Sun, 3 Jul 2022 12:50:16 +0200 Subject: [PATCH 5/6] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20improve=20performance?= =?UTF-8?q?=20+=20seo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Header/Header.tsx | 8 ++++---- next.config.js | 4 ++++ package-lock.json | 4 ++-- pages/calendar/[[...slug]].tsx | 2 +- pages/index.tsx | 18 ++++++++++++++---- redux/store/index.ts | 1 - 6 files changed, 25 insertions(+), 12 deletions(-) diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx index 7a55405..e9c12d2 100644 --- a/components/Header/Header.tsx +++ b/components/Header/Header.tsx @@ -9,7 +9,6 @@ import { GitSt } from "@services/gitstory"; import Dialog from "@components/Dialog/Dialog"; import SignWithGitHub from "@components/Buttons/SignWithGitHub"; import { getExampleRepo } from "@services/example_repos"; -import FancyRender from "@components/Loading/FancyRender"; export default function Header({ withLeftPart = true, withPaddings = false, ...props }) { const { data: session, status } = useSession(); @@ -69,8 +68,8 @@ export default function Header({ withLeftPart = true, withPaddings = false, ...p return ( {session.user.name} - - signOut()}> + Profile photo + signOut()}> @@ -88,6 +87,7 @@ export default function Header({ withLeftPart = true, withPaddings = false, ...p + {props.title} | GitStory @@ -122,7 +122,7 @@ export default function Header({ withLeftPart = true, withPaddings = false, ...p - + GitStory logo -
+
{slug[1]}/{slug[2]} diff --git a/pages/index.tsx b/pages/index.tsx index a352ddb..f615fb5 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import styled from "styled-components"; import { useRouter } from "next/router"; import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn"; @@ -6,7 +6,7 @@ import Footer from "@components/Footer/Footer"; import Header from "@components/Header/Header"; import { getExampleRepo } from "@services/example_repos"; -export default function Home() { +export default function Home(props) { const [searchValue, setSearchValue] = useState([]); const router = useRouter(); @@ -39,13 +39,13 @@ export default function Home() { > {" "} - Beta + GitStory logo Beta Internet's git time machine - + Press Enter/Return to search @@ -55,6 +55,16 @@ export default function Home() { ); } +export async function getStaticProps() { + const exampleRepo = getExampleRepo(); + + return { + props: { + exampleRepo, + }, + }; +} + const HomePage = styled.div` //background: linear-gradient(180deg, #09090a 0%, rgba(39, 49, 55, 0.52) 100%), linear-gradient(243.33deg, #4c15eb 5.62%, #245aaa 74.42%, #0dd1dd 127.92%); background: linear-gradient(180deg, #09090a 0%, rgba(39, 49, 55, 0.52) 100%), diff --git a/redux/store/index.ts b/redux/store/index.ts index 704e94e..5b66fbb 100644 --- a/redux/store/index.ts +++ b/redux/store/index.ts @@ -1,4 +1,3 @@ -import { createStore } from "redux"; import { dateUpdate } from "@redux/reducers/dateupdate"; import { configureStore } from "@reduxjs/toolkit"; From 390f4e4d06bc511e8dab64f74da3e59537ea1863 Mon Sep 17 00:00:00 2001 From: swve Date: Sun, 3 Jul 2022 13:32:40 +0200 Subject: [PATCH 6/6] =?UTF-8?q?=F0=9F=90=9B=20fix=20random=20repos=20issue?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/index.tsx | 29 ++++++++++++++++------------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/pages/index.tsx b/pages/index.tsx index f615fb5..c22a844 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -6,9 +6,16 @@ import Footer from "@components/Footer/Footer"; import Header from "@components/Header/Header"; import { getExampleRepo } from "@services/example_repos"; -export default function Home(props) { - const [searchValue, setSearchValue] = useState([]); +export default function Home() { const router = useRouter(); + const exampleRepo = getExampleRepo(); + + const [searchValue, setSearchValue] = useState([]); + const [exampleRepoValue, setExampleRepoValue] = useState("swve/gitstory"); + + function changeRepoValue() { + setExampleRepoValue(exampleRepo); + } const handleSearchTextChange = (e) => { let value = e.target.value; @@ -28,6 +35,12 @@ export default function Home(props) { } }; + useEffect(() => { + changeRepoValue(); + } + , []); + + return (
- + Press Enter/Return to search @@ -55,16 +68,6 @@ export default function Home(props) { ); } -export async function getStaticProps() { - const exampleRepo = getExampleRepo(); - - return { - props: { - exampleRepo, - }, - }; -} - const HomePage = styled.div` //background: linear-gradient(180deg, #09090a 0%, rgba(39, 49, 55, 0.52) 100%), linear-gradient(243.33deg, #4c15eb 5.62%, #245aaa 74.42%, #0dd1dd 127.92%); background: linear-gradient(180deg, #09090a 0%, rgba(39, 49, 55, 0.52) 100%),