Skip to content

Commit ae51ff0

Browse files
hdJerryhdJerry
authored
Cra rxjs org page (#1902)
* chore: org page * chore: removed comments
1 parent ab97112 commit ae51ff0

6 files changed

Lines changed: 168 additions & 3 deletions

File tree

‎cra-rxjs-styled-components/src/App.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ import TopRepos from './routes/user-top-repos';
77
import RepoPullRequest from './routes/repo/repository-pull-request';
88
import RepoIssues from './routes/repo/repository-issues';
99
import Repo from './routes/repo';
10-
import UserRepos from './components/user-repos/UserRepos';
1110
import UserProfile from './routes/profile';
1211
import RepoBranchRoot from './routes/repo/repository-code';
1312
import RepoBranchTreePath from './routes/repo/repository-code/repository-tree/repository-tree';
1413
import RepoBranchBlobPath from './routes/repo/repository-code/repository-blob/repository-blob';
1514
import { UserProvider } from './context/UserProvider';
1615
import Index from './routes/Index';
16+
import OrgPage from './routes/orgs';
1717
import { RepoFilterProvider } from './context/RepoFilterContext';
1818

1919
function App() {
@@ -35,7 +35,7 @@ function App() {
3535
path="/orgs/:username"
3636
element={
3737
<AuthGuard>
38-
<UserRepos isOrg />
38+
<OrgPage />
3939
</AuthGuard>
4040
}
4141
/>

‎cra-rxjs-styled-components/src/components/dropdown/Dropdown.styles.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export const UserDropdownAvatarImage = styled.img`
6565
export const UserDropdownMenuItems = styled.div`
6666
position: absolute;
6767
right: 0;
68-
z-index: 30;
68+
z-index: 50;
6969
margin-top: 0.5rem;
7070
width: 14rem;
7171
transform-origin: top right;

‎cra-rxjs-styled-components/src/components/user-repos/UserRepos.styles.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,36 @@ export const NetlifyBadgeContainer = styled.div`
1717
text-align: center;
1818
background-color: white;
1919
`;
20+
21+
export const OrgHeader = styled.div`
22+
border-bottom: 1px solid var(--gray-500);
23+
background-color: var(--gray-200);
24+
position: sticky;
25+
top: 0px;
26+
z-index: 40;
27+
`;
28+
29+
export const OrgTopHeader = styled.div`
30+
padding: 0 8px;
31+
`;
32+
33+
export const OrgAbout = styled.div`
34+
display: flex;
35+
align-items: center;
36+
margin-top: 0.5rem;
37+
margin-bottom: 0.5rem;
38+
`;
39+
40+
export const OrgImage = styled.img`
41+
border-radius: 0.25rem;
42+
width: 2rem;
43+
height: 2rem;
44+
border-width: 1px;
45+
`;
46+
export const OrgName = styled.span`
47+
font-size: 1.25rem;
48+
line-height: 1.75rem;
49+
font-weight: 700;
50+
margin-left: 0.5rem;
51+
color: var(--gray-700);
52+
`;

‎cra-rxjs-styled-components/src/constants/url.constants.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,3 +67,5 @@ export const ISSUE_PR_SEARCH = (
6767
page: number
6868
) =>
6969
`${GITHUB_URL_BASE}/search/issues?q=repo:${user}/${repo}%20is:${type}%20state:${state}&per_page=${per_page}&page=${page}`;
70+
71+
export const ORG_INFO = (org: string) => `${GITHUB_URL_BASE}/orgs/${org}`;

‎cra-rxjs-styled-components/src/interfaces/org.interface.ts‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
export interface Plan {
2+
name: string;
3+
space: number;
4+
private_repos: number;
5+
filled_seats: number;
6+
seats: number;
7+
}
8+
9+
export interface IOrg {
10+
login: string;
11+
id: number;
12+
node_id: string;
13+
url: string;
14+
repos_url: string;
15+
events_url: string;
16+
hooks_url: string;
17+
issues_url: string;
18+
members_url: string;
19+
public_members_url: string;
20+
avatar_url: string;
21+
description: string;
22+
name: string;
23+
company?: any;
24+
blog: string;
25+
location?: any;
26+
email: string;
27+
twitter_username: string;
28+
is_verified: boolean;
29+
has_organization_projects: boolean;
30+
has_repository_projects: boolean;
31+
public_repos: number;
32+
public_gists: number;
33+
followers: number;
34+
following: number;
35+
html_url: string;
36+
created_at: string;
37+
updated_at: string;
38+
archived_at?: any;
39+
type: string;
40+
total_private_repos: number;
41+
owned_private_repos: number;
42+
private_gists?: any;
43+
disk_usage?: any;
44+
collaborators?: any;
45+
billing_email?: any;
46+
default_repository_permission?: any;
47+
members_can_create_repositories: boolean;
48+
two_factor_requirement_enabled?: any;
49+
members_allowed_repository_creation_type: string;
50+
members_can_create_public_repositories: boolean;
51+
members_can_create_private_repositories: boolean;
52+
members_can_create_internal_repositories: boolean;
53+
members_can_create_pages: boolean;
54+
members_can_fork_private_repositories: boolean;
55+
web_commit_signoff_required: boolean;
56+
members_can_create_public_pages: boolean;
57+
members_can_create_private_pages: boolean;
58+
plan: Plan;
59+
}

‎cra-rxjs-styled-components/src/routes/orgs.tsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import {
2+
OrgAbout,
3+
OrgHeader,
4+
OrgImage,
5+
OrgName,
6+
OrgTopHeader,
7+
} from '../components/user-repos/UserRepos.styles';
8+
import Header from '../components/header/Header';
9+
import UserRepos from '../components/user-repos/UserRepos';
10+
import { ORG_INFO } from '../constants/url.constants';
11+
import { fromFetchWithAuth } from '../hooks/auth/from-fetch-with-auth';
12+
import { useState, useEffect } from 'react';
13+
import { useParams } from 'react-router-dom';
14+
import { tap } from 'rxjs';
15+
import { IOrg } from '../interfaces/org.interface';
16+
import { LoadingBulletList } from '../components/Loading';
17+
18+
export default function OrgPage() {
19+
const [loading, setLoading] = useState(true);
20+
const [orgInfo, setOrgInfo] = useState<IOrg>();
21+
const { username } = useParams();
22+
23+
const request = (url: string) =>
24+
fromFetchWithAuth(url, {
25+
selector: (response: Response) => {
26+
return response.json();
27+
},
28+
});
29+
30+
useEffect(() => {
31+
if (!username) {
32+
return;
33+
}
34+
const GITHUB_URL = ORG_INFO(username);
35+
const subscription = request(GITHUB_URL)
36+
.pipe(
37+
tap((data) => {
38+
if (data) {
39+
setOrgInfo(data);
40+
setLoading(false);
41+
}
42+
})
43+
)
44+
.subscribe();
45+
return () => {
46+
subscription.unsubscribe();
47+
};
48+
}, [username]);
49+
50+
return (
51+
<>
52+
<Header />
53+
<OrgHeader>
54+
<OrgTopHeader>
55+
{loading && <LoadingBulletList />}
56+
{orgInfo && (
57+
<OrgAbout>
58+
<OrgImage
59+
src={orgInfo.avatar_url}
60+
alt="Org Avatar"
61+
data-testid="org about avatar"
62+
/>
63+
<OrgName data-testid="org about name">{orgInfo.name}</OrgName>
64+
</OrgAbout>
65+
)}
66+
</OrgTopHeader>
67+
</OrgHeader>
68+
<UserRepos isOrg />
69+
</>
70+
);
71+
}

0 commit comments

Comments
 (0)