Merge branch 'Feature/language-change' into 'master'

Feature/language change

See merge request it2810-h21/team-11/gitlab-visualization!24

src/App.tsx

@@ -2,15 +2,18 @@
 import {Redirect, Route, Switch} from 'react-router';
 import LandingPage from "./pages/landingPage/landingPage";
 import { GlobalCommitContext } from './context/commitPageContext';
-import { useState } from 'react';
 import IssuePage from './pages/issueListPage/issuePage';
 import { CommitPage } from './pages/commitGraphPage/commitPage';
 import { IssueGraphPage } from './pages/issueGraphPage/issueGraphPage';
 import CommitPageWrapper from "./pages/commitListPage/commitPageWrapper"
-import OverviewPage from './pages/overviewPage/Overview';
+import './i18n';
+import { useState } from 'react';
+import OverviewPage from './pages/overviewPage/overview';
 
 function App() {
-    const [testContext, setTestContext] = useState<string>('Admin');   
+
+    const [language, setLanguage] = useState("no");
+
     return (
         <div className="App">
             <Switch>
@@ -36,7 +39,7 @@ function App() {
                     <CommitPageWrapper/>
                 </Route>
                 <Route exact path={"/commitgraph"}>
-                    <GlobalCommitContext.Provider value = {{testContext, setTestContext}}>
+                    <GlobalCommitContext.Provider value={{language: language, setLanguage: setLanguage}}>
                         <CommitPage />
                     </GlobalCommitContext.Provider>
                 </Route>

src/components/graphs/barChart/barChart.module.scss

@@ -19,10 +19,16 @@
     justify-content: space-evenly;
 }
 
-// .datePickerContainer {
-//     display: flex;
-//     flex-direction: column;
-//     justify-content: space-evenly;
-//     height: 30%;
-//     width: 50%;
-// }
+.datePickerContainer {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    height: 30%;
+    width: 70%;
+}
+
+@media screen and (max-width: 500px) {
+    .datePickerContainer {
+        flex-direction: column;
+    }
+}

src/components/graphs/barChart/barChart.tsx

@@ -8,6 +8,7 @@ import { ICommitsPerDay } from "../../../utils/victory/types";
 import { Commit, Issue } from '../../../utils/queryType';
 import { TextField } from "@mui/material";
 import { DatePicker } from "@mui/lab";
+import { useTranslation } from 'react-i18next';
 
 
 interface IBarChartProps {
@@ -22,6 +23,7 @@ export const BarChart = (props: IBarChartProps) => {
     const [currentData, setCurrentData] = useState<ICommitsPerDay[]>();
     const [dateIntervalStart, setStartDate]  = useState<Date>(new Date("2021-09-26"));
     const [dateIntervalEnd, setEndDate]  = useState<Date>(new Date("2021-10-03"));
+    const { t } = useTranslation();
 
     useEffect(() => {
         let commitsPerDay = getEntriesPerDayBarChartData(dateIntervalStart, dateIntervalEnd);
@@ -30,11 +32,12 @@ export const BarChart = (props: IBarChartProps) => {
 
     return (
           <div className={styles.container}>
-            <h2>{props.title}</h2>
+            <h2>{t(props.title)}</h2>
             <LocalizationProvider dateAdapter={AdapterDateFns}>
+                <div className={styles.datePickerContainer}>
                     <div>
                         <DatePicker
-                        label="Start date"
+                            label={t("Start date")}
                             value={dateIntervalStart}
                             onChange={(newValue) => {
                             setStartDate(newValue ?? new Date("2021-09-26"));
@@ -44,7 +47,7 @@ export const BarChart = (props: IBarChartProps) => {
                     </div>
                     <div>
                         <DatePicker
-                        label="End date"
+                            label={t("End date")}
                             value={dateIntervalEnd}
                             onChange={(newValue) => {
                             setEndDate(newValue ?? new Date());
@@ -52,6 +55,7 @@ export const BarChart = (props: IBarChartProps) => {
                             renderInput={(params) => <TextField {...params} />}
                             />
                     </div>
+                </div>
             </LocalizationProvider>
             <div className={styles.wrapper}>
               <VictoryChart

src/components/graphs/pieChart/pieChart.module.scss

@@ -3,7 +3,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    width: 70%;
+    width: 60%;
 }
 
 @media only screen and (max-width: 500px){

src/components/graphs/pieChart/pieChart.tsx

@@ -4,6 +4,7 @@ import { Commit, Issue } from '../../../utils/queryType';
 import { useVictory } from '../../../utils/victory/useVictory';
 import styles from './pieChart.module.scss';
 import Switch from "react-switch";
+import { useTranslation } from 'react-i18next';
 
 interface IPieChartProps {
     data: Commit[] | Issue[],
@@ -16,6 +17,7 @@ export const PieChart = (props: IPieChartProps) => {
     const [selectedAnimals, setSelectedAnimals] = useState(
         getAnonAnimals().map(animal => { return {animal: animal, selected: true}}))
     const [currentData, setCurrentData] = useState(getEntriesPerMemberPieChartData(selectedAnimals));
+    const { t } = useTranslation();
 
     const changeSelectedAnimals = (animalToChange: string) => {
         setSelectedAnimals(prevState =>
@@ -31,7 +33,7 @@ export const PieChart = (props: IPieChartProps) => {
         let checkboxes = getAnonAnimals().map(animal => {
             return (
                 <div className={styles.checkboxContainer} key={animal}>
-                    <label>{animal}</label>
+                    <label>{t(animal)}</label>
                     <Switch
                         onColor="#fae7c2"
                         checked={selectedAnimals.find(sa => sa.animal === animal)?.selected ?? false}
@@ -49,7 +51,7 @@ export const PieChart = (props: IPieChartProps) => {
 
     return (
         <div className={styles.pieChartContainer}>
-            <h2>{props.title}</h2>
+            <h2>{t(props.title)}</h2>
             <div className={styles.inputContainer}>
                 {animalCheckboxes()}
             </div>

src/context/commitPageContext.tsx

-import { createContext, useContext } from "react"
+import { createContext, Dispatch, SetStateAction, useContext } from "react"
+import '../i18n';
 export type GlobalGraphCommit = {
-  testContext: string
-  setTestContext:(c: string) => void
+  language: string,
+  setLanguage: Dispatch<SetStateAction<string>>,
 }
+
 export const GlobalCommitContext = createContext<GlobalGraphCommit>({
-testContext: 'Hello World',
-setTestContext: () => {},
-})
+  language: "no",
+  setLanguage: () => {},
+});
 export const useCommitContext = () => useContext(GlobalCommitContext)

src/context/issuePageContext.tsx

-import { createContext, useContext } from "react"
-export type GlobalGraphIssue = {
-  testContext: string
-  setTestContext:(c: string) => void
-}
-export const GlobalIssueContext = createContext<GlobalGraphIssue>({
-testContext: 'Hello World',
-setTestContext: () => {},
-})
-export const useIssueContext = () => useContext(GlobalIssueContext)
\ No newline at end of file

src/i18n.ts

+// Source: https://react.i18next.com/guides/quick-start
+
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+// the translations
+// (tip move them in a JSON file and import them,
+// or even better, manage them separated from your code: https://react.i18next.com/guides/multiple-translation-files)
+const resources = {
+  en: {
+    translation: {
+      "Charts for issues": "Charts for issues",
+      "Charts for commits": "Charts for commits",
+      "Start date": "Start date",
+      "End date": "End date",
+      "Commits per day": "Commits per day",
+      "Commits per member": "Commits per member",
+      "Issues authored per member": "Issues authored by each member",
+      "Tiger": "Tiger",
+      "Lion": "Lion",
+      "Giraffe": "Giraffe",
+      "Rhino": "Rhino",
+    }
+  },
+  no: {
+    translation: {
+      "Charts for issues": "Diagrammer for issues",
+      "Charts for commits": "Diagrammer for commits",
+      "Start date": "Startdato",
+      "End date": "Sluttdato",
+      "Commits per day": "Commits per dag",
+      "Commits per member": "Commits per medlem",
+      "Issues authored per member": "Issues laget av hvert medlem",
+      "Tiger": "Tiger",
+      "Lion": "Løve",
+      "Giraffe": "Sjiraff",
+      "Rhino": "Nesehorn",
+    }
+  }
+};
+
+i18n
+  .use(initReactI18next) // passes i18n down to react-i18next
+  .init({
+    resources,
+    lng: "en", // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
+    // you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
+    // if you're using a language detector, do not define the lng option
+
+    interpolation: {
+      escapeValue: false // react already safes from xss
+    }
+  });
+
+  export default i18n;
\ No newline at end of file

src/index.css

 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  font-family: "Roboto", BlinkMacSystemFont, 'Segoe UI', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;

src/pages/commitGraphPage/commitPage.module.css

@@ -9,3 +9,20 @@
     margin-left: 10%;
 }
 
+.header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+}
+
+.button {
+    background: #F5CA7B;
+    border-radius: 5px;
+    border: none;
+    width: 3.5rem;
+    height: 3.5rem;
+    font-size: 2rem;
+    position: relative;
+    left: 20%;
+}

src/pages/commitGraphPage/commitPage.tsx

@@ -6,10 +6,20 @@ import styles from './commitPage.module.css';
 import { queryTypes, Commit } from '../../utils/queryType'
 import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
 import Loader from "react-loader-spinner";
+import { useCommitContext } from '../../context/commitPageContext';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import GobackButton from '../../components/goBack/goBackButton';
 
 export const CommitPage = () => {
-    const commitData = useGitlabApi(queryTypes.AllCommits);
+    const commitData = useGitlabApi(queryTypes.AllCommitsWithoutPagination);
+    const { t, i18n } = useTranslation();
+    const context = useCommitContext();
+    
+    useEffect(() => {
+        i18n.changeLanguage(context.language)
+    }, [context.language])
+
 
     if (commitData.isLoading) {
         return (
@@ -25,8 +35,15 @@ export const CommitPage = () => {
 
     return (
         <div className={styles.pageContainer}>
+            <div className={styles.header}>
                 <GobackButton/>
-            <h1>Charts for issues</h1>
+                <h1>{t("Charts for issues")}</h1>
+                <button
+                    className={styles.button}
+                    onClick={() => context.setLanguage(context.language === "no" ? "en" : "no")}>
+                    {context.language}
+                </button>
+            </div>
             <BarChart data={commitData.data as Commit[]} title="Commits per day"/>
             <PieChart data={commitData.data as Commit[]} title={"Commits per member"}/>
         </div>

src/utils/queryType.ts

@@ -6,7 +6,7 @@ export enum queryTypes {
     Languages = "languages",  
     Access="access_requests",
     AllIssuesWithoutPagination = "issues/?scope=all",
-    AllCommitsWithoutPagination = "commits/?scope=all",
+    AllCommitsWithoutPagination = "repository/commits/?per_page=1000",
 }
 
 export type User = {

src/utils/victory/useVictory.tsx

@@ -62,16 +62,21 @@ export const useVictory = (initData: Commit[] | Issue[]) => {
         return { anonData, animals };
     }
 
-    function getEntriesPerDayBarChartData(startDate: Date, endDate: Date) : ICommitsPerDay[]{
+    function getEntriesPerDayBarChartData(startDateInput: Date, endDateInput: Date) : ICommitsPerDay[]{
         let commitsPerDayData = []
         let anon = anonymizeData(initData);
 
-        startDate = startDate ?? new Date();
-        endDate = endDate ?? new Date();
+        let startDate = new Date(startDateInput);
+        let endDate = new Date(endDateInput);
 
         for (let day = startDate; day <= endDate; day.setDate(day.getDate() + 1)) {
-            let amount: number = anon.anonData.filter(entry => entry.date.getDate() === day.getDate()).length;
-            commitsPerDayData.push({ date: `${day.getDate()}.${day.getMonth()}`, amount: amount});
+            anon.anonData.forEach(entry => {
+                console.log(entry)
+            })
+            let amount: number = anon.anonData.filter(entry =>
+                entry.date.getMonth() === day.getMonth() && entry.date.getDate() === day.getDate()
+                ).length;
+            commitsPerDayData.push({ date: `${day.getDate()}.${day.getMonth() + 1}`, amount: amount});
         }
         return commitsPerDayData;
     };