Skip to content

Commit

Permalink
refactor activity log screen
Browse files Browse the repository at this point in the history
  • Loading branch information
wbglaeser committed Dec 5, 2024
1 parent 2105e41 commit 5d01401
Show file tree
Hide file tree
Showing 12 changed files with 312 additions and 290 deletions.
24 changes: 23 additions & 1 deletion src/theme.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { createTheme } from '@mui/material/styles';
import {createTheme} from '@mui/material/styles';

const theme = createTheme({
palette: {
Expand Down Expand Up @@ -32,10 +32,32 @@ const theme = createTheme({
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
body1: {
fontSize: '16px',
lineHeight: '1.5',
fontWeight: 400,
color: '#333333',
},
body2: {
fontSize: '14px',
lineHeight: '1.5',
fontWeight: 400,
color: '#333333',
},
h6: {
fontSize: '20px',
fontWeight: 'bold',
lineHeight: '1.5',
color: '#333333',
},
h4: {
fontSize: '28px',
fontWeight: 'bold',
lineHeight: '1.3',
color: '#333333',
},
caption: {
fontSize: '12px',
fontWeight: 400,
lineHeight: '1.5',
color: '#333333',
},
},
Expand Down
11 changes: 3 additions & 8 deletions src/ui/screens/activity-log/ActivityLogScreen.js
Original file line number Diff line number Diff line change
@@ -1,19 +1,14 @@
import React from "react";
import Layout from "../../shared-components/Layout";
import {useStore} from "../../shared-components/ViewportUpdater";
import ActivityLogMilestones from "./sections/milestones/ActivityLogMilestones";
import ActivityLogCommits from "./sections/commithistory/ActivityLogCommits";
import VStack from "../../shared-components/VStack";

const ActivityLogScreen = () => {
const isDesktop = useStore((state) => state.isDesktop);

return (
<Layout>
<VStack gap={3}>
<ActivityLogMilestones isDesktop={isDesktop}/>
<ActivityLogCommits isDesktop={isDesktop}/>
</VStack>
<Layout gap={3}>
<ActivityLogMilestones/>
<ActivityLogCommits/>
</Layout>
);
}
Expand Down
26 changes: 26 additions & 0 deletions src/ui/screens/activity-log/components/ActivityLogSection.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import React from "react";
import { Typography, Box } from "@mui/material";
import LandingPageSectionWrapper from "../../landing-page/components/LandingPageSectionWrapper";
import LandingPageSectionGrid from "../../landing-page/components/LandingPageSectionGrid";

const ActivityLogSection = ({ title, description, content, error }) => {
return (
<LandingPageSectionWrapper>
<LandingPageSectionGrid title={title}>
<Box sx={{ marginBottom: 3 }}>
<Typography variant="body1">{description}</Typography>
</Box>
<Box sx={{ width: "100%" }}>
{content}
{error && (
<Typography color="error" sx={{ marginTop: 2 }}>
{error}
</Typography>
)}
</Box>
</LandingPageSectionGrid>
</LandingPageSectionWrapper>
);
};

export default ActivityLogSection;
Original file line number Diff line number Diff line change
@@ -1,42 +1,21 @@
import React from "react";
import {Typography} from "@mui/material";
import LandingPageSectionWrapper from "../../../landing-page/components/LandingPageSectionWrapper";
import LandingPageSectionGrid from "../../../landing-page/components/LandingPageSectionGrid";
import VStack from "../../../../shared-components/VStack";
import ActivityLogSection from "../../components/ActivityLogSection";
import useFetchLatestCommitsHandler from "./hooks/useFetchLatestCommitsHandler";
import GithubCommitsList from "./components/GithubCommitsList";
import useTranslation from "../../../../language/useTranslation";

const ActivityLogCommits = ({isDesktop}) => {
const ActivityLogCommits = () => {
const { t } = useTranslation();
const { commits, error } = useFetchLatestCommitsHandler()
const { commits, error } = useFetchLatestCommitsHandler();

return (
<LandingPageSectionWrapper isDesktop={isDesktop}>
<LandingPageSectionGrid title={t('activityLog.gitCommits.title')}>
<VStack>
<Typography sx={styles.text}>
{t('activityLog.gitCommits.description')}
</Typography>
</VStack>
<VStack gap={5} sx={{width: '100%'}}>
<GithubCommitsList commits={commits}/>
</VStack>
{error && (
<Typography color="error">
Commits cannot be loaded.
</Typography>
)}
</LandingPageSectionGrid>
</LandingPageSectionWrapper>
)
}

const styles = {
text: {
fontSize: '20px',
textAlign: 'left',
},
}
<ActivityLogSection
title={t("activityLog.gitCommits.title")}
description={t("activityLog.gitCommits.description")}
content={<GithubCommitsList commits={commits} />}
error={error ? "Commits cannot be loaded." : null}
/>
);
};

export default ActivityLogCommits;
Original file line number Diff line number Diff line change
@@ -1,15 +1,10 @@
import React from "react";
import VStack from "../../../../../shared-components/VStack";
import HStack from "../../../../../shared-components/HStack";
import {Typography} from "@mui/material";
import globalStyles from "../../../../../styles/styles";
import GitHubIcon from '@mui/icons-material/GitHub';
import { Box, Typography, Link } from "@mui/material";
import GitHubIcon from "@mui/icons-material/GitHub";
import useTranslation from "../../../../../language/useTranslation";


const GithubCommitElement = ({commit, showBorderBottom}) => {
const GithubCommitElement = ({ commit }) => {
const { t } = useTranslation();
const borderBottom = showBorderBottom ? '1px solid rgba(252, 215, 85)' : 'none';

const mapDate = (date) => {
const dateObj = new Date(date);
Expand All @@ -22,60 +17,72 @@ const GithubCommitElement = ({commit, showBorderBottom}) => {
const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));

if (diffDays === 0) {
return t('activityLog.gitCommits.today');
return t("activityLog.gitCommits.today");
} else if (diffDays === 1) {
return t('activityLog.gitCommits.yesterday');
return t("activityLog.gitCommits.yesterday");
} else {
return t('activityLog.gitCommits.daysAgo', { count: diffDays });
return t("activityLog.gitCommits.daysAgo", { count: diffDays });
}
};

return (
<HStack justifyContent={'space-between'} alignItems={'flex-start'}
sx={{...styles.commitBox, borderBottom: borderBottom}}>
<VStack gap={1} alignItems={'flex-start'}>
<Typography sx={styles.title}>
{commit.commit_message}
</Typography>
<Typography sx={styles.repoName}>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "flex-start",
paddingBottom: 1,
paddingTop: 1,
borderBottom: "1px solid",
borderColor: "divider",
"&:last-child": {
borderBottom: "none",
},
}}
>
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: 1,
alignItems: "flex-start",
}}
>
<Typography variant="body1">{commit.commit_message}</Typography>
<Typography
variant="body2"
sx={{
fontWeight: 300,
color: "text.secondary",
}}
>
{commit.repo_name}
</Typography>
</VStack>
<VStack gap={1} justifyContent={'flex-start'} alignItems={'flex-end'} sx={styles.dateBox}>
<Typography sx={styles.date}>
</Box>
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: 1,
alignItems: "flex-end",
minWidth: "90px",
}}
>
<Typography
variant="caption"
sx={{
color: "text.secondary",
textAlign: "right",
}}
>
{mapDate(commit.timestamp)}
</Typography>
<a href={commit.commit_url} target="_blank" rel="noopener noreferrer">
<GitHubIcon sx={{fontSize: 24, color: 'black'}}/>
</a>
</VStack>
</HStack>
)
}

