Dev

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 (
+      <BtnSignInWithGitHub onClick={props.onclick}>
+        <CircularProgress style={{ color: "white" }} size={15} thickness={6} />
+      </BtnSignInWithGitHub>
+    );
+  } else {
+    return (
       <BtnSignInWithGitHub onClick={props.onclick}>
         <GitHubIcon sx={{ marginRight: 1, fontSize: 15 }} />
         Sign in with GitHub
       </BtnSignInWithGitHub>
-    </>
-  );
+    );
+  }
 }
 
 export default SignWithGitHub;

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 <div>{renderCalendar()}</div>;
 }
 
-// 📣 Styling
-//--------------------------------
-
 const MonthBox = styled.div`
   display: flex;
   justify-content: center;

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 (
     <FancyRender>
       <YearCalendarBox>
@@ -32,8 +26,6 @@ export default function YearCalendar({ withRelativeTop = false, year }) {
   );
 }
 
-// 📣 Styling
-//--------------------------------
 const YearCalendarBox = styled.div`
   top: -150px;
   position: relative;

components/Header/Header.tsx

@@ -8,9 +8,10 @@ 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();
+  const { data: session, status } = useSession();
 
   const [headerSearchValue, setHeaderSearchValue] = useState([]);
   const [apiUsageCounter, setApiUsageCounter] = useState(0);
@@ -31,7 +32,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 {
@@ -53,7 +53,6 @@ export default function Header({ withLeftPart = true, withPaddings = false, ...p
     router.push("/");
   };
 
-  // Execute functions
   saveGitHubSessionToCookie();
   if (props.disable_api_usage_check) {
     //setOpenApiPopup(true);
@@ -62,32 +61,35 @@ export default function Header({ withLeftPart = true, withPaddings = false, ...p
   }
 
   const ProfileBox = () => {
+    if (status === "loading") {
+      return <SignWithGitHub withLoading onclick={() => signIn()}></SignWithGitHub>;
+    }
     if (session) {
+      return (
+        <SessionWrapper>
+          <span>{session.user.name}</span>
+          <img alt="Profile photo" src={session.user.image}></img>
+          <a href="#" onClick={() => signOut()}>
+            <LogoutIcon sx={{ fontSize: 17 }} />
+          </a>
+        </SessionWrapper>
+      );
+    } else {
       return (
         <>
-          <SessionWrapper>
-            <span>{session.user.name}</span>
-            <img src={session.user.image}></img>
-            <a aria-label="Logout" onClick={() => signOut()}>
-              <LogoutIcon sx={{ fontSize: 17 }} />
-            </a>
-          </SessionWrapper>
+          <SignWithGitHub onclick={() => signIn()}> </SignWithGitHub>
         </>
       );
     }
-    return (
-      <>
-        <SignWithGitHub onclick={() => signIn()}> </SignWithGitHub>
-      </>
-    );
   };
 
   return (
     <HeaderWrapper withPaddings={withPaddings}>
       <Head>
         <meta charSet="utf-8" />
+
         <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
-        <title>{props.title} | Gitstory </title>
+        <title>{props.title} | GitStory </title>
         <meta name="HandheldFriendly" content="True" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         {/* SEO */}
@@ -120,11 +122,11 @@ export default function Header({ withLeftPart = true, withPaddings = false, ...p
         <link key="2" rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png"></link>
       </Head>
       <LeftWrapper withLeftPart={withLeftPart}>
-        <img onClick={goHome} src="/img/index_logo.png" width="120" height="34" />
+        <img onClick={goHome} alt="GitStory logo" src="/img/index_logo.png" width="120" height="34" />
         <SearchBoxHeader
           onKeyDown={keyPress}
           onChange={handleHeaderSearchTextChange}
-          placeholder="Explore GitHub projects, e.g. : torvalds/linux"
+          placeholder={"Explore GitHub projects, e.g. : " + getExampleRepo()}
         ></SearchBoxHeader>
       </LeftWrapper>
       <RightWrapper>

components/Loading/Loading.tsx

@@ -3,9 +3,11 @@ import styled from "styled-components";
 import CircularProgress from "@mui/material/CircularProgress";
 
 function Loading() {
-  return <LoadingBox>
-    <CircularProgress style={{ color: "white" }} size={90} thickness={6} />
-  </LoadingBox>;
+  return (
+    <LoadingBox>
+      <CircularProgress style={{ color: "white" }} size={90} thickness={6} />
+    </LoadingBox>
+  );
 }
 
 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;

next.config.js

@@ -3,6 +3,10 @@ module.exports = {
     // ssr and displayName are configured by default
     styledComponents: true,
   },
+  i18n: {
+    locales: ["en"],
+    defaultLocale: "en",
+  },
   env: {
     // This is the default value, but we want to be explicit
     GITHUB_SECRET: process.env.GITHUB_SECRET,

pages/calendar/[[...slug]].tsx

@@ -74,7 +74,7 @@ export default function Repo() {
     return (
       <>
         <GradientHeader>
-          <Header title={`${slug[1]}/${slug[2]}`}></Header>
+          <Header title={`${slug[1]}/${slug[2]}`} desc={`Calendar view for ${slug[1]}/${slug[2]}`}></Header>
           <RepoBar>
             {slug[1]}/{slug[2]}
           </RepoBar>

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() {
                           <CommitIcon sx={{ fontSize: 30 }} />
                         </Tooltip>
                       </a>
-                      {console.log(commit)}
                       <a target="_blank" href={`https://github.com/${slug[1]}/${slug[2]}/tree/${commit.sha}/`}>
                         <Tooltip title="Travel in time to that commit, in GitHub">
-                          <AccessTimeFilledIcon sx={{ fontSize: 30  }} />
+                          <AccessTimeFilledIcon sx={{ fontSize: 30 }} />
                         </Tooltip>
                       </a>
                     </CommitRightGlobal>
@@ -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;

pages/index.tsx

@@ -1,13 +1,21 @@
-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";
 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([]);
   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;
@@ -27,18 +35,30 @@ export default function Home() {
     }
   };
 
+  useEffect(() => {
+    changeRepoValue();  
+  }
+  , []);
+
+
   return (
     <HomePage>
-      <Header disable_api_usage_check withLeftPart={false} withPaddings={true} title="Home" desc="Internet's Git time machine."></Header>
+      <Header
+        disable_api_usage_check
+        withLeftPart={false}
+        withPaddings={true}
+        title="Internet's Git Time machine"
+        desc="Go back in time and explore your favorite Open source projects "
+      ></Header>
       <LogoBox>
         {" "}
-        <img src="/img/index_logo.png" /> <span>Beta</span>
+        <img alt="GitStory logo" src="/img/index_logo.png" /> <span>Beta</span>
       </LogoBox>
       <DescriptionBox>
         <img alt="Internet's git time machine" src="/img/description.png" />
       </DescriptionBox>
       <Search>
-        <SearchBox onKeyDown={keyPress} onChange={handleSearchTextChange} placeholder="Explore GitHub projects, e.g. : torvalds/linux"></SearchBox>
+        <SearchBox onKeyDown={keyPress} onChange={handleSearchTextChange} placeholder={"Explore GitHub projects, e.g. : " + exampleRepoValue}></SearchBox>
         <span>
           Press Enter/Return to search <KeyboardReturnIcon sx={{ fontSize: 10 }} />
         </span>

redux/store/index.ts

@@ -1,4 +1,3 @@
-import { createStore } from "redux";
 import { dateUpdate } from "@redux/reducers/dateupdate";
 import { configureStore } from "@reduxjs/toolkit";
 

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)];
+}