feat: simple profile management

ResetPower · Jun 10, 2021 · 7d9bc98 · 7d9bc98
1 parent 43f4ebf
commit 7d9bc98
Show file tree

Hide file tree

Showing 9 changed files with 113 additions and 16 deletions.
diff --git a/src/components/Dialogs.tsx b/src/components/Dialogs.tsx
@@ -399,3 +399,14 @@ export function ErrorDialog(props: ErrorDialogProps): JSX.Element {
     </Dialog>
   );
 }
+
+export function DownloadDialog(props: CustomDialogProps): JSX.Element {
+  return (
+    <Dialog indentBottom>
+      <Typography>{t("downloadNotSupported")}</Typography>
+      <div className="flex justify-end">
+        <Button onClick={props.onClose}>{t("ok")}</Button>
+      </div>
+    </Dialog>
+  );
+}
diff --git a/src/components/List.tsx b/src/components/List.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
 
 export default function List(props: { children: ReactNode; className?: string }): JSX.Element {
-  return <div className={`space-y-4 ${props.className}`}>{props.children}</div>;
+  return <div className={`space-y-3 ${props.className}`}>{props.children}</div>;
 }
diff --git a/src/components/ListItemText.tsx b/src/components/ListItemText.tsx
@@ -4,9 +4,10 @@ export default function ListItemText(props: {
   primary?: string;
   secondary?: string;
   className?: string;
+  onClick?: () => void;
 }): JSX.Element {
   return (
-    <div className={props.className}>
+    <div className={props.className} onClick={props.onClick}>
       <Typography>{props.primary}</Typography>
       <p className="text-shallow">{props.secondary}</p>
     </div>

diff --git a/src/lang/en-us.ts b/src/lang/en-us.ts
@@ -74,5 +74,8 @@ export default {
   downloading: "Downloading",
   official: "Official",
   downloadProvider: "Download Provider",
-  downloadProviderIsNotAble: "Sorry, It's not supported to change download providers now.",
+  downloadProviderIsNotAble: "Sorry, it's not supported to change download providers now.",
+  downloadNotSupported: "Sorry, it's not supported to download Minecraft client now.",
+  maps: "Maps",
+  resourcePacks: "Resource Packs",
 };
diff --git a/src/lang/ja-jp.ts b/src/lang/ja-jp.ts
@@ -77,4 +77,8 @@ export default {
   downloadProvider: "ダウンロードソース",
   downloadProviderIsNotAble:
     "申し訳ありませんが、現在、ダウンロードソースの変更はサポートされていません。",
+  downloadNotSupported:
+    "申し訳ありませんが、Minecraft クライアントのダウンロードは現在サポートされていません。",
+  maps: "マップ",
+  resourcePacks: "リソースパック",
 };
diff --git a/src/lang/zh-cn.ts b/src/lang/zh-cn.ts
@@ -76,4 +76,7 @@ export default {
   official: "官方",
   downloadProvider: "下载源",
   downloadProviderIsNotAble: "暂不支持更换下载源，请谅解。",
+  downloadNotSupported: "很抱歉，目前暂不支持 Minecraft 客户端的下载。",
+  maps: "地图",
+  resourcePacks: "资源包",
 };
diff --git a/src/pages/DownloadsPage.tsx b/src/pages/DownloadsPage.tsx
@@ -6,13 +6,18 @@ import List from "../components/List";
 import { ephFetch } from "../tools/http";
 import { isSuccess } from "../tools/auth";
 import { MinecraftVersion, MinecraftVersionType } from "../core/rules";
-import Typography from "../components/Typography";
 import { t } from "../renderer/global";
+import ListItem from "../components/ListItem";
+import ListItemText from "../components/ListItemText";
+import Spin from "../components/Spin";
+import { showDialog } from "../renderer/overlay";
+import { DownloadDialog } from "../components/Dialogs";
 
 interface DownloadsPageState {
   release: boolean;
   snapshot: boolean;
   old: boolean;
+  loading: boolean;
   versions: MinecraftVersion[];
 }
 
@@ -21,6 +26,7 @@ export default class DownloadsPage extends Component<EmptyProps, DownloadsPageSt
     release: true,
     snapshot: false,
     old: false,
+    loading: true,
     versions: [],
   };
   matchType(type: MinecraftVersionType): boolean {
@@ -37,7 +43,7 @@ export default class DownloadsPage extends Component<EmptyProps, DownloadsPageSt
       if (isSuccess(res.status)) {
         const parsed = JSON.parse(res.text);
         if (parsed.hasOwnProperty("versions")) {
-          this.setState({ versions: parsed.versions });
+          this.setState({ versions: parsed.versions, loading: false });
         }
       }
     });