const styles = {
commitBox: {
paddingBottom: '16px',
paddingTop: '0px',
},
title: {
fontSize: '20px',
},
dateBox: {
minWidth: '90px',
},
date: {
fontSize: '16px',
fontWeight: '300',
color: globalStyles.colorDarkGrey,
textAlign: 'right'
},
repoName: {
fontSize: '16px',
fontWeight: '300',
color: globalStyles.colorDarkGrey,
textAlign: 'right'
},
}
<Link href={commit.commit_url} target="_blank" rel="noopener noreferrer">
<GitHubIcon sx={{ fontSize: 24, color: "text.primary" }} />
</Link>
</Box>
</Box>
);
};

export default GithubCommitElement;
Original file line number Diff line number Diff line change
@@ -1,47 +1,40 @@
import React from 'react';
import {Typography} from "@mui/material";
import VStack from "../../../../../shared-components/VStack";
import HStack from "../../../../../shared-components/HStack";
import React from "react";
import { Typography, Box } from "@mui/material";
import GithubCommitElement from "./GithubCommitElement";
import useTranslation from "../../../../../language/useTranslation";

const GithubCommitsList = ({commits}) => {
const GithubCommitsList = ({ commits }) => {
const { t } = useTranslation();

return (
<VStack sx={{width: '100%'}}>
<HStack justifyContent={'flex-end'} sx={styles.listHeaderBox}>
<Typography sx={styles.listTitle}>
{t('activityLog.gitCommits.listTitle')}
</Typography>
</HStack>
<VStack>
{
commits.map((item, index) => {
return (
<GithubCommitElement
key={index}
commit={item}
showBorderBottom={index < commits.length - 1}
/>
)
})
}
</VStack>
</VStack>
)
}

const styles = {
listHeaderBox: {
width: '100%',
borderBottom: '2px solid rgba(189, 189, 189)',
},
listTitle: {
fontSize: '20px',
fontWeight: 'bold'
}
}
<Box sx={{ width: "100%" }}>
<Box
sx={{
display: "flex",
justifyContent: "flex-end",
borderBottom: "2px solid",
borderColor: "divider",
marginBottom: 1,
}}
>
<Typography variant="h6">{t("activityLog.gitCommits.listTitle")}</Typography>
</Box>
<Box
sx={{
display: "flex",
flexDirection: "column",
"& > *:not(:last-child)": {
borderBottom: "1px solid",
borderColor: "divider",
},
}}
>
{commits.map((item) => (
<GithubCommitElement key={item.sha || item.id} commit={item} />
))}
</Box>
</Box>
);
};

export default GithubCommitsList;

Loading

0 comments on commit 5d01401

Please sign in to comment.