Skip to content

Commit

Permalink
refactor: simplify code
Browse files Browse the repository at this point in the history
  • Loading branch information
@Renovamen
Renovamen committed Mar 17, 2024
1 parent 5d12099 commit 77f89fd
Show file tree
Hide file tree
Showing 11 changed files with 166 additions and 198 deletions.
66 changes: 31 additions & 35 deletions src/components/AppWindow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<svg
className="icon"
viewBox="0 0 13 13"
width={size}
height={size}
xmlns="http://www.w3.org/2000/svg"
fillRule="evenodd"
clipRule="evenodd"
strokeLinejoin="round"
strokeMiterlimit={2}
>
<path d="M9.26 12.03L.006 2.73v9.3H9.26zM2.735.012l9.3 9.3v-9.3h-9.3z" />
</svg>
);
};

const ExitFullIcon = ({ size }: { size: number }) => {
return (
<svg
className="icon"
viewBox="0 0 19 19"
width={size}
height={size}
xmlns="http://www.w3.org/2000/svg"
fillRule="evenodd"
clipRule="evenodd"
strokeLinejoin="round"
strokeMiterlimit={2}
>
<path d="M18.373 9.23L9.75.606V9.23h8.624zM.6 9.742l8.623 8.624V9.742H.599z" />
</svg>
);
};
const FullIcon = ({ size }: { size: number }) => (
<svg
className="icon"
viewBox="0 0 13 13"
width={size}
height={size}
xmlns="http://www.w3.org/2000/svg"
fillRule="evenodd"
clipRule="evenodd"
strokeLinejoin="round"
strokeMiterlimit={2}
>
<path d="M9.26 12.03L.006 2.73v9.3H9.26zM2.735.012l9.3 9.3v-9.3h-9.3z" />
</svg>
);

const ExitFullIcon = ({ size }: { size: number }) => (
<svg
className="icon"
viewBox="0 0 19 19"
width={size}
height={size}
xmlns="http://www.w3.org/2000/svg"
fillRule="evenodd"
clipRule="evenodd"
strokeLinejoin="round"
strokeMiterlimit={2}
>
<path d="M18.373 9.23L9.75.606V9.23h8.624zM.6 9.742l8.623 8.624V9.742H.599z" />
</svg>
);

