refactor: simplify code, add vscode app

sajan45 · Apr 30, 2021 · 315a27e · 315a27e
1 parent 8ace737
commit 315a27e
Show file tree

Hide file tree

Showing 15 changed files with 292 additions and 285 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
-# playround-macos
+# playground-macos
 
-Have fun and know more about me in this macOS-like playground: https://zxh.vercel.app
+My portfolio website simulating macOS's GUI: https://zxh.vercel.app
 
 Powered by [React](https://reactjs.org/) and [tailwindcss](https://tailwindcss.com/).
 
@@ -27,7 +27,6 @@ yarn build
 - [macOS Big Sur](https://www.apple.com/in/macos/big-sur/)
 - [macOS Icon Gallery](https://www.macosicongallery.com/)
 - [sindresorhus/file-icon-cli](https://github.com/sindresorhus/file-icon-cli)
-- [tilak30/MacOS-Clone](https://github.com/tilak30/MacOS-Clone)
 
 
 &nbsp;

diff --git a/public/icons/vscode.png b/public/icons/vscode.png
diff --git a/src/components/ControlCenterMenu.js b/src/components/ControlCenterMenu.js
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { Component, useState } from "react";
 import nightwind from "nightwind/helper";
 import Slider from "react-rangeslider";
 import "react-rangeslider/lib/index.css";
@@ -10,7 +10,7 @@ import { IoCopyOutline, IoSunny, IoMoon, IoVolumeHigh } from "react-icons/io5";
 import { FaWifi } from "react-icons/fa";
 
 const SliderComponent = ({ icon }) => {
-  const [value, setValue] = React.useState(Math.floor(Math.random() * 100));
+  const [value, setValue] = useState(Math.floor(Math.random() * 100));
   return (
     <div className="slider flex flex-row w-full">
       <div className="h-8 p-2 bg-white rounded-l-full">{icon}</div>
@@ -26,7 +26,6 @@ const SliderComponent = ({ icon }) => {
   );
 };
 
-// export default function ControlCenterMenu()
 export default class ControlCenterMenu extends Component {
   constructor(props) {
     super(props);

diff --git a/src/components/Dock.js b/src/components/Dock.js
@@ -1,46 +1,38 @@
 import React from "react";
+import apps from "../configs/apps";
 
-export default function Dock({ openWindow, showLaunchpad, setShowLaunchpad }) {
-  const openApp = (title) => {
-    setShowLaunchpad(false);
-    openWindow(title);
+export default function Dock({ open, toggleLaunchpad, hidde }) {
+  const openApp = (id) => {
+    toggleLaunchpad(false);
+    open(id);
   };
 
   return (
     <div
       className="dock w-full fixed bottom-0"
       style={{
-        zIndex: 99999
+        zIndex: hidde ? 0 : 99999
       }}
     >
       <ul className="mx-auto w-max p-2 space-x-2 flex flex-row justify-center justify-between bg-white bg-opacity-20 blur rounded-t-lg shadow-2xl">
-        <li
-          key="dock-launchpad"
-          onClick={() => setShowLaunchpad(!showLaunchpad)}
-        >
+        <li key="dock-launchpad" onClick={() => toggleLaunchpad()}>
           <img
             className="w-12"
             src="icons/launchpad.png"
             alt="Launchpad"
             title="Launchpad"
           />
         </li>
-        <li key="dock-text" onClick={() => openApp("Notepad")}>
-          <img
-            className="w-12"
-            src="icons/text.png"
-            alt="Notepad"
-            title="Notepad"
-          />
-        </li>
-        <li key="dock-safari" onClick={() => openApp("Safari")}>
-          <img
-            className="w-12"
-            src="icons/safari.png"
-            alt="Safari"
-            title="Safari"
-          />
-        </li>
+        {apps.map((app) => (
+          <li key={`dock-${app.id}`} onClick={() => openApp(app.id)}>
+            <img
+              className="w-12"
+              src={app.img}
+              alt={app.title}
+              title={app.title}
+            />
+          </li>
+        ))}
         <li key="dock-mail">
           <a href="mailto:[email protected]">
             <img
@@ -65,22 +57,6 @@ export default function Dock({ openWindow, showLaunchpad, setShowLaunchpad }) {
             />
           </a>
         </li>
-        <li key="dock-cmd" onClick={() => openApp("Terminal")}>
-          <img
-            className="w-12"
-            src="icons/terminal.png"
-            alt="Terminal"
-            title="Terminal"
-          />
-        </li>
-        <li key="dock-facetime" onClick={() => openApp("FaceTime")}>
-          <img
-            className="w-12"
-            src="icons/facetime.png"
-            alt="FaceTime"
-            title="FaceTime"
-          />
-        </li>
       </ul>
     </div>
   );

diff --git a/src/components/Launchpad.js b/src/components/Launchpad.js
@@ -1,51 +1,9 @@
 import React, { Component } from "react";
 import { BiSearch } from "react-icons/bi";
+import launchpadApps from "../configs/launchpad";
 
 const placeholderText = "Search";
 
-const appList = [
-  {
-    title: "Flint",
-    img: "icons/launchpad/flint.png",
-    link: "https://github.com/Renovamen/flint"
-  },
-  {
-    title: "Metallic",
-    img: "icons/launchpad/meta.png",
-    link: "https://github.com/Renovamen/metallic"
-  },
-  {
-    title: "Alkaid",
-    img: "icons/launchpad/rl.png",
-    link: "https://github.com/Renovamen/alkaid"
-  },
-  {
-    title: "Oh, Vue Icons!",
-    img: "icons/launchpad/icon.png",
-    link: "https://oh-vue-icons.netlify.app/"
-  },
-  {
-    title: "Gungnir",
-    img: "icons/launchpad/gungnir.png",
-    link: "https://vuepress-theme-gungnir.vercel.app/"
-  },
-  {
-    title: "My Notebook",
-    img: "icons/launchpad/notebook.png",
-    link: "https://vuepress-theme-gungnir.vercel.app/"
-  },
-  {
-    title: "Fishmail",
-    img: "icons/launchpad/fishmail.png",
-    link: "https://fishmail.vercel.app/"
-  },
-  {
-    title: "Résumé?",
-    img: "icons/launchpad/resume.png",
-    link: "https://midgard.renovamen.ink/"
-  }
-];
-
 export default class Launchpad extends Component {
   constructor(props) {
     super(props);
@@ -55,8 +13,8 @@ export default class Launchpad extends Component {
   }
 
   search = () => {
-    if (this.state.searchText === "") return appList;
-    const list = appList.filter((item) => {
+    if (this.state.searchText === "") return launchpadApps;
+    const list = launchpadApps.filter((item) => {
       return item.title
         .toLowerCase()
         .includes(this.state.searchText.toLowerCase());

diff --git a/src/components/MenuBar.js b/src/components/MenuBar.js
@@ -14,11 +14,7 @@ const MenuItem = ({ children }) => {
   );
 };
 
-export default function MenuBar({
-  title,
-  showControlCenter,
-  setShowControlCenter
-}) {
+export default function MenuBar({ title, toggleControlCenter }) {
   const [date, setDate] = useState(new Date());
 
   useEffect(() => {
@@ -48,7 +44,7 @@ export default function MenuBar({
             className="w-4 h-4 filter-invert"
             src="icons/menu/controlcenter.png"
             alt="control center"
-            onClick={() => setShowControlCenter(!showControlCenter)}
+            onClick={() => toggleControlCenter()}
           />
         </MenuItem>
         <span>{format(date, "eee d MMM h:mm aa")}</span>

diff --git a/src/components/Window.js b/src/components/Window.js
@@ -1,10 +1,10 @@
 import React, { Component } from "react";
 import { Rnd } from "react-rnd";
 
-const TrafficLights = ({ setShow, max, setMax }) => {
+const TrafficLights = ({ id, close, setMax }) => {
   const closeWindow = (e) => {
     e.stopPropagation();
-    setShow(false);
+    close(id);
   };
 
   return (
@@ -16,13 +16,13 @@ const TrafficLights = ({ setShow, max, setMax }) => {
       />
       <button
         className="w-3 h-3 rounded-full bg-yellow-500 outline-none focus:outline-none"
-        onClick={() => setMax(false)}
-        onTouchEnd={() => setMax(false)}
+        onClick={() => setMax(id, false)}
+        onTouchEnd={() => setMax(id, false)}
       />
       <button
         className="w-3 h-3 rounded-full bg-green-500 outline-none focus:outline-none"
-        onClick={() => setMax(!max)}
-        onTouchEnd={() => setMax(!max)}
+        onClick={() => setMax(id)}
+        onTouchEnd={() => setMax(id)}
       />
     </div>
   );
@@ -71,10 +71,6 @@ export default class Window extends Component {
   render() {
     const round = this.props.max ? "rounded-none" : "rounded-lg";
 
-    if (!this.props.show) {
-      return <div />;
-    }
-
     return (
       <Rnd
         size={{
@@ -98,16 +94,16 @@ export default class Window extends Component {
         dragHandleClassName="window-bar"
         disableDragging={this.props.max}
         style={{ zIndex: this.props.z }}
-        onMouseDown={() => this.props.active(this.props.title)}
+        onMouseDown={() => this.props.focus(this.props.id)}
         className={`absolute transition-hw ${round} overflow-hidden bg-transparent w-full h-full shadow-md`}
       >
         <div
           className="window-bar relative h-6 text-center bg-gray-300"
-          onDoubleClick={() => this.props.setMax(!this.props.max)}
+          onDoubleClick={() => this.props.setMax(this.props.id)}
         >
           <TrafficLights
-            setShow={this.props.setShow}
-            max={this.props.max}
+            id={this.props.id}
+            close={this.props.close}
             setMax={this.props.setMax}
           />
           <span className="font-semibold text-gray-700">

diff --git a/src/components/apps/FaceTime.js b/src/components/apps/FaceTime.js
@@ -1,12 +1,11 @@
-import React, { Component, useState } from "react";
+import React, { Component } from "react";
 import Webcam from "react-webcam";
-import Window from "../Window";
 
 const videoConstraints = {
   facingMode: "user"
 };
 
-class FaceTimeContent extends Component {
+export default class FaceTime extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -69,21 +68,3 @@ class FaceTimeContent extends Component {
       );
   }
 }
-
-export default function FaceTime({ show, setShow, active, z }) {
-  const [faceTimeMax, setFaceTimeMax] = useState(false);
-  return (
-    <Window
-      title="FaceTime"
-      show={show}
-      setShow={setShow}
-      max={faceTimeMax}
-      setMax={setFaceTimeMax}
-      active={active}
-      z={z}
-      height={600}
-    >
-      <FaceTimeContent />
-    </Window>
-  );
-}
diff --git a/src/components/apps/Notepad.js b/src/components/apps/Notepad.js
@@ -1,7 +1,6 @@
-import React, { useState } from "react";
-import Window from "../Window";
+import React from "react";
 
-const NotepadContent = () => {
+export default function Notepad() {
   return (
     <div className="w-full h-full bg-gray-100 text-gray-700 overflow-scroll px-8 py-6">
       <div className="charapter">
@@ -187,21 +186,4 @@ const NotepadContent = () => {
       </div>
     </div>
   );
-};
-
-export default function Notepad({ show, setShow, active, z }) {
-  const [textMax, setTextMax] = useState(false);
-  return (
-    <Window
-      title="Notepad"
-      show={show}
-      setShow={setShow}
-      max={textMax}
-      setMax={setTextMax}
-      active={active}
-      z={z}
-    >
-      <NotepadContent />
-    </Window>
-  );
 }
diff --git a/src/components/apps/Safari.js b/src/components/apps/Safari.js
@@ -1,7 +1,6 @@
-import React, { useState, Component } from "react";
-import Window from "../Window";
+import React, { Component } from "react";
 
-class SafariContent extends Component {
+export default class Safari extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -37,21 +36,3 @@ class SafariContent extends Component {
     );
   }
 }
-
-export default function Safari({ show, setShow, active, z }) {
-  const [safariMax, setSafariMax] = useState(false);
-  return (
-    <Window
-      title="Safari"
-      show={show}
-      setShow={setShow}
-      max={safariMax}
-      setMax={setSafariMax}
-      active={active}
-      z={z}
-      size={"h-3/4 w-3/5"}
-    >
-      <SafariContent />
-    </Window>
-  );
-}