From 6b6e2311970de8a8f6fc68b7fc4a4cc7e4b07da8 Mon Sep 17 00:00:00 2001 From: Akeel Lashley Date: Fri, 8 Mar 2024 09:45:13 -0500 Subject: [PATCH] add zustand --- package-lock.json | 52 +++++++++++++++++++++++++- package.json | 3 +- src/App.tsx | 9 +---- src/components/MarkdownInput.tsx | 13 ++++--- src/components/MarkdownOutput.tsx | 11 ++---- src/components/ReactMarkdownRender.tsx | 9 +++++ src/store/useMarkdownStore.ts | 13 +++++++ src/store/useToggleGuideStore.ts | 0 8 files changed, 88 insertions(+), 22 deletions(-) create mode 100644 src/components/ReactMarkdownRender.tsx create mode 100644 src/store/useMarkdownStore.ts create mode 100644 src/store/useToggleGuideStore.ts diff --git a/package-lock.json b/package-lock.json index 6efa99d..90cdb07 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,8 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-markdown": "^8.0.7", - "styled-components": "^6.0.2" + "styled-components": "^6.0.2", + "zustand": "^4.5.2" }, "devDependencies": { "@types/react": "^18.0.37", @@ -5647,6 +5648,14 @@ "punycode": "^2.1.0" } }, + "node_modules/use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/uvu": { "version": "0.5.6", "resolved": "https://registry.npmjs.org/uvu/-/uvu-0.5.6.tgz", @@ -5776,6 +5785,33 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/zustand": { + "version": "4.5.2", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.2.tgz", + "integrity": "sha512-2cN1tPkDVkwCy5ickKrI7vijSjPksFRfqS6237NzT0vqSsztTNnQdHw9mmN7uBdk3gceVXU0a+21jFzFzAc9+g==", + "dependencies": { + "use-sync-external-store": "1.2.0" + }, + "engines": { + "node": ">=12.7.0" + }, + "peerDependencies": { + "@types/react": ">=16.8", + "immer": ">=9.0.6", + "react": ">=16.8" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "immer": { + "optional": true + }, + "react": { + "optional": true + } + } } }, "dependencies": { @@ -9485,6 +9521,12 @@ "punycode": "^2.1.0" } }, + "use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "requires": {} + }, "uvu": { "version": "0.5.6", "resolved": "https://registry.npmjs.org/uvu/-/uvu-0.5.6.tgz", @@ -9552,6 +9594,14 @@ "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==", "dev": true + }, + "zustand": { + "version": "4.5.2", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.2.tgz", + "integrity": "sha512-2cN1tPkDVkwCy5ickKrI7vijSjPksFRfqS6237NzT0vqSsztTNnQdHw9mmN7uBdk3gceVXU0a+21jFzFzAc9+g==", + "requires": { + "use-sync-external-store": "1.2.0" + } } } } diff --git a/package.json b/package.json index df2f51f..8f7d6dd 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,8 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-markdown": "^8.0.7", - "styled-components": "^6.0.2" + "styled-components": "^6.0.2", + "zustand": "^4.5.2" }, "devDependencies": { "@types/react": "^18.0.37", diff --git a/src/App.tsx b/src/App.tsx index bb31846..597d694 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -22,21 +22,16 @@ const GlobalStyles = createGlobalStyle` `; function App() { - const [markdown, setMarkdown] = useState(`# Hello World`); const [showGuide, setShowGuide] = useState(false); - const handleChange = (e: React.ChangeEvent) => { - setMarkdown(e.target.value); - }; - return ( <>
setShowGuide(!showGuide)} /> {showGuide && } - - + + ); diff --git a/src/components/MarkdownInput.tsx b/src/components/MarkdownInput.tsx index a7634fc..8c67769 100644 --- a/src/components/MarkdownInput.tsx +++ b/src/components/MarkdownInput.tsx @@ -1,4 +1,5 @@ import styled from "styled-components"; +import { useMarkdownStore } from "../store/useMarkdownStore"; const InputContainer = styled.div` width: 50%; @@ -18,15 +19,15 @@ const StyledTextArea = styled.textarea` outline: none; `; -interface MarkdownInputProps { - value: string; - onChange: (e: React.ChangeEvent) => void; -} +const MarkdownInput = () => { + const { markdown, setMarkdown } = useMarkdownStore(); -const MarkdownInput: React.FC = ({ value, onChange }) => { return ( - + setMarkdown(e.target.value)} + value={markdown} + /> ); }; diff --git a/src/components/MarkdownOutput.tsx b/src/components/MarkdownOutput.tsx index 9fda748..6fecbb2 100644 --- a/src/components/MarkdownOutput.tsx +++ b/src/components/MarkdownOutput.tsx @@ -1,5 +1,6 @@ -import ReactMarkdown from "react-markdown"; import styled from "styled-components"; +import ReactMarkdownRender from "./ReactMarkdownRender"; +import { useMarkdownStore } from "../store/useMarkdownStore"; const OutputContainer = styled.div` width: 50%; @@ -11,14 +12,10 @@ const OutputContainer = styled.div` background-color: #f9f9f9; `; -interface MarkdownOutputProps { - markdown: string; -} - -const MarkdownOutput: React.FC = ({ markdown }) => { +const MarkdownOutput = () => { return ( - {markdown} + ); }; diff --git a/src/components/ReactMarkdownRender.tsx b/src/components/ReactMarkdownRender.tsx new file mode 100644 index 0000000..f9cca39 --- /dev/null +++ b/src/components/ReactMarkdownRender.tsx @@ -0,0 +1,9 @@ +import ReactMarkdown from "react-markdown"; +import { useMarkdownStore } from "../store/useMarkdownStore"; + +const ReactMarkdownRender = () => { + const { markdown } = useMarkdownStore(); + return {markdown}; +}; + +export default ReactMarkdownRender; diff --git a/src/store/useMarkdownStore.ts b/src/store/useMarkdownStore.ts new file mode 100644 index 0000000..711641e --- /dev/null +++ b/src/store/useMarkdownStore.ts @@ -0,0 +1,13 @@ +import { create } from "zustand"; + +interface MarkdownStore { + markdown: string; + setMarkdown: (markdown: string) => void; +} + +// const [markdown, setMarkdown] = useState("Hello World"); + +export const useMarkdownStore = create((set: any) => ({ + markdown: "Hello World", + setMarkdown: (markdown: string) => set({ markdown }), +})); diff --git a/src/store/useToggleGuideStore.ts b/src/store/useToggleGuideStore.ts new file mode 100644 index 0000000..e69de29