interface TrafficProps {
id: string;
Expand Down
33 changes: 13 additions & 20 deletions src/components/Launchpad.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,26 +63,19 @@ export default function Launchpad({ show, toggleLaunchpad }: LaunchpadProps) {
grid="~ flow-row cols-4 sm:cols-7"
>
{search().map((app) => (
<div key={`launchpad-${app.id}`} className="h-32 sm:h-36 w-full flex-center">
<div className="h-full w-full flex flex-col">
<a
className="h-max"
href={app.link}
target="_blank"
rel="noreferrer"
onClick={(e) => e.stopPropagation()}
>
<img
className="w-14 sm:w-20 mx-auto"
src={app.img}
alt={app.title}
title={app.title}
/>
</a>
<span className="mt-2 mx-auto text-white text-xs sm:text-sm">
{app.title}
</span>
</div>
<div key={`launchpad-${app.id}`} h="32 sm:36" flex="~ col">
<a
className="w-14 sm:w-20 mx-auto"
href={app.link}
target="_blank"
rel="noreferrer"
onClick={(e) => e.stopPropagation()}
>
<img src={app.img} alt={app.title} title={app.title} />
</a>
<span m="t-2 x-auto" text="white xs sm:sm">
{app.title}
</span>
</div>
))}
</div>
Expand Down
106 changes: 46 additions & 60 deletions src/components/Spotlight.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand All @@ -35,6 +35,7 @@ export default function Spotlight({
btnRef
}: SpotlightProps) {
const spotlightRef = useRef<HTMLDivElement>(null);
const inputRef = useRef<HTMLInputElement>(null);

const [selectedIndex, setSelectedIndex] = useState<number>(0);
const [clickedID, setClickedID] = useState("");
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -126,20 +126,15 @@ export default function Spotlight({
<li
id={`spotlight-${app.id}`}
key={`spotlight-${app.id}`}
className={`pr-1 h-7 w-full flex flex-row rounded ${bg} ${text} cursor-default`}
className={`pr-1 h-7 w-full flex rounded ${bg} ${text} cursor-default`}
data-app-type={type}
onClick={() => handleClick(app.id)}
onDoubleClick={() => handleDoubleClick(app.id)}
>
<div className="flex-none w-8 hstack">
<img
className="w-5 mx-auto"
src={app.img}
alt={app.title}
title={app.title}
/>
<div className="w-8 flex-center">
<img w-5 src={app.img} alt={app.title} title={app.title} />
</div>
<div className="flex-grow hstack overflow-hidden whitespace-nowrap">
<div className="flex-1 hstack overflow-hidden whitespace-nowrap">
{app.title}
</div>
</li>
Expand All @@ -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);

Expand Down Expand Up @@ -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<HTMLDivElement>): void => {
const handleKeyPress = (e: React.KeyboardEvent<HTMLDivElement>) => {
const keyCode = e.key;
const numApps = appIdList.length;

Expand All @@ -247,7 +238,7 @@ export default function Spotlight({
}
};

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
// update highlighted line
updateHighlight(selectedIndex, 0);
// current selected id go back to 0
Expand All @@ -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 (
<div
className="spotlight"
onKeyDown={handleKeyPress}
onClick={focusOnInput}
onClick={() => inputRef.current?.focus()}
ref={spotlightRef}
>
<div
Expand All @@ -276,7 +262,7 @@ export default function Spotlight({
<span className="i-bx:search ml-1 text-c-600 text-[28px]" />
</div>
<input
id="spotlight-input"
ref={inputRef}
className={`col-start-2 col-span-7 ${
curDetails ? "sm:col-span-9" : "sm:col-span-10"
} bg-transparent no-outline px-1`}
Expand All @@ -289,7 +275,7 @@ export default function Spotlight({
{curDetails && (
<div className="hidden sm:flex col-start-11 col-span-1 flex-center">
<img
className="w-8"
w-8
src={curDetails.img}
alt={curDetails.title}
title={curDetails.title}
Expand All @@ -298,15 +284,15 @@ export default function Spotlight({
)}
</div>
{searchText !== "" && (
<div className="h-85 bg-transparent flex border-t border-menu">
<div className="flex-none w-32 sm:w-72 px-2.5 border-r border-menu overflow-y-scroll">
<div flex h-85 bg-transparent border="t menu">
<div w="32 sm:72" border="r menu" p="x-2.5" overflow-y-scroll>
{appList}
</div>
{curDetails && (
<div className="flex-grow flex flex-col">
<div className="mx-auto w-4/5 h-56" flex="none center col" border="b menu">
<div className="flex-1 vstack">
<div className="w-4/5 h-56" flex="center col" border="b menu">
<img
className="w-32 mx-auto"
w-32
src={curDetails.img}
alt={curDetails.title}
title={curDetails.title}
Expand All @@ -318,15 +304,15 @@ export default function Spotlight({
{`Version: ${getRandom(0, 99)}.${getRandom(0, 999)}`}
</div>
</div>
<div className="flex-grow hstack text-xs">
<div className="flex-none w-1/2 text-right text-c-500">
<div className="flex-1 hstack text-xs">
<div w="1/2" text="right c-500">
<div>Kind</div>
<div>Size</div>
<div>Created</div>
<div>Modified</div>
<div>Last opened</div>
</div>
<div className="flex-grow pl-2 text-c-black">
<div className="flex-1 pl-2 text-c-black">
<div>{curDetails.type === "app" ? "Application" : "Portfolio"}</div>
<div>{`${getRandom(0, 999)} G`}</div>
<div>{getRandomDate()}</div>
Expand Down
Loading

0 comments on commit 77f89fd

Please sign in to comment.