10 | <ListArea /> 11 | <Footer /> 12 | </main> 13 | ); 14 | } 15 | 16 | export default App; 17 | -------------------------------------------------------------------------------- /src/Title.css: -------------------------------------------------------------------------------- 1 | hgroup { 2 | margin-bottom: 2em; 3 | } 4 | 5 | h1 { 6 | margin-top: 2rem; 7 | margin-bottom: 0.5rem; 8 | display: flex; 9 | gap: 0.75rem; 10 | align-items: center; 11 | } 12 | 13 | hgroup p { 14 | font-size: 125%; 15 | margin-top: 0; 16 | } 17 | 18 | .logo { 19 | height: 1.1em; 20 | } 21 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Repo Overseer", 3 | "name": "Repo Overseer", 4 | "icons": [ 5 | { 6 | "src": "logo.png", 7 | "type": "image/png", 8 | "sizes": "320x320" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#5e9aff", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/Footer.tsx: -------------------------------------------------------------------------------- 1 | import './Footer.css'; 2 | 3 | export default function Footer() { 4 | return ( 5 | <footer> 6 | Made by <a href="https://github.com/BrandonXLF">Brandon Fowler</a>.{' '} 7 | <a href="https://github.com/BrandonXLF/repo-overseer"> 8 | View source code 9 | </a> 10 | {''}. 11 | </footer> 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | const root = ReactDOM.createRoot( 7 | document.getElementById('root') as HTMLElement, 8 | ); 9 | root.render( 10 | <React.StrictMode> 11 | <App /> 12 | </React.StrictMode>, 13 | ); 14 | -------------------------------------------------------------------------------- /src/Title.tsx: -------------------------------------------------------------------------------- 1 | import './Title.css'; 2 | 3 | export default function Title() { 4 | return ( 5 | <hgroup> 6 | <h1> 7 | <img 8 | src="logo-half.png" 9 | className="logo" 10 | alt="Repo Overseer logo" 11 | /> 12 | <span>Repo Overseer</span> 13 | </h1> 14 | <p> 15 | View issues and pull requests in all your GitHub repositories. 16 | </p> 17 | </hgroup> 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | .config.php 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | -------------------------------------------------------------------------------- /src/NextStatus.tsx: -------------------------------------------------------------------------------- 1 | import ErrorDetails from './ErrorDetails'; 2 | import { RequestStatus } from './ListArea'; 3 | 4 | export default function NextStatus({ 5 | status, 6 | }: Readonly<{ status: RequestStatus | undefined }>) { 7 | switch (status?.state) { 8 | case 'loading': 9 | return <div>Loading...</div>; 10 | case 'error': 11 | return <ErrorDetails error={status.error} reset={status.reset} />; 12 | case undefined: 13 | return null; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/issue.svg: -------------------------------------------------------------------------------- 1 | <svg 2 | xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" 3 | stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" 4 | class="icon icon-tabler icons-tabler-outline icon-tabler-circle-dot" 5 | > 6

85 | {types.map((type) => ( 86 | 96 | ))} 97 |

98 | 124 |

125 | ); 126 | } 127 | -------------------------------------------------------------------------------- /src/UserActions.tsx: -------------------------------------------------------------------------------- 1 | import { request } from '@octokit/request'; 2 | import { useEffect, useState } from 'react'; 3 | import './UserActions.css'; 4 | import './TopActions.css'; 5 | 6 | const ALL_SCOPE = 'repo'; 7 | 8 | const modes = { 9 | ALL: 'Public + private repos', 10 | PUBLIC: 'Public repos only', 11 | }; 12 | 13 | async function doAuth(allRepos?: boolean) { 14 | window.open( 15 | `https://github.com/login/oauth/authorize?client_id=${process.env.REACT_APP_CLIENT_ID}&scope=${allRepos ? ALL_SCOPE : ''}`, 16 | ); 17 | } 18 | 19 | interface User { 20 | name: string; 21 | all: boolean; 22 | } 23 | 24 | export default function UserActions({ 25 | onUserChanged, 26 | onAuthToken, 27 | }: Readonly<{ 28 | onUserChanged: (apiUser: string) => void; 29 | onAuthToken: (auth: string) => void; 30 | }>) { 31 | const [signInAllRepos, setSignInAllRepos] = useState(true); 32 | const [auth, setAuth] = useState( 33 | () => localStorage.getItem('repo-overseer-auth') ?? '', 34 | ); 35 | const [user, setUser] = useState(); 36 | 37 | // Process OAuth callbacks 38 | useEffect(() => { 39 | const onMessage = async (e: MessageEvent) => { 40 | if ( 41 | e.origin !== window.location.origin || 42 | e.data.source !== 'github-auth' 43 | ) 44 | return; 45 | 46 | setAuth(`Bearer ${e.data.token}`); 47 | }; 48 | 49 | window.addEventListener('message', onMessage); 50 | return () => window.removeEventListener('message', onMessage); 51 | }, []); 52 | 53 | // Update user when auth changes 54 | useEffect(() => { 55 | if (!auth) { 56 | setUser(undefined); 57 | return; 58 | } 59 | 60 | (async () => { 61 | const res = await request('GET /user', { 62 | headers: { 63 | authorization: auth, 64 | }, 65 | }); 66 | 67 | setUser({ 68 | name: res.data.login, 69 | all: 70 | res.headers['x-oauth-scopes'] 71 | ?.split(',') 72 | .includes(ALL_SCOPE) ?? false, 73 | }); 74 | })(); 75 | }, [auth]); 76 | 77 | // Dispatch event and save authorization token 78 | useEffect(() => { 79 | onAuthToken(auth); 80 | localStorage.setItem('repo-overseer-auth', auth); 81 | }, [onAuthToken, auth]); 82 | 83 | // Dispatch user changed event 84 | useEffect(() => { 85 | onUserChanged(user?.name ?? ''); 86 | }, [onUserChanged, user]); 87 | 88 | return ( 89 |

90 | {auth ? ( 91 | <> 92 | {user ? ( 93 | <> 94 | {user.name ?? 'Loading...'} 95 | 96 | ({user.all ? modes.ALL : modes.PUBLIC}) 97 | 98 | 99 | ) : ( 100 | 'Loading...' 101 | )} 102 | 110 | 111 | ) : ( 112 | <> 113 | 122 | 125 | 126 | )} 127 |

128 | ); 129 | } 130 | -------------------------------------------------------------------------------- /src/ListArea.tsx: -------------------------------------------------------------------------------- 1 | import { request } from '@octokit/request'; 2 | import { components } from '@octokit/openapi-types'; 3 | import { useCallback, useEffect, useState } from 'react'; 4 | import { RequestError } from '@octokit/request-error'; 5 | import UserActions from './UserActions'; 6 | import SearchForm from './SearchForm'; 7 | import ListTabs from './ListTabs'; 8 | import IssueList from './IssueList'; 9 | import './ListArea.css'; 10 | 11 | export type RequestStatus = 12 | | { 13 | state: 'loading'; 14 | } 15 | | { 16 | state: 'error'; 17 | error: string; 18 | reset?: string; 19 | }; 20 | 21 | export type List = 22 | | RequestStatus 23 | | { 24 | state: 'unset'; 25 | } 26 | | { 27 | state: 'error'; 28 | error: string; 29 | reset?: string; 30 | } 31 | | { 32 | state: 'loaded'; 33 | items: components['schemas']['issue-search-result-item'][]; 34 | }; 35 | 36 | const nextPattern = /(?<=<)(\S*)(?=>; rel="Next")/i; 37 | 38 | export default function ListArea() { 39 | const [list, setList] = useState({ state: 'unset' }); 40 | 41 | const [typeFilter, setTypeFilter] = useState(''); 42 | const [stateFilter, setStateFilter] = useState(''); 43 | const [repoOwner, setRepoOwner] = useState(''); 44 | const [auth, setAuth] = useState(''); 45 | const [apiUser, setApiUser] = useState(''); 46 | const [nextStatus, setNextStatus] = useState( 47 | undefined, 48 | ); 49 | const [nextPage, setNextPage] = useState(null); 50 | 51 | const processNewOwner = useCallback((newOwner: string) => { 52 | setRepoOwner(newOwner); 53 | }, []); 54 | 55 | const makeRequest = useCallback( 56 | async (loadMoreRequest?: boolean) => { 57 | if (!loadMoreRequest) { 58 | setNextStatus(undefined); 59 | } 60 | 61 | if (!repoOwner) { 62 | setList({ state: 'unset' }); 63 | return; 64 | } 65 | 66 | const setStatus = loadMoreRequest ? setNextStatus : setList; 67 | setStatus({ state: 'loading' }); 68 | 69 | try { 70 | const res = await request('GET /search/issues', { 71 | q: `user:${repoOwner} ${stateFilter} ${typeFilter} sort:updated-desc`, 72 | headers: { 73 | authorization: auth, 74 | }, 75 | page: loadMoreRequest ? (nextPage ?? 1) : undefined, 76 | }); 77 | 78 | const nextUrl = res.headers.link?.match(nextPattern)?.[0]; 79 | const newNextPage = 80 | nextUrl && new URL(nextUrl).searchParams.get('page'); 81 | setNextPage(newNextPage ? +newNextPage : null); 82 | 83 | if (loadMoreRequest) { 84 | setList((prevList) => { 85 | if (prevList.state !== 'loaded') { 86 | return prevList; 87 | } 88 | 89 | return { 90 | state: 'loaded', 91 | items: [...prevList.items, ...res.data.items], 92 | }; 93 | }); 94 | 95 | setNextStatus(undefined); 96 | } else { 97 | setList({ 98 | state: 'loaded', 99 | items: res.data.items, 100 | }); 101 | } 102 | } catch (e) { 103 | if (!(e instanceof RequestError)) throw e; 104 | 105 | const obj: { 106 | state: 'error'; 107 | error: string; 108 | reset?: string; 109 | } = { 110 | state: 'error', 111 | error: e.message, 112 | }; 113 | 114 | if (e.message.includes('rate limit')) { 115 | obj.reset = e.response?.headers['x-ratelimit-reset'] ?? ''; 116 | } 117 | 118 | setStatus(obj); 119 | } 120 | }, 121 | [auth, nextPage, repoOwner, stateFilter, typeFilter], 122 | ); 123 | 124 | useEffect(() => { 125 | makeRequest(); 126 | // eslint-disable-next-line react-hooks/exhaustive-deps 127 | }, [auth, repoOwner, stateFilter, typeFilter]); 128 | 129 | return ( 130 |

131 |

132 | 136 | 137 |

138 |

139 | 144 |

145 |

146 | makeRequest(true) : undefined 151 | } 152 | /> 153 |

154 |

155 | ); 156 | } 157 | --------------------------------------------------------------------------------