Skip to content

Commit

Permalink
rewrite modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@E-boi
E-boi committed Jan 11, 2023
1 parent fdda9d1 commit 0e6271b
Show file tree
Hide file tree
Showing 27 changed files with 1,275 additions and 1,040 deletions.
5 changes: 2 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@
"license": "ISC",
"devDependencies": {
"@electron/asar": "^3.2.1",
"@fal-works/esbuild-plugin-global-externals": "^2.1.2",
"@octokit/openapi-types": "^14.0.0",
"@types/node": "^18.11.2",
"@types/react": "^18.0.26",
Expand All @@ -36,18 +35,18 @@
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-react": "^7.31.10",
"prettier": "^2.8.1",
"replugged": "4.0.0-beta0.19",
"replugged": "4.0.0-beta0.20",
"tsx": "^3.10.3",
"typescript": "^4.8.4"
},
"dependencies": {
"@octokit/plugin-paginate-rest": "^5.0.1",
"@octokit/rest": "^19.0.5",
"@primer/react": "^35.16.0",
"@primer/styled-octicons": "^17.10.0",
"deepmerge": "^4.2.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-is": "^18.2.0",
"styled-components": "^5.3.6"
}
}
212 changes: 212 additions & 0 deletions plugins/githubindiscord/Modal/Code.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,212 @@
import { components } from "@octokit/openapi-types";
import { Avatar, Box, Breadcrumbs, Link, RelativeTime, Text, Truncate } from "@primer/react";
import { TreeView } from "@primer/react/drafts";
import { FileDirectoryFillIcon, FileIcon } from "@primer/styled-octicons";
import { useCallback, useEffect, useState } from "react";
import { webpack } from "replugged";
import { TabProps } from ".";
import { SelectMenu } from "../components";
import { TreeWithContent, getFile, pluginSettings } from "../utils";

const parser: any = webpack.getByProps("parse", "parseTopic");

export default (props: TabProps) => {
return pluginSettings.get("view", "standard") === "treeview" ? (
<Tree {...props} />
) : (
<StandardView {...props} />
);
};

function StandardView({ tree, branch, branches, url, switchBranches }: TabProps) {
const [folder, setFolder] = useState<{
current: { latestCommit: components["schemas"]["commit"]; tree: TreeWithContent[] };
prevs: Array<{ latestCommit: components["schemas"]["commit"]; tree: TreeWithContent[] }>;
}>({
current: { tree, latestCommit: branch.commit },
prevs: [],
});
const [file, setFile] = useState<
(components["schemas"]["blob"] & { filename: string; type: string }) | null
>(null);

useEffect(
() =>
setFolder({
current: { tree, latestCommit: branch.commit },
prevs: [],
}),
[tree],
);

const getBlob = useCallback(async (file: TreeWithContent) => {
const f = await getFile(url, file);
setFile(f);
}, []);
let path: string[] = folder.current.tree[0].path!.split("/");
path.pop();
return (
<>
<Box className="repository-options">
{SelectMenu && (
<SelectMenu
className="Gbranches"
value={branch.name}
options={branches.map((branch) => ({ value: branch.name, label: branch.name }))}
onChange={(value: string) => {
switchBranches(value);
// changeBranch(branches.find((branch) => branch.name === value)!);
}}
/>
)}
{folder.prevs.length ? (
<Breadcrumbs>
<Breadcrumbs.Item
onClick={() =>
setFolder({ current: { tree, latestCommit: branch.commit }, prevs: [] })
}>
{url.split("/")[1]}
</Breadcrumbs.Item>
{path.map((inPath, idx) => (
<Breadcrumbs.Item
selected={idx === path.length - 1}
onClick={() => {
const goIn = folder.prevs[idx + 1];
folder.prevs.splice(idx + 1, folder.prevs.length);
console.log(folder.prevs);
setFolder({ current: goIn, prevs: folder.prevs });
}}>
{inPath}
</Breadcrumbs.Item>
))}
</Breadcrumbs>
) : null}
</Box>
<Box borderColor="border.default" borderStyle="solid" borderWidth={1} borderRadius={2}>
<Box
p={3}
bg="canvas.subtle"
display="flex"
alignItems="center"
borderTopLeftRadius={6}
borderTopRightRadius={6}>
<Avatar src={folder.current.latestCommit.author!.avatar_url} />
<Truncate
maxWidth={"100%"}
title={`${folder.current.latestCommit.author?.login} ${folder.current.latestCommit.commit.message}`}>
<Text fontWeight="bold" sx={{ marginLeft: "5px" }}>
{folder.current.latestCommit.author?.login}
<Text fontWeight="normal">
{" "}
{folder.current.latestCommit.commit.message.split("\n\n")[0]}
</Text>
</Text>
</Truncate>
<RelativeTime
sx={{ marginLeft: "auto" }}
datetime={folder.current.latestCommit.commit.author?.date}
format="auto"
/>
</Box>
{folder.prevs.length > 0 && (
<Box
borderColor="border.muted"
borderTopWidth={1}
borderStyle="solid"
px={3}
py={2}
sx={{ ":hover": { bg: "canvas.subtle", cursor: "pointer" } }}
onClick={() => {
setFolder((prev) => {
const current = prev.prevs.pop();
return {
current: current ?? { tree, latestCommit: branch.commit },
prevs: prev.prevs,
};
});
setFile(null);
}}>
<Link sx={{ width: "100%" }}>..</Link>
</Box>
)}
{file && (
<Box
borderColor="border.muted"
borderTopWidth={1}
borderStyle="solid"
sx={{ userSelect: "text", code: { bg: "inherit" } }}>
{parser.defaultRules.codeBlock.react(
{ content: window.atob(file.content), lang: file.type },
null,
{},
)}
</Box>
)}
{!file &&
folder.current.tree.map((c) => (
<Box
borderColor="border.muted"
borderTopWidth={1}
borderStyle="solid"
display="flex"
alignItems="center"
sx={{ ":hover": { bg: "canvas.subtle" } }}
px={3}
py={2}>
{c.type === "tree" ? (
<FileDirectoryFillIcon color="marketingIcon.primary" size={16} mr={2} />
) : (
<FileIcon color="fg.muted" size={16} mr={2} />
)}
<Link
sx={{ color: "fg.default" }}
onClick={() => {
if (c.type === "tree")
setFolder((prev) => ({
current: c as any,
prevs: [...prev.prevs, folder.current],
}));
else {
getBlob(c);
setFolder((prev) => ({
current: prev.current,
prevs: [...prev.prevs, prev.current],
}));
}
}}>
{c.filename}
</Link>
</Box>
))}
</Box>
</>
);
}

