Skip to content

Commit

Permalink
feat: add react query
Browse files Browse the repository at this point in the history
  • Loading branch information
@AKharytonchyk
AKharytonchyk committed Mar 29, 2024
1 parent 2e4eb5e commit 7ba8423
Show file tree
Hide file tree
Showing 12 changed files with 282 additions and 214 deletions.
Binary file added public/loading.webp
View file
Binary file not shown.
90 changes: 49 additions & 41 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,10 @@ import { SettingsDrawer } from "./SettingsDrawer";
import { Dashboard } from "./components/Dashboard";
import { AuthHeader } from "./components/AuthHeader";
import { UnAuthHeader } from "./components/UnAuthHeader";
import LandingPage from "./components/LandingPage";
import LandingPage from "./pages/LandingPage";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

export const ConfigContext = React.createContext<{
octokit: GitService | null;
Expand All @@ -27,8 +30,7 @@ function App() {
const onLogin = React.useCallback(() => {
if (token) {
const octoKit = new GitService(
process.env.REACT_APP_GITHUB_API_URL ||
"https://api.github.com/",
process.env.REACT_APP_GITHUB_API_URL || "https://api.github.com/",
token
);
octoKit.testAuthentication().then((user) => {
Expand Down Expand Up @@ -91,45 +93,51 @@ function App() {

return (
<>
<ScopedCssBaseline>
<ConfigContext.Provider
value={{ octokit, repositorySettings, handleRepositorySelect }}
>
<AppBar position="static" color="default" sx={{ position: "fixed", zIndex: 100 }}>
<Toolbar sx={{ justifyContent: "flex-end" }}>
{!user?.login ? (
<UnAuthHeader setToken={setToken} onLogin={onLogin} />
) : (
<AuthHeader
user={user}
logOut={logOut}
setOpenSettings={setOpenSettings}
/>
)}
</Toolbar>
</AppBar>
<Box
component={"main"}
sx={{
display: "flex",
flexDirection: "column",
gap: 2,
justifyContent: "center",
alignItems: "center",
paddingTop: "4em",
}}
<QueryClientProvider client={queryClient}>
<ScopedCssBaseline>
<ConfigContext.Provider
value={{ octokit, repositorySettings, handleRepositorySelect }}
>
{octokit && <Dashboard />}
{!octokit && <LandingPage />}
</Box>
{octokit && (
<SettingsDrawer
opened={openSettings}
onClose={() => setOpenSettings(false)}
/>
)}
</ConfigContext.Provider>
</ScopedCssBaseline>
<AppBar
position="static"
color="default"
sx={{ position: "fixed", zIndex: 100 }}
>
<Toolbar sx={{ justifyContent: "flex-end" }}>
{!user?.login ? (
<UnAuthHeader setToken={setToken} onLogin={onLogin} />
) : (
<AuthHeader
user={user}
logOut={logOut}
setOpenSettings={setOpenSettings}
/>
)}
</Toolbar>
</AppBar>
<Box
component={"main"}
sx={{
display: "flex",
flexDirection: "column",
gap: 2,
justifyContent: "center",
alignItems: "center",
paddingTop: "4em",
}}
>
{octokit && <Dashboard />}
{!octokit && <LandingPage />}
</Box>
{octokit && (
<SettingsDrawer
opened={openSettings}
onClose={() => setOpenSettings(false)}
/>
)}
</ConfigContext.Provider>
</ScopedCssBaseline>
</QueryClientProvider>
</>
);
}
Expand Down
15 changes: 10 additions & 5 deletions src/SettingsDrawer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import React from "react";
import { Organization } from "./models/Organization";
import { ConfigContext } from "./App";
import { RepoSettingAccordion } from "./components/RepoSettingAccordion";
import { useQuery } from "@tanstack/react-query";

export type SettingsDrawerProps = {
opened: boolean;
Expand All @@ -13,12 +14,16 @@ export const SettingsDrawer: React.FC<SettingsDrawerProps> = ({
opened,
onClose,
}) => {
const [orgs, setOrgs] = React.useState<Organization[]>([]);
const { octokit } = React.useContext(ConfigContext);

React.useEffect(() => {
if(octokit) octokit?.getOrganizations().then((orgs) => setOrgs(orgs.data));
}, [octokit]);
const { data: orgs = [] } = useQuery({
queryKey: ["orgs"],
queryFn: async () => {
if (!octokit) return;
const orgs = await octokit.getOrganizations();
return orgs.data as Organization[];
},
enabled: !!octokit,
});

const orgList = React.useMemo(() => orgs.map((org) => (
<RepoSettingAccordion key={org.id} org={org} type="org" />
Expand Down
90 changes: 45 additions & 45 deletions src/components/Dashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,54 +4,52 @@ import { PullRequest } from "../models/PullRequest";
import PullRequestCard from "./PullRequestCard";
import { Box } from "@mui/material";
import Grid2 from "@mui/material/Unstable_Grid2/Grid2";
import LandingPage from "./LandingPage";
import LandingPage from "../pages/LandingPage";
import { MultiselectFilter } from "./MultiselectFilter";
import { InputFilter } from "./InputFilter";
import { useQuery } from "@tanstack/react-query";
import { PRLoadingPage } from "../pages/PRLoadingPage";

export type DashboardProps = {};

export const Dashboard: React.FC<DashboardProps> = () => {
const { octokit, repositorySettings } = React.useContext(ConfigContext);
const [pulls, setPulls] = React.useState<PullRequest[]>([]);
const activeRepositories = React.useMemo(
() =>
Object.keys(repositorySettings).filter((key) => repositorySettings[key]),
[repositorySettings]
);

React.useEffect(() => {
if (octokit && activeRepositories.length) {
const getPulls = async () => {
const { data = [], isLoading } = useQuery({
queryKey: ["pulls"],
queryFn: async () => {
if (octokit && activeRepositories.length) {
const pulls = await Promise.all(
activeRepositories.flatMap((repo) => octokit.getPullRequests(repo))
);

setPulls(
pulls
.flat()
.sort((a, b) =>
a.base.repo.full_name.localeCompare(b.base.repo.full_name)
) as any[]
);
};

getPulls();
}
}, [octokit, activeRepositories]);
return pulls
.flat()
.sort((a, b) =>
a.base.repo.full_name.localeCompare(b.base.repo.full_name)
);
}
},
});

const [filter, setFilter] = React.useState<string>("");
const [includeLabels, setIncludeLabels] = React.useState<string[]>([]);
const [excludeLabels, setExcludeLabels] = React.useState<string[]>([]);
const labels: string[] = React.useMemo(
() =>
Array.from(
new Set(pulls.map((pull) => pull.labels.map(({ name }) => name)).flat())
new Set(data.map((pull) => pull.labels.map(({ name }) => name)).flat())
),
[pulls]
[data]
);

const filteredPulls = React.useMemo(() => {
return pulls.filter((pull) => {
return data.filter((pull) => {
if (
includeLabels.length > 0 &&
!pull.labels.some(({ name }) => includeLabels.includes(name))
Expand All @@ -64,7 +62,7 @@ export const Dashboard: React.FC<DashboardProps> = () => {
return false;
if (
filter.length > 0 &&
!pull.user.login
!pull.user?.login
.toLocaleLowerCase()
.includes(filter.toLocaleLowerCase()) &&
!pull.head.repo.full_name
Expand All @@ -75,34 +73,36 @@ export const Dashboard: React.FC<DashboardProps> = () => {

return true;
});
}, [pulls, filter, includeLabels, excludeLabels]);
}, [data, filter, includeLabels, excludeLabels]);

return (
<Box padding={2} width={"calc(100vw - 2em)"}>
{pulls.length === 0 ? (
<LandingPage auth />
) : (
<Box>
<InputFilter name="Filter" onChange={setFilter} size="small" />
<MultiselectFilter
options={labels.filter((label) => !excludeLabels.includes(label))}
name="Include labels"
onChange={setIncludeLabels}
/>
<MultiselectFilter
options={labels.filter((label) => !includeLabels.includes(label))}
name="Exclude labels"
onChange={setExcludeLabels}
/>
</Box>
)}
<Grid2 container spacing={2}>
{filteredPulls.map((pull) => (
<Grid2 key={pull.id} xl={6} xs={12}>
<PullRequestCard pr={pull} />
{isLoading && <PRLoadingPage />}
{!isLoading && data.length === 0 && <LandingPage />}
{data.length > 0 && (
<>
<Box>
<InputFilter name="Filter" onChange={setFilter} size="small" />
<MultiselectFilter
options={labels.filter((label) => !excludeLabels.includes(label))}
name="Include labels"
onChange={setIncludeLabels}
/>
<MultiselectFilter
options={labels.filter((label) => !includeLabels.includes(label))}
name="Exclude labels"
onChange={setExcludeLabels}
/>
</Box>
<Grid2 container spacing={2}>
{filteredPulls.map((pull) => (
<Grid2 key={pull.id} xl={6} xs={12}>
<PullRequestCard pr={pull as unknown as PullRequest} />
</Grid2>
))}
</Grid2>
))}
</Grid2>
</>
)}
</Box>
);
};
Loading

0 comments on commit 7ba8423

Please sign in to comment.