);
-};
\ No newline at end of file
+};
diff --git a/src/App/pages/AllUsersPage/components/UserItem/UserItem.module.scss b/src/App/pages/AllUsersPage/components/UserItem/UserItem.module.scss
index d353578..7ba9805 100644
--- a/src/App/pages/AllUsersPage/components/UserItem/UserItem.module.scss
+++ b/src/App/pages/AllUsersPage/components/UserItem/UserItem.module.scss
@@ -6,7 +6,7 @@
justify-content: space-between;
border: 1px solid $brand-secondary;
border-radius: $border-radius;
- background-color: white;
+ background-color: var(--card-background);
padding: $space-s;
diff --git a/src/App/pages/AllUsersPage/components/UserItem/UserItem.tsx b/src/App/pages/AllUsersPage/components/UserItem/UserItem.tsx
index 32eb124..236ca3d 100644
--- a/src/App/pages/AllUsersPage/components/UserItem/UserItem.tsx
+++ b/src/App/pages/AllUsersPage/components/UserItem/UserItem.tsx
@@ -6,19 +6,25 @@ import { Link } from "react-router";
import styles from "./UserItem.module.scss";
type UserItem = {
- login: string,
- avatarUrl: string,
- type: string,
-}
+ login: string;
+ avatarUrl: string;
+ type: string;
+};
export const UserItem = ({ login, avatarUrl, type }: UserItem) => {
- return
-
-
- {login}
- {type}
-
+ return (
+
+
+
+
+ {login}
+
+ {type}
+
-
+
+
+
-}
+ );
+};
diff --git a/src/App/pages/AllUsersPage/provider.tsx b/src/App/pages/AllUsersPage/provider.tsx
index bd4467c..1f6e2ad 100644
--- a/src/App/pages/AllUsersPage/provider.tsx
+++ b/src/App/pages/AllUsersPage/provider.tsx
@@ -1,9 +1,6 @@
import { FiltersContext } from "components/FiltersSection/context";
import { usersFilterOptions } from "config/filterOptions";
import { AllUsersStore } from "store/AllUsersStore";
-import { FiltersType } from "store/RootStore";
-import { filtersStore } from "store/RootStore/FiltersStore/instance";
-import { searchStore } from "store/RootStore/SearchStore/instance";
import { UsersContext, useUsersPageStore } from "./context";
export const UsersProvider = ({ children }: { children: React.ReactNode }) => {
@@ -13,6 +10,16 @@ export const UsersProvider = ({ children }: { children: React.ReactNode }) => {
};
export const UsersFiltersProvider = ({ children }: { children: React.ReactNode }) => {
- const usersStore = useUsersPageStore()
- return
{children};
+ const usersStore = useUsersPageStore();
+ return (
+
+ {children}
+
+ );
};
diff --git a/src/App/pages/CreateRepoPage/CreateRepoPage.module.scss b/src/App/pages/CreateRepoPage/CreateRepoPage.module.scss
new file mode 100644
index 0000000..4c2f95c
--- /dev/null
+++ b/src/App/pages/CreateRepoPage/CreateRepoPage.module.scss
@@ -0,0 +1,28 @@
+@use "styles/mixins" as mixins;
+@use "styles/variables" as *;
+
+.root {
+ height: 90vh;
+
+ &__form {
+ background-color: var(--card-background);
+ }
+
+ &__field {
+ display: block;
+ margin-bottom: $space-xs;
+ border: 1px solid $brand-secondary;
+ border-radius: $border-radius;
+ }
+
+ &__private {
+ @include mixins.flex;
+ text-align: left;
+ gap: $space-xxs;
+ margin-bottom: $space-s;
+
+ &__field {
+ flex-shrink: 0;
+ }
+ }
+}
diff --git a/src/App/pages/CreateRepoPage/CreateRepoPage.tsx b/src/App/pages/CreateRepoPage/CreateRepoPage.tsx
new file mode 100644
index 0000000..ceabfc6
--- /dev/null
+++ b/src/App/pages/CreateRepoPage/CreateRepoPage.tsx
@@ -0,0 +1,63 @@
+import cn from "classnames";
+import { Button } from "components/Button";
+import { CheckBox } from "components/Checkbox";
+import { Input } from "components/Input";
+import { Text } from "components/Text";
+import { useLocalObservable } from "mobx-react-lite";
+import { useState } from "react";
+import { RepoStore } from "store/RepoStore";
+import styles from "./CreateRepoPage.module.scss";
+
+export const CreateRepoPage: React.FC = () => {
+ const [repoName, setRepoName] = useState("");
+ const [description, setDescription] = useState("");
+ const [isPrivate, setIsPrivate] = useState(false);
+
+ const repoStore = useLocalObservable(() => new RepoStore());
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+
+ repoStore.createRepo({
+ name: repoName,
+ description: description,
+ private: isPrivate,
+ });
+ };
+
+ return (
+
+
+
+ Create a new repository
+
+
+
+
+ );
+};
diff --git a/src/App/pages/CreateRepoPage/index.ts b/src/App/pages/CreateRepoPage/index.ts
new file mode 100644
index 0000000..2653d69
--- /dev/null
+++ b/src/App/pages/CreateRepoPage/index.ts
@@ -0,0 +1 @@
+export {CreateRepoPage} from "./CreateRepoPage"
\ No newline at end of file
diff --git a/src/App/pages/LoginPage/LoginPage.module.scss b/src/App/pages/LoginPage/LoginPage.module.scss
index e69de29..c75a996 100644
--- a/src/App/pages/LoginPage/LoginPage.module.scss
+++ b/src/App/pages/LoginPage/LoginPage.module.scss
@@ -0,0 +1,9 @@
+@use "styles/variables" as *;
+
+.root {
+ height: 90vh;
+
+ &__form {
+
+ }
+}
diff --git a/src/App/pages/LoginPage/LoginPage.tsx b/src/App/pages/LoginPage/LoginPage.tsx
index 565e0a4..148f146 100644
--- a/src/App/pages/LoginPage/LoginPage.tsx
+++ b/src/App/pages/LoginPage/LoginPage.tsx
@@ -1,32 +1,30 @@
-import React, { useState } from 'react';
-import { observer } from 'mobx-react-lite';
-import { Input } from 'components/Input';
+import AuthService from "api/AuthService";
+import cn from "classnames";
+import { Button } from "components/Button";
+import { GhLogo } from "components/icons/GhLogo";
+import { Text } from "components/Text";
+import { routesConfig } from "config/routes";
+import { observer } from "mobx-react-lite";
+import { useNavigate } from "react-router-dom";
import styles from "./LoginPage.module.scss";
-import { rootStore } from 'store/RootStore';
-import { Button } from 'components/Button';
export const LoginPage = observer(() => {
- // const [formData, setFormData] = useState({
- // username: '',
- // email: '',
- // password: '',
- // });
- const [login, setLogin] = useState('');
- const [password, setPassword] = useState('');
+ const navigate = useNavigate();
- const handleSubmit = (e) => {
- e.preventDefault();
- rootStore.auth.login(login, password);
- // if (authStore.user) {
- // history.push('/'); // Перенаправление на главную страницу после успешной регистрации
- // }
+ const handleLogin = async () => {
+ await AuthService.login();
+ navigate(routesConfig.repositories.create());
};
return (
-
+
+
+
+
+ GitHub Authorization
+
+
+
+
);
});
diff --git a/src/App/pages/RegisterPage/RegisterPage.module.scss b/src/App/pages/RegisterPage/RegisterPage.module.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/App/pages/RegisterPage/RegisterPage.tsx b/src/App/pages/RegisterPage/RegisterPage.tsx
deleted file mode 100644
index d6fadfb..0000000
--- a/src/App/pages/RegisterPage/RegisterPage.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, { useState } from 'react';
-import { observer } from 'mobx-react-lite';
-import { Input } from 'components/Input';
-import { Text } from "components/Text";
-import styles from "./RegisterPage.module.scss";
-import { Button } from 'components/Button';
-import { rootStore } from 'store/RootStore';
-import { useNavigate } from 'react-router';
-
-export const RegisterPage = observer(() => {
- const [email, setEmail] = useState('');
- const [login, setLogin] = useState('');
- const [password, setPassword] = useState('');
- // const [formData, setFormData] = useState({
- // username: '',
- // email: '',
- // password: '',
- // });
-
- const navigate = useNavigate();
-
- const handleSubmit = (e) => {
- e.preventDefault();
- console.log("FFFFF", email, login, password)
- rootStore.auth.register(email, login, password);
- // if (rootStore.auth.user) {
- // navigate('/');
- // }
- };
-
- return (
-
-
- Sign up to Github Client
-
-
-
- );
-});
-
diff --git a/src/App/pages/RegisterPage/index.ts b/src/App/pages/RegisterPage/index.ts
deleted file mode 100644
index ea060c9..0000000
--- a/src/App/pages/RegisterPage/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { RegisterPage } from "./RegisterPage"
\ No newline at end of file
diff --git a/src/App/pages/RepoDetailPage/RepoDetailPage.module.scss b/src/App/pages/RepoDetailPage/RepoDetailPage.module.scss
index 5e38ae1..f563f26 100644
--- a/src/App/pages/RepoDetailPage/RepoDetailPage.module.scss
+++ b/src/App/pages/RepoDetailPage/RepoDetailPage.module.scss
@@ -1,18 +1,26 @@
@use "styles/variables" as *;
@use "styles/mixins" as mixins;
+@use "styles/funcs" as funcs;
.root {
- background-color: white;
padding-bottom: 80px;
min-height: 100vh;
- &__page {
- margin-left: $content-margin;
- margin-right: $content-margin;
- }
-
&__info {
display: flex;
- gap: 80px;
+ gap: funcs.rem(80);
+ }
+}
+
+@media (max-width: funcs.rem(600)) {
+ .root__info {
+ gap: funcs.rem(40);
+ }
+}
+
+@media (max-width: funcs.rem(550)) {
+ .root__info {
+ flex-direction: column;
+ row-gap: funcs.rem(5);
}
}
diff --git a/src/App/pages/RepoDetailPage/RepoDetailPage.tsx b/src/App/pages/RepoDetailPage/RepoDetailPage.tsx
index 3151407..3436e2c 100644
--- a/src/App/pages/RepoDetailPage/RepoDetailPage.tsx
+++ b/src/App/pages/RepoDetailPage/RepoDetailPage.tsx
@@ -1,5 +1,8 @@
+import cn from "classnames";
+import { useBackground } from "components/Layout/context";
import { Loader } from "components/Loader";
import { observer } from "mobx-react-lite";
+import { useEffect } from "react";
import { useParams } from "react-router";
import { Meta } from "utils/meta";
import { addViewedRepo } from "utils/viewedRepos";
@@ -16,36 +19,38 @@ import styles from "./RepoDetailPage.module.scss";
const RepoDetailPageContent: React.FC = observer(() => {
const store = useRepoPageStore();
- const repo = store.repo;
+ const repo = store?.repo;
+ const { setBackgroundColor } = useBackground();
- if (!repo) {
- return
Репозиторий не найден
;
+ useEffect(() => {
+ setBackgroundColor("accent");
+ return () => setBackgroundColor("normal");
+ }, [setBackgroundColor]);
+
+ if (store.repoMeta === Meta.loading) {
+ return
;
+ }
+
+ if (store.repoMeta === Meta.error) {
+ return
Repository not found
;
}
addViewedRepo(repo);
return (
-
- {store.repoMeta === Meta.loading &&
}
- {store.repoMeta === Meta.error &&
Репозиторий не найден
}
-
-
- {repo.homepage &&
}
- {repo.topics &&
}
-
-
-
-
- {store?.contributors?.length !== 0 && }
-
-
-
-
+
+
+ {repo.homepage &&
}
+ {repo.topics &&
}
+
+
+
+
+ {store?.contributors?.length !== 0 && }
+
+
+ {store.readmeMeta === Meta.success &&
}
);
});
diff --git a/src/App/pages/RepoDetailPage/components/ContributorsSection/ContributorsItem/ContributorsItem.tsx b/src/App/pages/RepoDetailPage/components/ContributorsSection/ContributorsItem/ContributorsItem.tsx
index 3c68711..a8d7471 100644
--- a/src/App/pages/RepoDetailPage/components/ContributorsSection/ContributorsItem/ContributorsItem.tsx
+++ b/src/App/pages/RepoDetailPage/components/ContributorsSection/ContributorsItem/ContributorsItem.tsx
@@ -15,7 +15,7 @@ export const ContributorsItem: React.FC
= ({ login, avata
-
+
{login}
diff --git a/src/App/pages/RepoDetailPage/components/LanguagesSection/LanguagesSection.tsx b/src/App/pages/RepoDetailPage/components/LanguagesSection/LanguagesSection.tsx
index e4ad1be..47ea5cf 100644
--- a/src/App/pages/RepoDetailPage/components/LanguagesSection/LanguagesSection.tsx
+++ b/src/App/pages/RepoDetailPage/components/LanguagesSection/LanguagesSection.tsx
@@ -6,42 +6,47 @@ import { toJS } from "mobx";
import { colors } from "config/githubColors";
export const LanguagesSection: React.FC<{ store: RepoStore }> = observer(({ store }) => {
- let languages = {}
- if (store.languages) {
- languages = toJS(store.languages)
- }
- const totalBytes = Object.values(languages).reduce((acc, val) => acc + val, 0);
+ let languages = {};
+ if (store.languages) {
+ languages = toJS(store.languages);
+ }
+ const totalBytes = Object.values(languages).reduce((acc, val) => acc + val, 0);
- return (
-
-
- Languages
-
-
- {Object.entries(languages).map(([language, bytes]) => {
- const percentage = (bytes / totalBytes) * 100;
- const color = colors[language].color
- return (
-
- );
- })}
+ return (
+
+
+ Languages
+
+
+ {Object.entries(languages).map(([language, bytes]) => {
+ const percentage = (bytes / totalBytes) * 100;
+ const color = colors[language].color;
+ return (
+
+ );
+ })}
+
+
+ {Object.entries(languages).map(([language, bytes]) => {
+ const percentage = (bytes / totalBytes) * 100;
+ const color = colors[language].color;
+ return (
+
+
+
+ {`${language}: `}
+
+ {percentage.toFixed(2)}%
+
+
-
- {Object.entries(languages).map(([language, bytes]) => {
- const percentage = (bytes / totalBytes) * 100;
- const color = colors[language].color
- return (
-
-
-
{`${language}: `}{percentage.toFixed(2)}%
-
- );
- })}
-
-
- );
-})
+ );
+ })}
+
+
+ );
+});
diff --git a/src/App/pages/RepoDetailPage/components/Readme/Readme.module.scss b/src/App/pages/RepoDetailPage/components/Readme/Readme.module.scss
index f7c5638..436b329 100644
--- a/src/App/pages/RepoDetailPage/components/Readme/Readme.module.scss
+++ b/src/App/pages/RepoDetailPage/components/Readme/Readme.module.scss
@@ -3,6 +3,8 @@
.root {
border: 1px solid $brand-secondary;
border-radius: 4px;
+ max-width: 900px;
+ color: var(--text-primary);
&__title {
margin: $space-m;
@@ -10,5 +12,29 @@
&__content {
margin: 32px;
+
+ img {
+ max-width: 100%;
+ }
+
+ pre {
+ background-color: var(--body-background);
+ padding: 16px;
+ border-radius: 4px;
+ width: 100%;
+ overflow-x: auto;
+ }
+ }
+}
+
+@media (max-width: 500px) {
+ .root__content {
+ margin: 22px;
+ }
+}
+
+@media (max-width: 400px) {
+ .root__content {
+ word-break: break-all;
}
}
diff --git a/src/App/pages/RepoDetailPage/components/Readme/Readme.tsx b/src/App/pages/RepoDetailPage/components/Readme/Readme.tsx
index ae0cad9..13e4bac 100644
--- a/src/App/pages/RepoDetailPage/components/Readme/Readme.tsx
+++ b/src/App/pages/RepoDetailPage/components/Readme/Readme.tsx
@@ -1,18 +1,20 @@
-import { Loader } from "components/Loader";
import { Text } from "components/Text";
import { observer } from "mobx-react-lite";
-import { RepoStore } from "store";
-import { Meta } from "utils/meta";
+import ReactMarkdown from "react-markdown";
+import rehypeSanitize from "rehype-sanitize";
+import remarkGfm from "remark-gfm";
+import { RepoStore } from "store/RepoStore";
import styles from "./Readme.module.scss";
export const Readme: React.FC<{ store: RepoStore }> = observer(({ store }) => {
return (
- {store.readmeMeta === Meta.loading &&
}
README.md
-
+
+
+
);
});
diff --git a/src/App/pages/RepoDetailPage/components/TopicSection/TopicSection/TopicSection.module.scss b/src/App/pages/RepoDetailPage/components/TopicSection/TopicSection/TopicSection.module.scss
index e475bc8..91a2360 100644
--- a/src/App/pages/RepoDetailPage/components/TopicSection/TopicSection/TopicSection.module.scss
+++ b/src/App/pages/RepoDetailPage/components/TopicSection/TopicSection/TopicSection.module.scss
@@ -3,6 +3,7 @@
.root {
@include mixins.flex;
+ flex-wrap: wrap;
gap: $space-xxs;
margin-bottom: $space-l;
diff --git a/src/App/pages/UserDetailPage/UserDetailPage.module.scss b/src/App/pages/UserDetailPage/UserDetailPage.module.scss
index a205ecc..7bb359c 100644
--- a/src/App/pages/UserDetailPage/UserDetailPage.module.scss
+++ b/src/App/pages/UserDetailPage/UserDetailPage.module.scss
@@ -1,9 +1,35 @@
+@use "styles/variables" as *;
+@use "styles/mixins" as mixins;
+
.user {
- padding-bottom: 80px;
- margin-top: 40px;
+ padding: 40px 0 80px 0;
+
+ display: flex;
+ justify-content: space-between;
+ gap: 20px;
+
+ &__name {
+ display: flex;
+ flex-direction: column;
+ }
+
+ &__repos {
+ display: flex;
+ flex-direction: column;
+ align-items: end;
+ }
+
+ &__repos__menu {
+ @include mixins.flex;
+ gap: $space-xs;
+ margin-bottom: $space-s;
+ }
- &__name {
- display: flex;
- flex-direction: column;
+ @media (max-width: 1250px) {
+ & {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
}
-}
\ No newline at end of file
+ }
+}
diff --git a/src/App/pages/UserDetailPage/UserDetailPage.tsx b/src/App/pages/UserDetailPage/UserDetailPage.tsx
index a608a0f..d5fd7b7 100644
--- a/src/App/pages/UserDetailPage/UserDetailPage.tsx
+++ b/src/App/pages/UserDetailPage/UserDetailPage.tsx
@@ -11,26 +11,54 @@ import { Meta } from "utils/meta";
import { useUserPageStore } from "./context";
import { UserProvider } from "./provider";
import styles from "./UserDetailPage.module.scss";
+import { rootStore } from "store/RootStore";
const UserDetailPageContent: React.FC = observer(() => {
- const store = useUserPageStore();
+ let store = useUserPageStore();
+ const isCurrent = store.isCurrent;
+
+ if (store.isCurrent) {
+ store = rootStore.auth;
+ }
+
const user = store.user;
- if (!user) {
- return
юзер не найден
;
+ if (store.userMeta === Meta.loading) {
+ return
;
+ }
+
+ if (store.userMeta === Meta.error || !user) {
+ return
User not found
;
}
return (
- {store.userMeta === Meta.loading &&
}
-
-
-
{user.name}
-
{user.login}
+
+
+
+
+ {user.name}
+
+
+ {user.login}
+
+
+
{user.bio}
+
+
+
+
+
+
+
+ {isCurrent && (
+
+
+
+ )}
+
+
-
{user.bio}
-
-
);
});
diff --git a/src/App/pages/UserDetailPage/components/UserReposSection/UserReposSection.tsx b/src/App/pages/UserDetailPage/components/UserReposSection/UserReposSection.tsx
index e909c35..8bf3f80 100644
--- a/src/App/pages/UserDetailPage/components/UserReposSection/UserReposSection.tsx
+++ b/src/App/pages/UserDetailPage/components/UserReposSection/UserReposSection.tsx
@@ -6,13 +6,12 @@ import { Meta } from "utils/meta";
import styles from "./ReposSection.module.scss";
export const UserReposSection: React.FC<{ store: UserStore }> = observer(({ store }) => {
- const reposNum = store.repos?.length
- const repos = store.repos?.slice(0, 6)
-
- return (
-
- {store.reposMeta === Meta.loading && }
-
-
- );
- });
\ No newline at end of file
+ const repos = store.repos?.slice(0, 6);
+
+ return (
+
+ {store.reposMeta === Meta.loading && }
+
+
+ );
+});
diff --git a/src/App/pages/UserReposPage/UserReposPage.tsx b/src/App/pages/UserReposPage/UserReposPage.tsx
index f3339c1..aa30eaa 100644
--- a/src/App/pages/UserReposPage/UserReposPage.tsx
+++ b/src/App/pages/UserReposPage/UserReposPage.tsx
@@ -1,36 +1,40 @@
-import { ReposFiltersProvider, ReposProvider } from "App/pages/AllReposPage";
-import { useReposPageStore } from "App/pages/AllReposPage/context";
+import { useUserReposPageStore } from "App/pages/UserReposPage/context";
import cn from "classnames";
import { FiltersSection } from "components/FiltersSection";
import { Pagination } from "components/Pagination";
import { ReposSection } from "components/ReposSection";
import { Text } from "components/Text";
import { useParams } from "react-router";
+import { useQueryParamsStoreInit } from "store/RootStore/hooks";
+import { UserReposFiltersProvider, UserReposProvider } from "./provider";
import styles from "./UserReposPage.module.scss";
+import { observer } from "mobx-react-lite";
-const UserReposPageContent = () => {
- const store = useReposPageStore();
+const UserReposPageContent = observer(() => {
+ const store = useUserReposPageStore();
- return (
-
-
- List of user repositories
-
+ useQueryParamsStoreInit(store.query);
-
+ return (
+
+
+ List of user repositories
+
-
-
-
-
- )
-}
+
+
+
+
+
+
+ );
+});
export const UserReposPage = () => {
- const { login } = useParams<{ login: string }>();
- return (
-
-
-
- );
-}
+ const { login } = useParams<{ login: string }>();
+ return (
+
+
+
+ );
+};
diff --git a/src/App/pages/UserReposPage/context.ts b/src/App/pages/UserReposPage/context.ts
new file mode 100644
index 0000000..08e9c5c
--- /dev/null
+++ b/src/App/pages/UserReposPage/context.ts
@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+import { UserReposStore } from "store/UserReposStore";
+
+export type UserReposContextType = {
+ store: UserReposStore;
+};
+
+export const UserReposContext = createContext
(null);
+
+export const useUserReposPageStore = () => {
+ const reposContext = useContext(UserReposContext);
+ return reposContext?.store;
+};
diff --git a/src/App/pages/UserReposPage/provider.tsx b/src/App/pages/UserReposPage/provider.tsx
new file mode 100644
index 0000000..ea86621
--- /dev/null
+++ b/src/App/pages/UserReposPage/provider.tsx
@@ -0,0 +1,27 @@
+import { FiltersContext } from "components/FiltersSection/context";
+import { userReposFilterOptions } from "config/filterOptions";
+import { UserReposStore } from "store/UserReposStore";
+import { UserReposContext, useUserReposPageStore } from "./context";
+
+export const UserReposProvider = ({ ownerLogin, children }: { ownerLogin?: string; children: React.ReactNode }) => {
+ const store = new UserReposStore();
+ store.setOwnerLogin(ownerLogin);
+ store.init();
+ return {children};
+};
+
+export const UserReposFiltersProvider = ({ children }: { children: React.ReactNode }) => {
+ const reposStore = useUserReposPageStore();
+
+ return (
+
+ {children}
+
+ );
+};
diff --git a/src/App/router.tsx b/src/App/router.tsx
new file mode 100644
index 0000000..29da6bf
--- /dev/null
+++ b/src/App/router.tsx
@@ -0,0 +1,60 @@
+import App from "App/App";
+import { AllReposPage } from "App/pages/AllReposPage";
+import { AllUsersPage } from "App/pages/AllUsersPage";
+import { CreateRepoPage } from "App/pages/CreateRepoPage";
+import { LoginPage } from "App/pages/LoginPage";
+import { RepoDetailPage } from "App/pages/RepoDetailPage";
+import { UserDetailPage } from "App/pages/UserDetailPage";
+import { UserReposPage } from "App/pages/UserReposPage";
+import { AuthRoute } from "components/AuthRoute";
+
+import { routesConfig } from "config/routes";
+import { createHashRouter, Navigate, RouteObject } from "react-router";
+
+
+const routes: RouteObject[] = [
+ {
+ path: routesConfig.root.mask,
+ element: ,
+ children: [
+ {
+ index: true,
+ element: ,
+ },
+ {
+ path: routesConfig.repositories.mask,
+ element: ,
+ },
+ {
+ path: routesConfig.repoDetail.mask,
+ element: ,
+ },
+ {
+ path: routesConfig.users.mask,
+ element: ,
+ },
+ {
+ path: routesConfig.userRepos.mask,
+ element: ,
+ },
+ {
+ path: routesConfig.userDetail.mask,
+ element: ,
+ },
+ {
+ path: routesConfig.login.mask,
+ element: ,
+ },
+ {
+ path: routesConfig.createRepo.mask,
+ element: (
+
+
+
+ ),
+ },
+ ],
+ },
+];
+
+export const router = createHashRouter(routes);
\ No newline at end of file
diff --git a/src/api/AuthService.ts b/src/api/AuthService.ts
index 993f341..334350a 100644
--- a/src/api/AuthService.ts
+++ b/src/api/AuthService.ts
@@ -1,21 +1,39 @@
-import { LoginRequestParams, RegisterRequestParams } from "api/types";
-import axios from "axios";
-import { apiUrls } from "config/apiUrls";
-import { LoginModel, normalizeRegisterModel } from "store/models";
-import { RegisterModel } from "store/models";
-import { ApiResp } from "utils/apiTypes";
-import { fetch } from "utils/fetch";
+import { auth } from "config/firebase";
+import { GithubAuthProvider, signInWithPopup, signOut } from "firebase/auth";
+import { rootStore } from "store/RootStore";
export default class AuthService {
- static async Register(params: RegisterRequestParams): Promise> {
- const response = await fetch(apiUrls.auth.register(), params, {}, "post");
- console.log("DDDDDDDDD", response)
-
- return { isError: response.isError, data: normalizeRegisterModel(response.data) };
- }
+ static async login() {
+ const provider = new GithubAuthProvider();
+ provider.addScope("repo");
+ try {
+ const result = await signInWithPopup(auth, provider);
+ const user = result.user;
+ const credential = GithubAuthProvider.credentialFromResult(result);
+
+ let token = "";
+ if (credential?.accessToken !== undefined) {
+ token = credential?.accessToken;
+ }
- static async Login(params: LoginRequestParams): Promise> {
- const response = await fetch(apiUrls.auth.login(), params, {}, "post");
- return { isError: response.isError, data: response.data };
+ rootStore.auth.login(token, {
+ id: user.uid,
+ name: user.displayName || "",
+ email: user.email || "",
+ avatar: user.photoURL,
+ });
+ } catch (error) {
+ console.error("Popup error:", error);
}
-}
\ No newline at end of file
+ }
+
+ static logout() {
+ signOut(auth)
+ .then(() => {
+ rootStore.auth.logout();
+ })
+ .catch((error) => {
+ console.error("Logout error:", error);
+ });
+ }
+}
diff --git a/src/api/ReposService.ts b/src/api/ReposService.ts
index ebf745e..0554cb5 100644
--- a/src/api/ReposService.ts
+++ b/src/api/ReposService.ts
@@ -1,6 +1,10 @@
-import { ReposApiRequestParams, UsersApiRequestParams, UsersReposApiRequestParams } from "api/types";
+import { ReposApiRequestParams, UsersReposApiRequestParams } from "api/types";
+import { Buffer } from "buffer";
import { apiUrls } from "config/apiUrls";
+import { rootStore } from "store/RootStore";
import {
+ CreateRepoModel,
+ RepoApiModel,
RepoModel,
RepoOwnerModel,
normalizeRepoModel,
@@ -11,81 +15,88 @@ import { ApiResp } from "utils/apiTypes";
import { Collection } from "utils/collection";
import { fetch } from "utils/fetch";
-const isParam = (param: any) => {
- return param !== undefined && param !== null
-}
+const isParam = (param: string | number) => {
+ return param !== undefined && param !== null;
+};
export default class ReposService {
- static async getAllOrgRepos(params: ReposApiRequestParams, type: "org" | "user", ownerLogin?: string): Promise>> {
+ static async getAllOrgRepos(params: ReposApiRequestParams): Promise>> {
if (params.org === undefined || params.org === null) {
params.org = "ktsstudio";
}
- let url = apiUrls.repos.organizationRepos(params.org)
- if (type == "user" && ownerLogin) {
- url = apiUrls.users.userRepos(ownerLogin)
- }
+ const url = apiUrls.repos.organizationRepos(params.org);
const response = await fetch(url, {
type: params.type,
per_page: params.perPage,
page: params.page,
-
});
- let pagesCount = 1
+ if (response.isError) {
+ return { isError: true, data: response.data };
+ }
+
+ let pagesCount = 1;
if (response.headers?.link !== undefined) {
- const linkMatchLast = response.headers?.link.match(/page=(\d+)>; rel="last"/)
- const linkMatchPrev = response.headers?.link.match(/page=(\d+)>; rel="prev"/)
+ const linkMatchLast = response.headers?.link.match(/page=(\d+)>; rel="last"/);
+ const linkMatchPrev = response.headers?.link.match(/page=(\d+)>; rel="prev"/);
if (linkMatchLast !== null) {
- pagesCount = Number(linkMatchLast[1])
+ pagesCount = Number(linkMatchLast[1]);
} else {
- pagesCount = Number(linkMatchPrev[1]) + 1
+ pagesCount = Number(linkMatchPrev[1]) + 1;
}
}
-
return { isError: response.isError, data: normalizeReposToCollection(response.data), pagesCount: pagesCount };
}
- static async getAllUserRepos(params: UsersReposApiRequestParams, ownerLogin: string): Promise>> {
- let url = apiUrls.users.userRepos(ownerLogin)
- let q = []
+ static async getAllUserRepos(
+ params: UsersReposApiRequestParams,
+ ownerLogin: string,
+ ): Promise>> {
+ let url = apiUrls.users.userRepos(ownerLogin);
+
+ if (rootStore.auth.user?.login === ownerLogin) {
+ url = apiUrls.users.currentUserRepos();
+ }
+
+ const q = [];
if (isParam(params.repoName)) {
- url = apiUrls.search.repos()
- q.push(`${params.repoName} in:name user:${ownerLogin}`)
+ url = apiUrls.search.repos();
+ q.push(`${params.repoName} in:name user:${ownerLogin}`);
}
const reqParams = {
type: params.type,
per_page: params.perPage,
page: params.page,
- }
+ };
if (q.length) {
- reqParams.q = q.join(" ")
+ reqParams.q = q.join(" ");
}
const response = await fetch(url, reqParams);
- let responseData = response.data
+ let responseData = response.data;
if (isParam(params.repoName)) {
responseData = response.data.items;
}
- let pagesCount = 1
+ let pagesCount = 1;
if (response.headers?.link !== undefined) {
- const linkMatchLast = response.headers?.link.match(/page=(\d+)>; rel="last"/)
- const linkMatchPrev = response.headers?.link.match(/page=(\d+)>; rel="prev"/)
+ const linkMatchLast = response.headers?.link.match(/page=(\d+)>; rel="last"/);
+ const linkMatchPrev = response.headers?.link.match(/page=(\d+)>; rel="prev"/);
if (linkMatchLast !== null) {
- pagesCount = Number(linkMatchLast[1])
+ pagesCount = Number(linkMatchLast[1]);
} else {
- pagesCount = Number(linkMatchPrev[1]) + 1
+ pagesCount = Number(linkMatchPrev[1]) + 1;
}
}
@@ -95,18 +106,23 @@ export default class ReposService {
static async getByRepoName(orgName: string, repoName: string): Promise> {
const response = await fetch(apiUrls.repos.repoByName(orgName, repoName));
- return { isError: response.isError, data: normalizeRepoModel(response.data) };
+ let data;
+ if (!response.isError) {
+ data = normalizeRepoModel(response.data as RepoApiModel);
+ }
+
+ return { isError: response.isError, data: data };
}
static async getReadme(orgName: string, repoName: string): Promise> {
- const response = await fetch(
- apiUrls.repos.repoReadme(orgName, repoName),
- {},
- {
- Accept: "application/vnd.github.html+json",
- },
- );
- return response;
+ const response = await fetch(apiUrls.repos.repoReadme(orgName, repoName), { Accept: "application/vnd.github.raw" });
+
+ let readme = "";
+ if (!response.isError) {
+ readme = Buffer.from(response.data.content, "base64").toString("utf-8");
+ }
+
+ return { isError: response.isError, data: readme };
}
static async getContributors(orgName: string, repoName: string): Promise> {
@@ -120,4 +136,10 @@ export default class ReposService {
return { isError: response.isError, data: response.data };
}
+
+ static async createRepo(params: CreateRepoModel): Promise {
+ const response = await fetch(apiUrls.repos.createRepo(), params, {}, "post");
+
+ return { isError: response.isError, data: response.data };
+ }
}
diff --git a/src/api/UsersService.ts b/src/api/UsersService.ts
index e000bd5..65246bd 100644
--- a/src/api/UsersService.ts
+++ b/src/api/UsersService.ts
@@ -1,62 +1,71 @@
import { UsersApiRequestParams } from "api/types";
import { apiUrls } from "config/apiUrls";
import { normalizeUserModel } from "store/models";
-import {
- RepoModel,
- RepoOwnerModel,
- normalizeRepoOwnersToCollection,
- normalizeReposToCollection
-} from "store/models";
+import { RepoModel, RepoOwnerModel, normalizeRepoOwnersToCollection, normalizeReposToCollection } from "store/models";
import { UserModel } from "store/models/users";
import { ApiResp } from "utils/apiTypes";
import { Collection } from "utils/collection";
import { fetch } from "utils/fetch";
-const isParam = (param: any) => {
- return param !== undefined && param !== null
-}
+const isParam = (param: string | number) => {
+ return param !== undefined && param !== null;
+};
export default class UsersService {
+ static async getCurrentUser(): Promise> {
+ const response = await fetch(apiUrls.users.currentUser());
+ return { isError: response.isError, data: normalizeUserModel(response.data), headers: response.headers };
+ }
+
static async getAll(params: UsersApiRequestParams): Promise>> {
- let url = apiUrls.users.users()
- let q = []
+ let url = apiUrls.users.users();
+ const q = [];
if (isParam(params.login)) {
- url = apiUrls.search.users()
- q.push(`${params.login} in:login`)
+ url = apiUrls.search.users();
+ q.push(`${params.login} in:login`);
}
if (isParam(params.type)) {
- url = apiUrls.search.users()
- q.push(`type:${params.type}`)
+ url = apiUrls.search.users();
+ q.push(`type:${params.type}`);
}
const reqParams = {
since: params.since,
per_page: params.perPage,
- }
+ };
if (q.length) {
- reqParams.q = q.join(" ")
+ reqParams.q = q.join(" ");
}
const response = await fetch(url, reqParams);
- let responseData = response.data
+ let responseData = response.data;
if (isParam(params.login) || isParam(params.type)) {
responseData = response.data.items;
}
- return { isError: response.isError, data: normalizeRepoOwnersToCollection(responseData) };
+ return {
+ isError: response.isError,
+ data: normalizeRepoOwnersToCollection(responseData),
+ headers: response.headers,
+ };
}
static async getByLogin(login: string): Promise> {
const response = await fetch(apiUrls.users.userByLogin(login));
- return { isError: response.isError, data: normalizeUserModel(response.data) };
+ return { isError: response.isError, data: normalizeUserModel(response.data), headers: response.headers };
}
static async getRepos(login: string): Promise>> {
const response = await fetch(apiUrls.users.userRepos(login));
- return { isError: response.isError, data: normalizeReposToCollection(response.data) };
+ return { isError: response.isError, data: normalizeReposToCollection(response.data), headers: response.headers };
+ }
+
+ static async getCurrentUserRepos(): Promise>> {
+ const response = await fetch(apiUrls.users.currentUserRepos());
+ return { isError: response.isError, data: normalizeReposToCollection(response.data), headers: response.headers };
}
}
diff --git a/src/api/types.ts b/src/api/types.ts
index a61e18d..3da6f9d 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -19,13 +19,3 @@ export type UsersReposApiRequestParams = {
perPage: number | null;
};
-export type RegisterRequestParams = {
- email: string | null;
- username: string | null;
- password: string | null;
-};
-
-export type LoginRequestParams = {
- username: string | null;
- password: string | null;
-};
diff --git a/src/assets/icons/moon.svg b/src/assets/icons/moon.svg
new file mode 100644
index 0000000..d123ec0
--- /dev/null
+++ b/src/assets/icons/moon.svg
@@ -0,0 +1,7 @@
+
+
+