function Tree({ tree }: TabProps) {
return (
<TreeView aria-label="Files">
{tree.map((tree) => (
<TreeViewItem tree={tree} />
))}
</TreeView>
);
}

function TreeViewItem({ tree }: { tree: TreeWithContent }) {
return (
<TreeView.Item id={tree.path!}>
<TreeView.LeadingVisual>
{tree.type === "tree" ? <TreeView.DirectoryIcon /> : <FileIcon />}
</TreeView.LeadingVisual>
{tree.filename}
{tree.type === "tree" && (
<TreeView.SubTree>
{tree.tree!.map((t) => (
<TreeViewItem tree={t} />
))}
</TreeView.SubTree>
)}
</TreeView.Item>
);
}
56 changes: 56 additions & 0 deletions plugins/githubindiscord/Modal/Comment.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import { Avatar, Box, CaretProps, PointerBox, RelativeTime, Text, Timeline } from "@primer/react";
import { BetterSystemStyleObject } from "@primer/react/lib/sx";

export const TimelineComment = ({
comment,
caret,
sx,
}: {
comment: any;
caret?: CaretProps["location"];
sx?: BetterSystemStyleObject;
}) => {
return (
<Timeline.Item sx={{ marginLeft: "70px" }}>
{comment.user && (
<Avatar
src={comment.user?.avatar_url}
size={40}
sx={{ position: "absolute", left: "-72px" }}
/>
)}
<Timeline.Body sx={{ maxWidth: "100%", flex: "auto", mt: 0 }}>
<Box
sx={sx}
ml={-3}
position="relative"
color="fg.default"
backgroundColor="canvas.default">
<PointerBox
caret={caret ?? "left"}
px={3}
py={2}
borderColor="border.default"
borderWidth={1}
borderBottomLeftRadius={0}
borderBottomRightRadius={0}
bg="canvas.subtle">
<Text>
{comment.user?.login} commented <RelativeTime datetime={comment.created_at} />
</Text>
</PointerBox>
<Box
py={1}
px={3}
borderColor="border.default"
borderWidth={1}
borderStyle="solid"
borderTop={0}
borderBottomLeftRadius={2}
borderBottomRightRadius={2}
dangerouslySetInnerHTML={{ __html: comment.body }}></Box>
</Box>
</Timeline.Body>
</Timeline.Item>
);
};
59 changes: 0 additions & 59 deletions plugins/githubindiscord/Modal/CommitsModal/Commit.tsx
View file

This file was deleted.

Loading

0 comments on commit 0e6271b

Please sign in to comment.