@@ -65,9 +71,23 @@ export default class DownloadsPage extends Component<EmptyProps, DownloadsPageSt
             {t("old")}
           </Checkbox>
         </div>
-        <List>
+        {this.state.loading && <Spin />}
+        <List className="space-y-0">
           {this.state.versions.map((item, index) => {
-            return this.matchType(item.type) && <Typography key={index}>{item.id}</Typography>;
+            return (
+              this.matchType(item.type) && (
+                <ListItem key={index}>
+                  <ListItemText
+                    primary={item.id}
+                    secondary={item.type}
+                    className="cursor-pointer"
+                    onClick={() => {
+                      showDialog((close) => <DownloadDialog onClose={close} />);
+                    }}
+                  />
+                </ListItem>
+              )
+            );
           })}
         </List>
       </Container>

diff --git a/src/pages/ProfileManagementPage.tsx b/src/pages/ProfileManagementPage.tsx
@@ -1,31 +1,86 @@
 import Container from "../components/Container";
 import Alert from "../components/Alert";
-import { Component } from "react";
+import { Component, ReactNode } from "react";
 import { t } from "../renderer/global";
-import { getProfile } from "../renderer/profiles";
+import { getProfile, MinecraftProfile } from "../renderer/profiles";
+import fs from "fs";
 import Typography from "../components/Typography";
 
 export interface ProfileManagementPageProps {
   params: { [key: string]: string };
 }
-export type ProfileManagementPageState = Record<string, never>;
+export interface ProfileManagementPageState {
+  value: number;
+  mapsList: string[];
+  resourcePacksList: string[];
+}
 
 export default class ProfileManagementPage extends Component<
   ProfileManagementPageProps,
   ProfileManagementPageState
 > {
+  state: ProfileManagementPageState = {
+    value: 0,
+    mapsList: [],
+    resourcePacksList: [],
+  };
+  TabItem = (props: { children: ReactNode; value: number }): JSX.Element => {
+    return (
+      <button
+        className={`block focus:outline-none ${
+          this.state.value === props.value ? "text-pink-500" : "text-black dark:text-white"
+        }`}
+        onClick={() => this.setState({ value: props.value })}
+      >
+        {props.children}
+      </button>
+    );
+  };
+  profile: MinecraftProfile | null;
   constructor(props: ProfileManagementPageProps) {
     super(props);
+    this.profile = getProfile(Number(this.props.params.id));
+  }
+  async componentDidMount(): Promise<void> {
+    if (this.profile !== null) {
+      const mapsDir = fs.readdirSync(`${this.profile.dir}/saves`);
+      const resourcesDir = fs.readdirSync(`${this.profile.dir}/resourcepacks`);
+      this.setState({ mapsList: mapsDir, resourcePacksList: resourcesDir });
+    }
   }
   render(): JSX.Element {
-    const profile = getProfile(Number(this.props.params.id));
     return (
       <Container>
-        {profile === null ? (
+        {this.profile === null ? (
           <Alert severity="error">Sorry. Profile Id Not Found.</Alert>
         ) : (
-          <div>
-            <Typography>{t("notSupportedYet")}</Typography>
+          <div className="flex">
+            <div className="p-6 border-r border-divide">
+              <this.TabItem value={0}>{t("maps")}</this.TabItem>
+              <this.TabItem value={1}>{t("resourcePacks")}</this.TabItem>
+            </div>
+            <div className="p-3 flex-grow">
+              <div hidden={this.state.value !== 0}>
+                {this.state.mapsList.map(
+                  (m, index) =>
+                    m !== ".DS_Store" && (
+                      /* avoid useless .DS_Store file on macOS */ <Typography key={index}>
+                        {m}
+                      </Typography>
+                    )
+                )}
+              </div>
+              <div hidden={this.state.value !== 1}>
+                {this.state.resourcePacksList.map(
+                  (m, index) =>
+                    m !== ".DS_Store" && (
+                      /* avoid useless .DS_Store file on macOS */ <Typography key={index}>
+                        {m}
+                      </Typography>
+                    )
+                )}
+              </div>
+            </div>
           </div>
         )}
       </Container>

diff --git a/src/router/history.ts b/src/router/history.ts
@@ -9,8 +9,8 @@ export interface EphLocation {
 export class EphHistory {
   loc = { pathname: "/", params: {} };
   paths = ["/"];
-  // animation lasts 100 ms
-  animationTimeout = 100;
+  // animation lasts 120 ms
+  animationTimeout = 120;
   // the only instance of EphHistory
   static inst = new EphHistory();
   private constructor() {