feat: redux -> zustand

README.md

@@ -2,7 +2,7 @@
 
 My portfolio website simulating macOS's GUI: https://portfolio.zxh.io
 
-Powered by [React](https://reactjs.org/) + [React Redux](https://react-redux.js.org/) + [UnoCSS](https://uno.antfu.me/) + [TypeScript](https://www.typescriptlang.org/) + [Vite](https://vitejs.dev/).
+Powered by [React](https://reactjs.org/) + [Zustand](https://zustand-demo.pmnd.rs/) + [UnoCSS](https://uno.antfu.me/) + [TypeScript](https://www.typescriptlang.org/) + [Vite](https://vitejs.dev/).
 
 ![light mode](./public/screenshots/light.png)
 ![dark mode](./public/screenshots/dark.png)

package.json

@@ -3,18 +3,17 @@
   "private": true,
   "scripts": {
     "build": "vite build",
-    "dev": "vite",
+    "dev": "vite --host",
     "lint": "eslint --ext .js,.ts,.tsx ./",
     "prepare": "husky install",
-    "serve": "vite preview",
+    "serve": "vite preview --host",
     "up": "taze major -I"
   },
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix",
     "package.json": "sort-package-json"
   },
   "dependencies": {
-    "@reduxjs/toolkit": "^1.9.3",
     "@rooks/use-raf": "^4.11.2",
     "date-fns": "^2.29.3",
     "framer-motion": "^10.3.0",
@@ -23,12 +22,11 @@
     "react-dom": "^18.2.0",
     "react-markdown": "^8.0.5",
     "react-rangeslider": "2.2.0",
-    "react-redux": "^8.0.5",
     "react-rnd": "^10.4.1",
     "react-syntax-highlighter": "^15.5.0",
     "react-webcam": "7.0.1",
-    "redux": "^4.2.1",
-    "web-vitals": "^3.3.0"
+    "web-vitals": "^3.3.0",
+    "zustand": "^4.3.6"
   },
   "devDependencies": {
     "@iconify/json": "^2.2.34",

public/markdown/about-site.md

@@ -1,5 +1,5 @@
 # About This Site
 
-This site is inspired by macOS [Big Sur](https://www.apple.com/in/macos/big-sur/) and [Catalina](https://www.apple.com/bw/macos/catalina/), developed using [React](https://reactjs.org/), [React Redux](https://react-redux.js.org/) and [UnoCSS](https://uno.antfu.me/), and hosted on [Github Pages](https://pages.github.com/). Some of the icons are generated using [sindresorhus/file-icon-cli](https://github.com/sindresorhus/file-icon-cli).
+This site is inspired by macOS [Big Sur](https://www.apple.com/in/macos/big-sur/) and [Catalina](https://www.apple.com/bw/macos/catalina/), developed using [React](https://reactjs.org/), [Zustand](https://zustand-demo.pmnd.rs/) and [UnoCSS](https://uno.antfu.me/), and hosted on [Github Pages](https://pages.github.com/). Some of the icons are generated using [sindresorhus/file-icon-cli](https://github.com/sindresorhus/file-icon-cli).
 
 The source code is hosted [here](https://github.com/Renovamen/playground-macos).

src/components/Launchpad.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { wallpapers, launchpadApps } from "~/configs";
-import { useAppSelector } from "~/redux/hooks";
+import { useStore } from "~/stores";
 
 interface LaunchpadProps {
   show: boolean;
@@ -10,7 +10,7 @@ interface LaunchpadProps {
 const placeholderText = "Search";
 
 export default function Launchpad({ show, toggleLaunchpad }: LaunchpadProps) {
-  const dark = useAppSelector((state) => state.system.dark);
+  const dark = useStore((state) => state.dark);
 
   const [searchText, setSearchText] = useState("");
   const [focus, setFocus] = useState(false);

src/components/Window.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { Rnd } from "react-rnd";
 import { useWindowSize } from "~/hooks";
-import { useAppSelector } from "~/redux/hooks";
+import { useStore } from "~/stores";
 
 const FullIcon = ({ size }: { size: number }) => {
   return (
@@ -108,7 +108,7 @@ const TrafficLights = ({ id, close, max, setMax, setMin }: TrafficProps) => {
 };
 
 const Window = (props: WindowProps) => {
-  const dockSize = useAppSelector((state) => state.dock.size);
+  const dockSize = useStore((state) => state.dockSize);
   const { winWidth, winHeight } = useWindowSize();
 
   const initWidth = Math.min(winWidth, props.width ? props.width : 640);
@@ -141,7 +141,9 @@ const Window = (props: WindowProps) => {
 
   const children = React.cloneElement(
     props.children as React.ReactElement<any>,
-    { width: width }
+    {
+      width: width
+    }
   );
 
   return (

src/components/apps/Bear.tsx

@@ -5,8 +5,8 @@ import remarkMath from "remark-math";
 import rehypeKatex from "rehype-katex";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { dracula, prism } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { useStore } from "~/stores";
 import bear from "~/configs/bear";
-import { useAppSelector } from "~/redux/hooks";
 import type { BearMdData } from "~/types";
 
 interface ContentProps {
@@ -156,7 +156,7 @@ const fixImageURL = (text: string, contentURL: string): string => {
 
 const Content = ({ contentID, contentURL }: ContentProps) => {
   const [storeMd, setStoreMd] = useState<{ [key: string]: string }>({});
-  const dark = useAppSelector((state) => state.system.dark);
+  const dark = useStore((state) => state.dark);
 
   const fetchMarkdown = useCallback(
     (id: string, url: string) => {

src/components/apps/Safari.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { websites, wallpapers } from "~/configs";
 import { checkURL } from "~/utils";
-import { useAppSelector } from "~/redux/hooks";
+import { useStore } from "~/stores";
 import type { SiteSectionData, SiteData } from "~/types";
 
 interface SafariState {
@@ -77,7 +77,7 @@ const NavSection = ({ width, section, setGoURL }: NavSectionProps) => {
 const numTracker = Math.floor(Math.random() * 99 + 1);
 
 const NavPage = ({ width, setGoURL }: NavProps) => {
-  const dark = useAppSelector((state) => state.system.dark);
+  const dark = useStore((state) => state.dark);
 
   const grid = width < 640 ? "grid-cols-4" : "grid-cols-8";
   const span = width < 640 ? "col-span-3" : "col-span-7";
@@ -125,7 +125,7 @@ const NavPage = ({ width, setGoURL }: NavProps) => {
 };
 
 const NoInternetPage = () => {
-  const dark = useAppSelector((state) => state.system.dark);
+  const dark = useStore((state) => state.dark);
 
   return (
     <div
@@ -150,7 +150,7 @@ const NoInternetPage = () => {
 };
 
 const Safari = ({ width }: SafariProps) => {
-  const wifi = useAppSelector((state) => state.system.wifi);
+  const wifi = useStore((state) => state.wifi);
   const [state, setState] = useState<SafariState>({
     goURL: "",
     currentURL: ""

src/components/dock/Dock.tsx

@@ -1,6 +1,6 @@
 import { useMotionValue } from "framer-motion";
 import { apps } from "~/configs";
-import { useAppSelector } from "~/redux/hooks";
+import { useStore } from "~/stores";
 import DockItem from "./DockItem";
 
 interface DockProps {
@@ -20,9 +20,9 @@ export default function Dock({
   toggleLaunchpad,
   hide
 }: DockProps) {
-  const { dockSize, dockMag } = useAppSelector((state) => ({
-    dockSize: state.dock.size,
-    dockMag: state.dock.mag
+  const { dockSize, dockMag } = useStore((state) => ({
+    dockSize: state.dockSize,
+    dockMag: state.dockMag
   }));
 
   const openApp = (id: string) => {