+ {repository}
+ {pullRequest}
+
+ );
+
+ return (
+
+
+ );
+ }
+}
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 758bcad..1f7072b 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -1,5 +1,6 @@
import { Link } from 'react-router-dom';
import styled from 'styled-components';
+import { useAuth } from '../hooks/useAuth';
const HeaderContainer = styled.header`
background-color: var(--color-primary);
@@ -27,11 +28,47 @@ const Logo = styled(Link)`
}
`;
+const AuthSection = styled.div`
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+`;
+
+const UserName = styled.span`
+ color: white;
+`;
+
+const Button = styled.button`
+ background-color: transparent;
+ color: white;
+ border: 1px solid white;
+ padding: 0.5rem 1rem;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 0.9rem;
+
+ &:hover {
+ background-color: rgba(255, 255, 255, 0.1);
+ }
+`;
+
function Header() {
+ const { user, authenticated, login, logout } = useAuth();
+
return (
+
+
+
+ Logout
+ 
+
+
+
+
+ {this.state.user}
+
+
+
+
+ {main}
+ this.setRepository()}>Repositories
+{repositories}
+ {
+ this.node = node;
+ }}
+ >
+
+ );
+ }
+}
diff --git a/src/components/ProtectedRoute.jsx b/src/components/ProtectedRoute.jsx
new file mode 100644
index 0000000..268910b
--- /dev/null
+++ b/src/components/ProtectedRoute.jsx
@@ -0,0 +1,18 @@
+import { Navigate } from 'react-router-dom';
+import { useAuth } from '../hooks/useAuth';
+
+function ProtectedRoute({ children }) {
+ const { authenticated, loading } = useAuth();
+
+ if (loading) {
+ return ;
+ }
+
+ if (!authenticated) {
+ return - {lines}
+ Here you can enable world driven for each of your repositories. When
+ enabled, pull requests are watched and automatically merged based on
+ the reviews.
+
+ );
+ }
+
+ const contributors = [];
+ console.log(this.state.pullRequest.stats);
+ for (const contributor of this.state.pullRequest.stats.contributors) {
+ contributors.push(
+
+
+ );
+ }
+}
+
+PullRequestView.propTypes = {
+ // Used when fetching PR data (from Dashboard)
+ repository: PropTypes.object,
+ pullRequestId: PropTypes.number,
+ // Used when PR data is already available (from PullRequest component)
+ pullRequest: PropTypes.object,
+};
diff --git a/src/components/Repository/index.jsx b/src/components/Repository/index.jsx
new file mode 100644
index 0000000..6fd5775
--- /dev/null
+++ b/src/components/Repository/index.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from '../../styles/modules/repository.module.css';
+
+/**
+ * Repository class
+ **/
+export class Repository extends React.Component {
+ // eslint-disable-line no-unused-vars
+ /**
+ * contructor - The constructor
+ *
+ * @param {object} props - The properties
+ * @return {void}
+ **/
+ constructor(props) {
+ super(props);
+ }
+
+ /**
+ * render - renders
+ * @return {object} - The element to be renderd
+ **/
+ render() {
+ let content = ;
+ console.log(this.props.repository);
+ if (this.props.repository) {
+ content = (
+ + + {this.state.pullRequest.title}{' '} + + #{this.state.pullRequest.number} + + +
+ + state: {this.state.pullRequest.state} + + +
+
+
+
+
+
+ + + Start date:{' '} + {new Date(this.state.pullRequest.dates.max || 0).toISOString()} + +
+| Push date: | ++ {new Date( + this.state.pullRequest.dates.push || 0 + ).toISOString()} + | +
| Commit date: | ++ {new Date( + this.state.pullRequest.dates.commit || 0 + ).toISOString()} + | +
| Ready For Review date: | ++ {new Date( + this.state.pullRequest.dates.lastDraft || 0 + ).toISOString()} + | +
| Pull Request date: | ++ {new Date( + this.state.pullRequest.dates.created || 0 + ).toISOString()} + | +
|
+ + |
+
+ + |
+
| Start date: | ++ {new Date( + this.state.pullRequest.dates.max || 0 + ).toISOString()} + | +
+
+
+
+
+
+
+
+
+ + + Positive votes: {this.state.pullRequest.stats.votes}/ + {this.state.pullRequest.stats.votesTotal} (~ + {Math.round( + (this.state.pullRequest.stats.votes / + this.state.pullRequest.stats.votesTotal) * + 100 + )}{' '} + %) + +
+| + votes: + | +{this.state.pullRequest.stats.votes} | +
| + votes total: + | +{this.state.pullRequest.stats.votesTotal} | +
| + coefficient: + | +{this.state.pullRequest.stats.coefficient} | +
| + name + | +commits | +merge boost | +
+
+
+
+
+ + + Time to merge:{' '} + {this.getTimeDeltaString( + this.state.pullRequest.times.daysToMerge + )}{' '} + ( + {new Date( + this.state.pullRequest.times.mergeDate * 1000 || 0 + ).toISOString()} + ) + +
+| + Commits: + | +{this.state.pullRequest.stats.commits} | +
| + Total duration: + | ++ {this.getTimeDeltaString( + this.state.pullRequest.times.totalMergeTime + )} + | +
| + Reduce to: + | ++ {this.getTimeDeltaString( + this.state.pullRequest.times.mergeDuration + )} + | +
| + Age: + | ++ {this.getTimeDeltaString( + this.state.pullRequest.stats.age / 1000 + )} + | +
+
+
+ );
+ }
+ return content;
+ }
+}
+
+Repository.propTypes = {
+ repository: PropTypes.object,
+};
diff --git a/src/components/RepositoryListItem/index.jsx b/src/components/RepositoryListItem/index.jsx
new file mode 100644
index 0000000..3bd88bd
--- /dev/null
+++ b/src/components/RepositoryListItem/index.jsx
@@ -0,0 +1,133 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from '../../styles/modules/repositoryListItem.module.css';
+
+/**
+ * RepositoryListItem class
+ **/
+export class RepositoryListItem extends React.Component {
+ // eslint-disable-line no-unused-vars
+ /**
+ * contructor - The constructor
+ *
+ * @param {object} props - The properties
+ * @return {void}
+ **/
+ constructor(props) {
+ super(props);
+ this.state = {
+ pullRequests: [],
+ };
+ this.handleChange = this.handleChange.bind(this);
+ this.selectPullRequest = this.selectPullRequest.bind(this);
+ }
+
+ /**
+ * getPullRequests
+ */
+ async getPullRequests() {
+ const response = await fetch(
+ `/api/v1/repositories/${this.props.repository.fullName}/pulls`
+ );
+ const data = await response.json();
+ this.setState({
+ pullRequests: data,
+ });
+ }
+
+ /**
+ * componentDidMount - after component mount
+ *
+ * @return {void}
+ **/
+ componentDidMount() {
+ this.getPullRequests();
+ }
+
+ /**
+ * selectPullRequest - selects a pull request
+ *
+ * @param {string} pullRequestNumber - The number of a pull request
+ * @return {void}
+ **/
+ selectPullRequest(pullRequestNumber) {
+ this.props.setPullRequest(
+ this.props.repository.fullName,
+ pullRequestNumber
+ );
+ }
+
+ /**
+ * handleChange - handles changes
+ *
+ * @param {object} event - The event
+ * @return {void}
+ **/
+ handleChange(event) {
+ const updateRepository = new Request(
+ `/api/v1/repositories/${event.target.name}/`,
+ {
+ method: 'PUT',
+ headers: { 'content-type': 'application/json' },
+ body: JSON.stringify({ checked: event.target.checked }),
+ }
+ );
+ fetch(updateRepository);
+ }
+
+ /**
+ * render - renders
+ * @return {object} - The element to be renderd
+ **/
+ render() {
+ const pullRequests = [];
+ for (const pullRequest of this.state.pullRequests) {
+ pullRequests.push(
+ {this.props.repository.fullName}
+ +{this.props.repository.description}
+
+
+ );
+
+ return (
+ - {pullRequests}
+
+ );
+ }
+}
+
+RepositoryListItem.propTypes = {
+ repository: PropTypes.object,
+ getPullRequest: PropTypes.func,
+ setRepository: PropTypes.func,
+ setPullRequest: PropTypes.func,
+ repositoryIndex: PropTypes.number,
+};
diff --git a/src/hooks/useAuth.js b/src/hooks/useAuth.js
new file mode 100644
index 0000000..223b55d
--- /dev/null
+++ b/src/hooks/useAuth.js
@@ -0,0 +1,65 @@
+import { useState, useEffect, useCallback } from 'react';
+
+export function useAuth() {
+ const [user, setUser] = useState(null);
+ const [authenticated, setAuthenticated] = useState(false);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ async function performAuthCheck() {
+ try {
+ const response = await fetch('/api/v1/user/');
+ if (response.ok) {
+ const data = await response.json();
+ setAuthenticated(true);
+ setUser(data);
+ } else {
+ setAuthenticated(false);
+ setUser(null);
+ }
+ } catch (error) {
+ console.error('Auth check failed:', error);
+ setAuthenticated(false);
+ setUser(null);
+ }
+ setLoading(false);
+ }
+
+ performAuthCheck();
+ }, []);
+
+ const checkAuth = useCallback(async () => {
+ try {
+ const response = await fetch('/api/v1/user/');
+ if (response.ok) {
+ const data = await response.json();
+ setAuthenticated(true);
+ setUser(data);
+ } else {
+ setAuthenticated(false);
+ setUser(null);
+ }
+ } catch (error) {
+ console.error('Auth check failed:', error);
+ setAuthenticated(false);
+ setUser(null);
+ }
+ }, []);
+
+ const logout = useCallback(async () => {
+ try {
+ await fetch('/api/user/logout', { method: 'GET' });
+ setAuthenticated(false);
+ setUser(null);
+ window.location.href = '/';
+ } catch (error) {
+ console.error('Logout failed:', error);
+ }
+ }, []);
+
+ const login = useCallback(() => {
+ window.location.href = '/login';
+ }, []);
+
+ return { user, authenticated, loading, login, logout, checkAuth };
+}
diff --git a/src/pages/AdminPage/index.jsx b/src/pages/AdminPage/index.jsx
new file mode 100644
index 0000000..26b52bc
--- /dev/null
+++ b/src/pages/AdminPage/index.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { Logs } from '../../components/Logs';
+
+export function AdminPage() {
+ return (
+
+ this.props.setRepository(this.props.repository.fullName)
+ }
+ >
+ {this.props.repository.fullName}
+
+
+
+
+ {pullRequestsTag}
+
+
+ );
+}
diff --git a/src/pages/DashboardPage/index.jsx b/src/pages/DashboardPage/index.jsx
new file mode 100644
index 0000000..2285f02
--- /dev/null
+++ b/src/pages/DashboardPage/index.jsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { Dashboard } from '../../components/Dashboard';
+
+export function DashboardPage() {
+ return Admin Logs
+
+
+ );
+}
diff --git a/src/styles/modules/dashboard.module.css b/src/styles/modules/dashboard.module.css
new file mode 100644
index 0000000..13e7609
--- /dev/null
+++ b/src/styles/modules/dashboard.module.css
@@ -0,0 +1,14 @@
+.content {
+ height: '100%';
+}
+
+.mainContent {
+ display: grid;
+ grid-template-columns: 25% auto;
+ grid-column-gap: 20px;
+}
+
+.sidebar {
+ background-color: #97aeb9;
+ padding-right: 10px;
+}
diff --git a/src/styles/modules/pullRequest.module.css b/src/styles/modules/pullRequest.module.css
new file mode 100644
index 0000000..da95960
--- /dev/null
+++ b/src/styles/modules/pullRequest.module.css
@@ -0,0 +1,24 @@
+.content {
+ height: 100%;
+}
+
+.pullRequestNumber {
+ color: grey;
+}
+
+.PullRequestSummary {
+ font-size: 16pt;
+ padding: 8px;
+}
+
+.review_value0 {
+ color: grey;
+}
+
+.review_value1 {
+ color: green;
+}
+
+.review_value-1 {
+ color: red;
+}
diff --git a/src/styles/modules/repository.module.css b/src/styles/modules/repository.module.css
new file mode 100644
index 0000000..bf852c4
--- /dev/null
+++ b/src/styles/modules/repository.module.css
@@ -0,0 +1,3 @@
+.content {
+ height: 160px;
+}
diff --git a/src/styles/modules/repositoryListItem.module.css b/src/styles/modules/repositoryListItem.module.css
new file mode 100644
index 0000000..ed44ac0
--- /dev/null
+++ b/src/styles/modules/repositoryListItem.module.css
@@ -0,0 +1,99 @@
+.pullRequestLine {
+ margin-bottom: 2px;
+ padding-left: 6px;
+ border-radius: 6px;
+}
+
+.gray {
+ background: lightgray;
+}
+
+.red {
+ background: indianred;
+}
+
+.green {
+ background: lightgreen;
+}
+
+.pullRequestListItem {
+ width: 100%;
+ display: grid;
+ grid-template-columns: 65% 35%;
+}
+
+.repositoryList {
+ grid-column: 1 / 3;
+}
+
+.repositoryName {
+ font-size: 1.3em;
+}
+
+.switch {
+ position: relative;
+ display: inline-block;
+ width: 52px;
+ height: 28px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+}
+
+/* The slider */
+.slider {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: #c9d4d9;
+ -webkit-transition: 0.4s;
+ transition: 0.4s;
+}
+
+.slider:before {
+ position: absolute;
+ content: '';
+ height: 20px;
+ width: 20px;
+ left: 4px;
+ bottom: 4px;
+ background-color: white;
+ -webkit-transition: 0.4s;
+ transition: 0.4s;
+}
+
+input:checked + .slider {
+ background-color: #205572;
+}
+
+input:focus + .slider {
+ box-shadow: 0 0 1px #205572;
+}
+
+input:checked + .slider:before {
+ -webkit-transform: translateX(26px);
+ -ms-transform: translateX(26px);
+ transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+ border-radius: 34px;
+}
+
+.slider.round:before {
+ border-radius: 50%;
+}
+
+.repository {
+ width: 100%;
+ display: grid;
+ grid-template-columns: 80% 20%;
+}
diff --git a/vite.config.js b/vite.config.js
index 973f94c..a8badb8 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -7,4 +7,10 @@ export default defineConfig({
host: '0.0.0.0',
port: 3001,
},
+ css: {
+ modules: {
+ localsConvention: 'camelCaseOnly',
+ generateScopedName: '[path]___[name]__[local]___[hash:base64:5]',
+ },
+ },
});