From 77f89fde3bda0069e855537dc7591d469faae6e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=82=B9=E7=AC=91=E5=AF=92?= Date: Sun, 17 Mar 2024 02:07:25 -0400 Subject: [PATCH] refactor: simplify code --- src/components/AppWindow.tsx | 66 ++++++------- src/components/Launchpad.tsx | 33 +++---- src/components/Spotlight.tsx | 106 +++++++++------------ src/components/apps/Bear.tsx | 20 ++-- src/components/apps/Terminal.tsx | 8 +- src/components/dock/DockItem.tsx | 4 +- src/components/menus/Battery.tsx | 6 +- src/components/menus/ControlCenterMenu.tsx | 74 +++++++------- src/components/menus/TopBar.tsx | 41 ++++---- src/pages/Login.tsx | 4 +- src/styles/component.css | 2 +- 11 files changed, 166 insertions(+), 198 deletions(-) diff --git a/src/components/AppWindow.tsx b/src/components/AppWindow.tsx index 647eb4b6..acb75b6a 100644 --- a/src/components/AppWindow.tsx +++ b/src/components/AppWindow.tsx @@ -2,41 +2,37 @@ import React from "react"; import { Rnd } from "react-rnd"; import { minMarginX, minMarginY, appBarHeight } from "~/utils"; -const FullIcon = ({ size }: { size: number }) => { - return ( - - - - ); -}; - -const ExitFullIcon = ({ size }: { size: number }) => { - return ( - - - - ); -}; +const FullIcon = ({ size }: { size: number }) => ( + + + +); + +const ExitFullIcon = ({ size }: { size: number }) => ( + + + +); interface TrafficProps { id: string; diff --git a/src/components/Launchpad.tsx b/src/components/Launchpad.tsx index 47cd2ebf..a60bcfcd 100644 --- a/src/components/Launchpad.tsx +++ b/src/components/Launchpad.tsx @@ -63,26 +63,19 @@ export default function Launchpad({ show, toggleLaunchpad }: LaunchpadProps) { grid="~ flow-row cols-4 sm:cols-7" > {search().map((app) => ( -
-
- e.stopPropagation()} - > - {app.title} - - - {app.title} - -
+
+ e.stopPropagation()} + > + {app.title} + + + {app.title} +
))}
diff --git a/src/components/Spotlight.tsx b/src/components/Spotlight.tsx index 9a54bd7e..b76ca58b 100644 --- a/src/components/Spotlight.tsx +++ b/src/components/Spotlight.tsx @@ -3,18 +3,18 @@ import { format } from "date-fns"; import { apps, launchpadApps } from "~/configs"; import type { LaunchpadData, AppsData } from "~/types"; -const allApps: { [key: string]: (LaunchpadData | AppsData)[] } = { +const APPS: { [key: string]: (LaunchpadData | AppsData)[] } = { app: apps, portfolio: launchpadApps }; -const getRandom = (min: number, max: number): number => { +const getRandom = (min: number, max: number) => { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; }; -const getRandomDate = (): string => { +const getRandomDate = () => { const timeStamp = new Date().getTime(); const randomStamp = getRandom(0, timeStamp); const date = format(randomStamp, "MM/dd/yyyy"); @@ -35,6 +35,7 @@ export default function Spotlight({ btnRef }: SpotlightProps) { const spotlightRef = useRef(null); + const inputRef = useRef(null); const [selectedIndex, setSelectedIndex] = useState(0); const [clickedID, setClickedID] = useState(""); @@ -80,25 +81,24 @@ export default function Spotlight({ const search = (type: string) => { if (searchText === "") return []; + const text = searchText.toLowerCase(); - const list = allApps[type].filter((item: LaunchpadData | AppsData) => { - return ( + return APPS[type].filter( + (item: LaunchpadData | AppsData) => item.title.toLowerCase().includes(text) || item.id.toLowerCase().includes(text) - ); - }); - return list; + ); }; - const handleClick = (id: string): void => { + const handleClick = (id: string) => { setClickedID(id); }; - const handleDoubleClick = (id: string): void => { + const handleDoubleClick = (id: string) => { setClickedID(id); setDoubleClicked(true); }; - const launchSelectedApp = (): void => { + const launchSelectedApp = () => { if (curDetails.type === "app" && !curDetails.link) { const id = curDetails.id; if (id === "launchpad") toggleLaunchpad(true); @@ -126,20 +126,15 @@ export default function Spotlight({
  • handleClick(app.id)} onDoubleClick={() => handleDoubleClick(app.id)} > -
    - {app.title} +
    + {app.title}
    -
    +
    {app.title}
    • @@ -153,7 +148,7 @@ export default function Spotlight({ }; }; - const updateAppList = (): void => { + const updateAppList = () => { const app = getTypeAppList("app", 0); const portfolio = getTypeAppList("portfolio", app.appIdList.length); @@ -184,49 +179,45 @@ export default function Spotlight({ setAppList(newAppList); }; - const setCurrentDetailsWithType = (app: any, type: string): void => { - const details = app; - details.type = type; - setCurDetails(details); - }; + const setCurrentDetailsWithType = (app: any, type: string) => + setCurDetails({ + ...app, + type + }); - const updateCurrentDetails = (): void => { + const updateCurrentDetails = () => { if (appIdList.length === 0 || searchText === "") { setCurDetails(null); return; } const appId = appIdList[selectedIndex]; - const elem = document.querySelector(`#spotlight-${appId}`) as HTMLElement; - const id = appId; - const type = elem.dataset.appType as string; - const app = allApps[type].find((item: LaunchpadData | AppsData) => { - return item.id === id; - }); + const element = document.querySelector(`#spotlight-${appId}`) as HTMLElement; + const type = element.dataset.appType as string; + const app = APPS[type].find((item: LaunchpadData | AppsData) => item.id === appId); + setCurrentDetailsWithType(app, type); }; - const updateHighlight = (prevIndex: number, curIndex: number): void => { + const updateHighlight = (prevIndex: number, curIndex: number) => { if (appIdList.length === 0) return; // remove highlight const prevAppId = appIdList[prevIndex]; const prev = document.querySelector(`#spotlight-${prevAppId}`) as HTMLElement; - let classes = prev.className; - classes = classes.replace(textWhite, textBlack); - classes = classes.replace(textSelected, "bg-transparent"); - prev.className = classes; + prev.className = prev.className + .replace(textWhite, textBlack) + .replace(textSelected, "bg-transparent"); // add highlight const curAppId = appIdList[curIndex]; const cur = document.querySelector(`#spotlight-${curAppId}`) as HTMLElement; - classes = cur.className; - classes = classes.replace(textBlack, textWhite); - classes = classes.replace("bg-transparent", textSelected); - cur.className = classes; + cur.className = cur.className + .replace(textBlack, textWhite) + .replace("bg-transparent", textSelected); }; - const handleKeyPress = (e: React.KeyboardEvent): void => { + const handleKeyPress = (e: React.KeyboardEvent) => { const keyCode = e.key; const numApps = appIdList.length; @@ -247,7 +238,7 @@ export default function Spotlight({ } }; - const handleInputChange = (e: React.ChangeEvent): void => { + const handleInputChange = (e: React.ChangeEvent) => { // update highlighted line updateHighlight(selectedIndex, 0); // current selected id go back to 0 @@ -256,16 +247,11 @@ export default function Spotlight({ setSearchText(e.target.value); }; - const focusOnInput = (): void => { - const input = document.querySelector("#spotlight-input") as HTMLElement; - input.focus(); - }; - return (
    inputRef.current?.focus()} ref={spotlightRef} >
    {curDetails.title} {searchText !== "" && ( -
    -
    +
    +
    {appList}
    {curDetails && ( -
    -
    +
    +
    {curDetails.title}
    -
    -
    +
    +
    Kind
    Size
    Created
    Modified
    Last opened
    -
    +
    {curDetails.type === "app" ? "Application" : "Portfolio"}
    {`${getRandom(0, 999)} G`}
    {getRandomDate()}
    diff --git a/src/components/apps/Bear.tsx b/src/components/apps/Bear.tsx index 12bffe2d..46ba4fe9 100644 --- a/src/components/apps/Bear.tsx +++ b/src/components/apps/Bear.tsx @@ -95,15 +95,15 @@ const Middlebar = ({ items, cur, setContent }: MiddlebarProps) => { } hover:(bg-white dark:bg-gray-900)`} onClick={() => setContent(item.id, item.file, index)} > -
    -
    +
    +
    - + {item.title} {item.link && ( { )}
    -
    +
    {item.excerpt}
    @@ -217,21 +217,17 @@ const Bear = () => { return (
    -
    +
    -
    +
    -
    +
    diff --git a/src/components/apps/Terminal.tsx b/src/components/apps/Terminal.tsx index 9b93e31b..0b514ff1 100644 --- a/src/components/apps/Terminal.tsx +++ b/src/components/apps/Terminal.tsx @@ -9,17 +9,13 @@ const getEmoji = () => { return EMOJIS[Math.floor(Math.random() * EMOJIS.length)]; }; -interface HowDareProps { - setRMRF: (value: boolean) => void; -} - interface TerminalState { rmrf: boolean; content: JSX.Element[]; } // rain animation is adopted from: https://codepen.io/P3R0/pen/MwgoKv -const HowDare = (props: HowDareProps) => { +const HowDare = ({ setRMRF }: { setRMRF: (value: boolean) => void }) => { const FONT_SIZE = 12; const [emoji, setEmoji] = useState(""); @@ -76,7 +72,7 @@ const HowDare = (props: HowDareProps) => {
    props.setRMRF(false)} + onClick={() => setRMRF(false)} >
    diff --git a/src/components/dock/DockItem.tsx b/src/components/dock/DockItem.tsx index f466a348..bad2578c 100644 --- a/src/components/dock/DockItem.tsx +++ b/src/components/dock/DockItem.tsx @@ -97,10 +97,10 @@ export default function DockItem({
  • openApp(id) : () => {}} - className="flex flex-col justify-end mb-1 transition duration-150 ease-in origin-bottom" + className="relative flex flex-col justify-end mb-1" >

    diff --git a/src/components/menus/Battery.tsx b/src/components/menus/Battery.tsx index 26d23fe5..e9eb28a1 100644 --- a/src/components/menus/Battery.tsx +++ b/src/components/menus/Battery.tsx @@ -1,11 +1,11 @@ export default function Battery() { const batteryState = useBattery(); - const width = (): number => { + const width = () => { return 0.1 + batteryState.level * 0.96; }; - const color = (): string => { + const color = () => { if (batteryState.charging) return "bg-green-400"; if (batteryState.level < 0.2) return "bg-red-500"; @@ -20,7 +20,7 @@ export default function Battery() {

    {batteryState.charging && ( - + )}
    • diff --git a/src/components/menus/ControlCenterMenu.tsx b/src/components/menus/ControlCenterMenu.tsx index 5c64543b..eeef0d60 100644 --- a/src/components/menus/ControlCenterMenu.tsx +++ b/src/components/menus/ControlCenterMenu.tsx @@ -9,23 +9,21 @@ interface SliderProps { setValue: (value: number) => void; } -const SliderComponent = ({ icon, value, setValue }: SliderProps) => { - return ( -
    -
    - -
    - setValue(v)} - /> +const SliderComponent = ({ icon, value, setValue }: SliderProps) => ( +
    +
    +
    - ); -}; + setValue(v)} + /> +
    +); interface CCMProps { toggleControlCenter: () => void; @@ -80,9 +78,9 @@ export default function ControlCenterMenu({
    -
    - Wi-Fi - {wifi ? "Home" : "Off"} +
    +
    Wi-Fi
    +
    {wifi ? "Home" : "Off"}
    @@ -92,9 +90,9 @@ export default function ControlCenterMenu({ >
    -
    - Bluetooth - {bluetooth ? "On" : "Off"} +
    +
    Bluetooth
    +
    {bluetooth ? "On" : "Off"}
    @@ -104,13 +102,13 @@ export default function ControlCenterMenu({ >
    -
    - AirDrop - {airdrop ? "Contacts Only" : "Off"} +
    +
    AirDrop
    +
    {airdrop ? "Contacts Only" : "Off"}
    -
    +
    {dark ? ( @@ -118,16 +116,16 @@ export default function ControlCenterMenu({ )}
    -
    - {dark ? "Dark Mode" : "Light Mode"} -
    +
    {dark ? "Dark Mode" : "Light Mode"}
    -
    +
    - Keyboard Brightness + + Keyboard Brightness +
    toggleFullScreen(!fullscreen)} > {fullscreen ? ( @@ -135,7 +133,7 @@ export default function ControlCenterMenu({ ) : ( )} - + {fullscreen ? "Exit Fullscreen" : "Enter Fullscreen"}
    @@ -147,11 +145,11 @@ export default function ControlCenterMenu({ Sound
    -
    - cover art -
    - {music.title} - {music.artist} +
    + cover art +
    +
    {music.title}
    +
    {music.artist}
    {playing ? ( toggleAudio(false)} /> diff --git a/src/components/menus/TopBar.tsx b/src/components/menus/TopBar.tsx index 7e7d483d..be69fd52 100644 --- a/src/components/menus/TopBar.tsx +++ b/src/components/menus/TopBar.tsx @@ -4,7 +4,6 @@ import { isFullScreen } from "~/utils"; import { music } from "~/configs"; import type { MacActions } from "~/types"; -// ------- import icons ------- interface TopBarItemProps { hideOnMobile?: boolean; forceHover?: boolean; @@ -14,25 +13,27 @@ interface TopBarItemProps { onMouseEnter?: () => void; } -const TopBarItem = forwardRef((props: TopBarItemProps, ref: any) => { - const hide = props.hideOnMobile ? "hidden sm:inline-flex" : "inline-flex"; - const hover = props.forceHover - ? "bg-gray-100/30 dark:bg-gray-400/40" - : "hover:(bg-gray-100/30 dark:bg-gray-400/40)"; - return ( -
    - {props.children} -
    - ); -}); -TopBarItem.displayName = "TopBarItem"; +const TopBarItem = forwardRef( + (props: TopBarItemProps, ref: React.ForwardedRef) => { + const hide = props.hideOnMobile ? "hidden sm:inline-flex" : "inline-flex"; + const bg = props.forceHover + ? "bg-gray-100/30 dark:bg-gray-400/40" + : "hover:(bg-gray-100/30 dark:bg-gray-400/40)"; + + return ( +
    + {props.children} +
    + ); + } +); const CCMIcon = ({ size }: { size: number }) => { return ( diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index 3c78de46..6c2c3fef 100644 --- a/src/pages/Login.tsx +++ b/src/pages/Login.tsx @@ -57,7 +57,9 @@ export default function Login(props: MacActions) {
    -
    {sign}
    +
    + {sign} +
    {/* buttons */} diff --git a/src/styles/component.css b/src/styles/component.css index ca5715a2..0935829f 100644 --- a/src/styles/component.css +++ b/src/styles/component.css @@ -56,7 +56,7 @@ .dock li .tooltip { @apply hidden; - top: calc(-100% - 5px); + top: calc(-100% - 10px); } .dock li:hover .tooltip {