Last active
January 24, 2024 02:17
-
-
Save aidenybai/d5f8372341863422730e2d7f5f6e38fd to your computer and use it in GitHub Desktop.
anya-v2-output.json
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/FilterInput/index.jsx": { | |
| "source": "import { TextField } from \"@mui/material\";\n\nfunction FilterInput({ filter, onChange, noteCount }) {\n return (\n <TextField\n className=\"notes-list__input\"\n type=\"search\"\n size=\"small\"\n value={filter}\n onChange={(e) => onChange(e.target.value)}\n placeholder={`Filter ${noteCount} note${noteCount === 1 ? \"\" : \"s\"}`}\n />\n );\n}\nexport default FilterInput;\n", | |
| "_parentLookup": {}, | |
| "components": { | |
| "FilterInput": { | |
| "id": "FilterInput", | |
| "start": { | |
| "line": 3, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 14, | |
| "column": 1 | |
| }, | |
| "externals": {}, | |
| "renders": [ | |
| { | |
| "kind": "props", | |
| "start": { | |
| "line": 3, | |
| "column": 21 | |
| }, | |
| "end": { | |
| "line": 3, | |
| "column": 52 | |
| }, | |
| "selfTime": 0.10000002384185791, | |
| "totalTime": 3.700000047683716, | |
| "count": 2, | |
| "props": [ | |
| { | |
| "name": "onChange", | |
| "prev": "m=>{let d=$(1,null).…", | |
| "next": "m=>{let d=$(1,null).…", | |
| "type": "function" | |
| } | |
| ], | |
| "state": null, | |
| "owner": "NotesList" | |
| } | |
| ], | |
| "children": {}, | |
| "count": 2 | |
| } | |
| } | |
| }, | |
| "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/NoteButton/index.jsx": { | |
| "source": "import ReactMarkdown from 'react-markdown';\nimport gfm from 'remark-gfm';\nimport { format } from 'date-fns';\nimport './index.css';\n\nfunction NoteButton({ isActive, onNoteActivated, text, filterText, date }) {\n const className = [\n 'notes-list__button',\n 'notes-list__note',\n isActive && 'notes-list__note_active',\n ]\n .filter((i) => i !== false)\n .join(' ');\n\n return (\n <button className={className} onClick={onNoteActivated}>\n <span className=\"notes-list__note-meta\">\n {format(date, 'd MMM yyyy')}\n </span>\n {generateNoteHeader(text, filterText)}\n </button>\n );\n}\n\nfunction generateNoteHeader(text, filterText) {\n let firstLine = text\n .split('\\n')\n .map((i) => i.trim())\n .filter((i) => i.length > 0)[0];\n\n // Wrap the filter text with a `<mark>` tag.\n // (The algorithm below is a bit buggy: if the note itself has any `~~something~~` entries,\n // they will be turned into `<mark>` as well. But this is alright for demo purposes.)\n let componentsMapping = {};\n if (\n filterText &&\n firstLine.toLowerCase().includes(filterText.toLowerCase())\n ) {\n // If `filterText` is `aa`, this splits `bbbbaacccaac` into ['bbb', 'aa', 'ccc', 'aa', 'c']\n // Based on example 2 in https://stackoverflow.com/a/25221523/1192426\n const firstLineParts = firstLine.split(\n new RegExp(\n '(' + filterText.replace(/[-/\\\\^$*+?.()|[\\]{}]/g, '\\\\$&') + ')',\n 'gi'\n )\n );\n\n // This wraps all `filterText` entries with a `del` tag.\n // ['bbb', 'aa', 'ccc', 'aa', 'c'] => ['bbb', '~~aa~~', 'ccc', '~~aa~~', 'c'] => 'bbb~~aa~~ccc~~aa~~c'\n firstLine = firstLineParts\n .map((part) => {\n if (part.toLowerCase() === filterText.toLowerCase()) {\n return `~~${part}~~`;\n }\n\n return part;\n })\n .join('');\n\n // This ensures that all `filterText` entries are actually wrapped with `mark`, not with `del`\n componentsMapping = {\n del: 'mark',\n };\n }\n\n return (\n <ReactMarkdown\n remarkPlugins={[gfm]}\n disallowedElements={['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']}\n unwrapDisallowed={true}\n components={componentsMapping}\n >\n {firstLine}\n </ReactMarkdown>\n );\n}\n\nexport default NoteButton;\n", | |
| "_parentLookup": {}, | |
| "components": { | |
| "NoteButton": { | |
| "id": "NoteButton", | |
| "start": { | |
| "line": 6, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 23, | |
| "column": 1 | |
| }, | |
| "externals": { | |
| "gfm": { | |
| "kind": "module", | |
| "start": { | |
| "line": 6, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 23, | |
| "column": 1 | |
| }, | |
| "jsx": false | |
| }, | |
| "format": { | |
| "kind": "module", | |
| "start": { | |
| "line": 6, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 23, | |
| "column": 1 | |
| }, | |
| "jsx": false | |
| }, | |
| "generateNoteHeader": { | |
| "kind": "hoisted", | |
| "start": { | |
| "line": 6, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 23, | |
| "column": 1 | |
| }, | |
| "jsx": true | |
| } | |
| }, | |
| "renders": [ | |
| { | |
| "kind": "props", | |
| "start": { | |
| "line": 6, | |
| "column": 20 | |
| }, | |
| "end": { | |
| "line": 6, | |
| "column": 73 | |
| }, | |
| "selfTime": 4.800000190734863, | |
| "totalTime": 43, | |
| "count": 200, | |
| "props": [ | |
| { | |
| "name": "isActive", | |
| "prev": "false", | |
| "next": "true", | |
| "type": "boolean" | |
| }, | |
| { | |
| "name": "onNoteActivated", | |
| "prev": "() => onNoteActivate…", | |
| "next": "() => onNoteActivate…", | |
| "type": "function" | |
| } | |
| ], | |
| "state": null, | |
| "owner": "NotesList" | |
| } | |
| ], | |
| "children": {}, | |
| "count": 200 | |
| } | |
| } | |
| }, | |
| "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/NotesList/index.jsx": { | |
| "source": "import { useState } from \"react\";\nimport { Button, ButtonGroup } from \"@mui/material\";\nimport FilterInput from \"../FilterInput\";\nimport NoteButton from \"../NoteButton\";\nimport \"./index.css\";\n\nfunction NotesList({\n notes,\n activeNoteId,\n onNoteActivated,\n onNewNotesRequested,\n onDeleteAllRequested,\n}) {\n const [filter, setFilter] = useState(\"\");\n\n return (\n <div className=\"notes-list\" style={{ position: \"relative\" }}>\n <div className=\"notes-list__filter\">\n <FilterInput\n filter={filter}\n onChange={setFilter}\n noteCount={Object.keys(notes).length}\n />\n </div>\n\n <div className=\"notes-list__notes\">\n {Object.values(notes)\n .sort((a, b) => b.date.getTime() - a.date.getTime())\n .filter(({ text }) => {\n if (!filter) {\n return true;\n }\n\n return text.toLowerCase().includes(filter.toLowerCase());\n })\n .map(({ id, text, date }) => (\n <NoteButton\n key={id}\n isActive={activeNoteId === id}\n onNoteActivated={() => onNoteActivated(id)}\n text={text}\n filterText={filter}\n date={date}\n />\n ))}\n </div>\n\n <div className=\"notes-list__controls\">\n <ButtonGroup size=\"small\">\n <Button\n classes={{ root: \"notes-list__control\" }}\n onClick={() => onNewNotesRequested({ count: 1, paragraphs: 1 })}\n >\n + Note\n </Button>\n <Button\n classes={{ root: \"notes-list__control\" }}\n onClick={() => onNewNotesRequested({ count: 1, paragraphs: 300 })}\n >\n + Huge\n </Button>\n <Button\n classes={{ root: \"notes-list__control\" }}\n onClick={() => onNewNotesRequested({ count: 100, paragraphs: 1 })}\n >\n + 100\n </Button>\n </ButtonGroup>\n <ButtonGroup size=\"small\">\n <Button\n classes={{ root: \"notes-list__control\" }}\n onClick={() => onDeleteAllRequested()}\n >\n Delete all\n </Button>\n </ButtonGroup>\n </div>\n </div>\n );\n}\n\nexport default NotesList;\n", | |
| "_parentLookup": {}, | |
| "components": { | |
| "NotesList": { | |
| "id": "NotesList", | |
| "start": { | |
| "line": 7, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 80, | |
| "column": 1 | |
| }, | |
| "externals": { | |
| "useState": { | |
| "kind": "module", | |
| "start": { | |
| "line": 7, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 80, | |
| "column": 1 | |
| }, | |
| "jsx": false | |
| } | |
| }, | |
| "renders": [ | |
| { | |
| "kind": "props", | |
| "start": { | |
| "line": 7, | |
| "column": 19 | |
| }, | |
| "end": { | |
| "line": 13, | |
| "column": 1 | |
| }, | |
| "selfTime": 0, | |
| "totalTime": 0, | |
| "count": 2, | |
| "props": [ | |
| { | |
| "name": "activeNoteId", | |
| "prev": "null", | |
| "next": "\"egh7aJ7qDyklb5sEE4M5…\"", | |
| "type": "string" | |
| }, | |
| { | |
| "name": "onNoteActivated", | |
| "prev": "m=>{let d=$(1,null).…", | |
| "next": "m=>{let d=$(1,null).…", | |
| "type": "function" | |
| }, | |
| { | |
| "name": "onNewNotesRequested", | |
| "prev": "({\n count,\n pa…", | |
| "next": "({\n count,\n pa…", | |
| "type": "function" | |
| }, | |
| { | |
| "name": "onDeleteAllRequested", | |
| "prev": "() => {\n deleteNo…", | |
| "next": "() => {\n deleteNo…", | |
| "type": "function" | |
| } | |
| ], | |
| "state": null, | |
| "owner": "App" | |
| } | |
| ], | |
| "children": {}, | |
| "count": 2 | |
| } | |
| } | |
| }, | |
| "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/NoteEditor/index.jsx": { | |
| "source": "import { useEffect, useRef } from \"react\";\nimport CodeMirror from \"codemirror\";\nimport \"codemirror/mode/markdown/markdown\";\nimport \"codemirror/lib/codemirror.css\";\nimport \"./index.css\";\n\nfunction NoteEditor({ notes, activeNoteId, saveNote }) {\n const currentNote = notes[activeNoteId];\n const textareaRef = useRef();\n\n useEffect(() => {\n const editor = CodeMirror.fromTextArea(textareaRef.current, {\n mode: \"markdown\",\n lineWrapping: true,\n });\n\n editor.on(\"change\", (doc, change) => {\n if (change.origin !== \"setValue\") {\n saveNote({ text: doc.getValue() });\n }\n });\n\n return () => editor.toTextArea();\n }, [activeNoteId]);\n\n return (\n <div className=\"note-editor\" key={activeNoteId}>\n <textarea\n ref={textareaRef}\n defaultValue={currentNote.text}\n autoComplete=\"off\"\n />\n </div>\n );\n}\n\nexport default NoteEditor;\n", | |
| "_parentLookup": {}, | |
| "components": { | |
| "NoteEditor": { | |
| "id": "NoteEditor", | |
| "start": { | |
| "line": 7, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 35, | |
| "column": 1 | |
| }, | |
| "externals": { | |
| "useEffect": { | |
| "kind": "module", | |
| "start": { | |
| "line": 7, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 35, | |
| "column": 1 | |
| }, | |
| "jsx": false | |
| }, | |
| "useRef": { | |
| "kind": "module", | |
| "start": { | |
| "line": 7, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 35, | |
| "column": 1 | |
| }, | |
| "jsx": false | |
| } | |
| }, | |
| "renders": [ | |
| { | |
| "kind": "props", | |
| "start": { | |
| "line": 7, | |
| "column": 20 | |
| }, | |
| "end": { | |
| "line": 7, | |
| "column": 53 | |
| }, | |
| "selfTime": 0.09999990463256836, | |
| "totalTime": 0.19999992847442627, | |
| "count": 1, | |
| "props": [ | |
| { | |
| "name": "saveNote", | |
| "prev": "({\n text,\n …", | |
| "next": "({\n text,\n …", | |
| "type": "function" | |
| }, | |
| { | |
| "name": "activeNoteId", | |
| "prev": "\"egh7aJ7qDyklb5sEE4M5…\"", | |
| "next": "\"ypQeVGqMnMtrqA1J5ot3…\"", | |
| "type": "string" | |
| } | |
| ], | |
| "state": null, | |
| "owner": "PrimaryPane" | |
| } | |
| ], | |
| "children": {}, | |
| "count": 1 | |
| } | |
| } | |
| }, | |
| "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/NoteView/index.jsx": { | |
| "source": "import \"./index.css\";\nimport ReactMarkdown from \"react-markdown\";\nimport gfm from \"remark-gfm\";\n\nexport default function NoteView({ text }) {\n return (\n <div className=\"note-view\">\n <ReactMarkdown remarkPlugins={[gfm]}>{text}</ReactMarkdown>\n </div>\n );\n}\n", | |
| "_parentLookup": {}, | |
| "components": { | |
| "NoteView": { | |
| "id": "NoteView", | |
| "start": { | |
| "line": 5, | |
| "column": 15 | |
| }, | |
| "end": { | |
| "line": 11, | |
| "column": 1 | |
| }, | |
| "externals": { | |
| "gfm": { | |
| "kind": "module", | |
| "start": { | |
| "line": 5, | |
| "column": 15 | |
| }, | |
| "end": { | |
| "line": 11, | |
| "column": 1 | |
| }, | |
| "jsx": false | |
| } | |
| }, | |
| "renders": [ | |
| { | |
| "kind": "props", | |
| "start": { | |
| "line": 5, | |
| "column": 33 | |
| }, | |
| "end": { | |
| "line": 5, | |
| "column": 41 | |
| }, | |
| "selfTime": 0.10000002384185791, | |
| "totalTime": 1.600000023841858, | |
| "count": 1, | |
| "props": [ | |
| { | |
| "name": "text", | |
| "prev": "\"Dumice ropimecuba de…\"", | |
| "next": "\"Gecido _pilanutep_ t…\"", | |
| "type": "string" | |
| } | |
| ], | |
| "state": null, | |
| "owner": "PrimaryPane" | |
| } | |
| ], | |
| "children": {}, | |
| "count": 1 | |
| } | |
| } | |
| }, | |
| "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/DarkModeContext/index.jsx": { | |
| "source": "import { createContext, useEffect, useState } from \"react\";\nimport \"./index.css\";\n\nexport const DarkModeContext = createContext();\n\nexport function DarkModeProvider({ children }) {\n const [mode, setMode] = useState(\"light\");\n\n useEffect(() => {\n document.body.classList.add(\"theme-\" + mode);\n\n return () => {\n document.body.classList.remove(\"theme-\" + mode);\n };\n }, [mode]);\n\n return (\n <DarkModeContext.Provider value={{ mode, setMode }}>\n {children}\n </DarkModeContext.Provider>\n );\n}\n", | |
| "_parentLookup": {}, | |
| "components": { | |
| "DarkModeProvider": { | |
| "id": "DarkModeProvider", | |
| "start": { | |
| "line": 6, | |
| "column": 7 | |
| }, | |
| "end": { | |
| "line": 22, | |
| "column": 1 | |
| }, | |
| "externals": { | |
| "createContext": { | |
| "kind": "module", | |
| "start": { | |
| "line": 6, | |
| "column": 7 | |
| }, | |
| "end": { | |
| "line": 22, | |
| "column": 1 | |
| }, | |
| "jsx": false | |
| }, | |
| "useEffect": { | |
| "kind": "module", | |
| "start": { | |
| "line": 6, | |
| "column": 7 | |
| }, | |
| "end": { | |
| "line": 22, | |
| "column": 1 | |
| }, | |
| "jsx": false | |
| }, | |
| "useState": { | |
| "kind": "module", | |
| "start": { | |
| "line": 6, | |
| "column": 7 | |
| }, | |
| "end": { | |
| "line": 22, | |
| "column": 1 | |
| }, | |
| "jsx": false | |
| } | |
| }, | |
| "renders": [ | |
| { | |
| "kind": "props", | |
| "start": { | |
| "line": 6, | |
| "column": 33 | |
| }, | |
| "end": { | |
| "line": 6, | |
| "column": 45 | |
| }, | |
| "selfTime": 0, | |
| "totalTime": 0, | |
| "count": 2, | |
| "props": [ | |
| { | |
| "name": "children", | |
| "prev": "<div …/>", | |
| "next": "<div …/>", | |
| "diff": { | |
| "keys": 7, | |
| "diffKeys": 2, | |
| "sample": [ | |
| { | |
| "name": "props", | |
| "prev": "{…}", | |
| "next": "{…}" | |
| }, | |
| { | |
| "name": "_store", | |
| "prev": "{}", | |
| "next": "{}" | |
| } | |
| ] | |
| }, | |
| "type": "object" | |
| } | |
| ], | |
| "state": null, | |
| "owner": "App" | |
| } | |
| ], | |
| "children": {}, | |
| "count": 2 | |
| } | |
| } | |
| }, | |
| "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/DarkModeSwitcher/index.jsx": { | |
| "source": "import { ToggleButton, ToggleButtonGroup } from \"@mui/material\";\nimport WbSunnyIcon from \"@mui/icons-material/WbSunny\";\nimport Brightness2Icon from \"@mui/icons-material/Brightness2\";\nimport { useContext } from \"react\";\nimport { DarkModeContext } from \"../DarkModeContext\";\nimport \"./index.css\";\n\nfunction DarkModeSwitcher() {\n const { mode, setMode } = useContext(DarkModeContext);\n\n return (\n <div className=\"theme-switcher\">\n <ToggleButtonGroup\n size=\"small\"\n value={mode}\n exclusive\n onChange={(_e, value) => setMode(value)}\n aria-label=\"text alignment\"\n >\n <ToggleButton value=\"light\">\n <WbSunnyIcon />\n </ToggleButton>\n <ToggleButton value=\"dark\">\n <Brightness2Icon />\n </ToggleButton>\n </ToggleButtonGroup>\n </div>\n );\n}\n\nexport default DarkModeSwitcher;\n", | |
| "_parentLookup": {}, | |
| "components": { | |
| "DarkModeSwitcher": { | |
| "id": "DarkModeSwitcher", | |
| "start": { | |
| "line": 8, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 29, | |
| "column": 1 | |
| }, | |
| "externals": { | |
| "useContext": { | |
| "kind": "module", | |
| "start": { | |
| "line": 8, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 29, | |
| "column": 1 | |
| }, | |
| "jsx": false | |
| } | |
| }, | |
| "renders": [], | |
| "children": {}, | |
| "count": 0 | |
| } | |
| } | |
| }, | |
| "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/ActiveAuthors/index.jsx": { | |
| "source": "import { Avatar, AvatarGroup } from \"@mui/material\";\nimport { useSelector } from \"react-redux\";\nimport avatar1 from \"./avatar1.jpg\";\nimport avatar2 from \"./avatar2.jpg\";\nimport avatar3 from \"./avatar3.jpg\";\n\nfunction ActiveAuthors() {\n const activeThisMonth = useSelector((state) =>\n state.users.filter(\n (i) =>\n new Date(i.lastActiveDate).getFullYear() === 2023 &&\n new Date(i.lastActiveDate).getMonth() === 0\n )\n );\n\n return (\n <div className=\"primary-pane__authors\">\n <div className=\"primary-pane__authors-last-active\">\n {activeThisMonth.length} users active this month:{\" \"}\n {activeThisMonth.map((i) => i.name).join(\", \")}\n </div>\n <AvatarGroup max={2}>\n <Avatar src={avatar1} />\n <Avatar src={avatar2} />\n <Avatar src={avatar3} />\n </AvatarGroup>\n </div>\n );\n}\n\nexport default ActiveAuthors;\n", | |
| "_parentLookup": {}, | |
| "components": { | |
| "ActiveAuthors": { | |
| "id": "ActiveAuthors", | |
| "start": { | |
| "line": 7, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 29, | |
| "column": 1 | |
| }, | |
| "externals": { | |
| "useSelector": { | |
| "kind": "module", | |
| "start": { | |
| "line": 7, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 29, | |
| "column": 1 | |
| }, | |
| "jsx": false | |
| }, | |
| "avatar1": { | |
| "kind": "module", | |
| "start": { | |
| "line": 7, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 29, | |
| "column": 1 | |
| }, | |
| "jsx": false | |
| }, | |
| "avatar2": { | |
| "kind": "module", | |
| "start": { | |
| "line": 7, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 29, | |
| "column": 1 | |
| }, | |
| "jsx": false | |
| }, | |
| "avatar3": { | |
| "kind": "module", | |
| "start": { | |
| "line": 7, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 29, | |
| "column": 1 | |
| }, | |
| "jsx": false | |
| } | |
| }, | |
| "renders": [], | |
| "children": {}, | |
| "count": 0 | |
| } | |
| } | |
| }, | |
| "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/PrimaryPane/index.jsx": { | |
| "source": "import { Button } from \"@mui/material\";\nimport { useState } from \"react\";\nimport fakeApi from \"../../utils/fakeApi\";\nimport NoteEditor from \"../NoteEditor\";\nimport NoteView from \"../NoteView\";\nimport DarkModeSwitcher from \"../DarkModeSwitcher\";\nimport ActiveAuthors from \"../ActiveAuthors\";\nimport spinner from \"./spinner.svg\";\nimport \"./index.css\";\n\nfunction PrimaryPane({ activeNoteId, notes, saveNote }) {\n const [isLoading, setIsLoading] = useState(false);\n const [isPublic, setIsPublic] = useState(false);\n const [publishedAt, setPublishedAt] = useState(null);\n\n const togglePublic = async () => {\n setIsLoading(true);\n\n if (isPublic) {\n await fakeApi.setPublicStatus(false);\n setIsPublic(false);\n } else {\n await fakeApi.setPublicStatus(true);\n const publishedDate = await fakeApi.getPublishedDate();\n setIsPublic(true);\n setPublishedAt(publishedDate.toLocaleTimeString());\n }\n\n setIsLoading(false);\n };\n\n if (!activeNoteId) {\n return (\n <div className=\"primary-pane__empty-editor\">\n <div className=\"primary-pane__eyes\">👀</div>\n <div className=\"primary-pane__eyes-caption\">\n Select a note to start editing\n </div>\n </div>\n );\n }\n\n return (\n <div className=\"primary-pane\">\n <div className=\"primary-pane__header\">\n <h1 className=\"primary-pane__header-text\">Editor</h1>\n <ActiveAuthors />\n <DarkModeSwitcher />\n </div>\n\n <div className=\"primary-pane__content\">\n <div className=\"primary-pane__controls\">\n <Button\n variant=\"outlined\"\n onClick={togglePublic}\n disabled={isLoading}\n startIcon={isPublic ? \"🤫\" : \"👀\"}\n >\n {isLoading\n ? \"Loading...\"\n : isPublic\n ? \"Make Private\"\n : \"Make Public\"}\n </Button>\n {!isLoading && isPublic && <span>Published at: {publishedAt}</span>}\n </div>\n <NoteEditor\n saveNote={({ text, date }) => saveNote(activeNoteId, { text, date })}\n notes={notes}\n activeNoteId={activeNoteId}\n />\n <div className=\"primary-pane__view\">\n <NoteView text={notes[activeNoteId].text} />\n </div>\n </div>\n <div\n className={\n \"primary-pane__spinner-wrapper\" +\n (isLoading ? \" primary-pane__spinner-wrapper_visible\" : \"\")\n }\n >\n <img className=\"primary-pane__spinner\" src={spinner} alt=\"\" />\n </div>\n </div>\n );\n}\n\nexport default PrimaryPane;\n", | |
| "_parentLookup": {}, | |
| "components": { | |
| "PrimaryPane": { | |
| "id": "PrimaryPane", | |
| "start": { | |
| "line": 11, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 86, | |
| "column": 1 | |
| }, | |
| "externals": { | |
| "useState": { | |
| "kind": "module", | |
| "start": { | |
| "line": 11, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 86, | |
| "column": 1 | |
| }, | |
| "jsx": false | |
| }, | |
| "fakeApi": { | |
| "kind": "module", | |
| "start": { | |
| "line": 11, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 86, | |
| "column": 1 | |
| }, | |
| "jsx": false | |
| }, | |
| "spinner": { | |
| "kind": "module", | |
| "start": { | |
| "line": 11, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 86, | |
| "column": 1 | |
| }, | |
| "jsx": false | |
| } | |
| }, | |
| "renders": [ | |
| { | |
| "kind": "props", | |
| "start": { | |
| "line": 11, | |
| "column": 21 | |
| }, | |
| "end": { | |
| "line": 11, | |
| "column": 54 | |
| }, | |
| "selfTime": 0.10000002384185791, | |
| "totalTime": 0.10000002384185791, | |
| "count": 2, | |
| "props": [ | |
| { | |
| "name": "activeNoteId", | |
| "prev": "null", | |
| "next": "\"egh7aJ7qDyklb5sEE4M5…\"", | |
| "type": "string" | |
| }, | |
| { | |
| "name": "saveNote", | |
| "prev": "(id, {\n text,\n …", | |
| "next": "(id, {\n text,\n …", | |
| "type": "function" | |
| } | |
| ], | |
| "state": null, | |
| "owner": "App" | |
| } | |
| ], | |
| "children": {}, | |
| "count": 2 | |
| } | |
| } | |
| }, | |
| "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/DarkModeInfo/index.jsx": { | |
| "source": "import { useContext } from \"react\";\nimport Button from \"@mui/material/Button\";\nimport { DarkModeContext } from \"../DarkModeContext\";\nimport \"./index.css\";\n\nfunction DarkModeInfo() {\n const { mode } = useContext(DarkModeContext);\n\n return (\n <span>\n Mode:{\" \"}\n <Button\n classes={{ root: \"dark-mode-info__button\" }}\n size=\"small\"\n onClick={() => alert(\"Ha, thought you can click me?\")}\n >\n {mode}\n </Button>\n </span>\n );\n}\n\nexport default DarkModeInfo;\n", | |
| "_parentLookup": {}, | |
| "components": { | |
| "DarkModeInfo": { | |
| "id": "DarkModeInfo", | |
| "start": { | |
| "line": 6, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 21, | |
| "column": 1 | |
| }, | |
| "externals": { | |
| "useContext": { | |
| "kind": "module", | |
| "start": { | |
| "line": 6, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 21, | |
| "column": 1 | |
| }, | |
| "jsx": false | |
| } | |
| }, | |
| "renders": [], | |
| "children": {}, | |
| "count": 0 | |
| } | |
| } | |
| }, | |
| "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/PublishingTo/index.jsx": { | |
| "source": "import { observer } from \"mobx-react-lite\";\nimport \"./index.css\";\n\nfunction PublishingTo({ publishingTarget, onPublishingTargetChange }) {\n return (\n <>\n Publishing to: {publishingTarget}{\" \"}\n <button\n className=\"publishing-to__button\"\n onClick={() => {\n const newTarget = prompt(\"New target?\");\n onPublishingTargetChange(newTarget);\n }}\n >\n (edit)\n </button>\n </>\n );\n}\n\nexport default observer(PublishingTo);\n", | |
| "_parentLookup": {}, | |
| "components": { | |
| "PublishingTo": { | |
| "id": "PublishingTo", | |
| "start": { | |
| "line": 4, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 19, | |
| "column": 1 | |
| }, | |
| "externals": { | |
| "observer": { | |
| "kind": "module", | |
| "start": { | |
| "line": 4, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 19, | |
| "column": 1 | |
| }, | |
| "jsx": false | |
| } | |
| }, | |
| "renders": [ | |
| { | |
| "kind": "props", | |
| "start": { | |
| "line": 4, | |
| "column": 22 | |
| }, | |
| "end": { | |
| "line": 4, | |
| "column": 68 | |
| }, | |
| "selfTime": 0.10000002384185791, | |
| "totalTime": 0.10000002384185791, | |
| "count": 1, | |
| "props": [ | |
| { | |
| "name": "onPublishingTargetChange", | |
| "prev": "(newTarget) => {\n …", | |
| "next": "(newTarget) => {\n …", | |
| "type": "function" | |
| } | |
| ], | |
| "state": null, | |
| "owner": "StatusBar" | |
| } | |
| ], | |
| "children": {}, | |
| "count": 1 | |
| } | |
| } | |
| }, | |
| "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/StatusBar/index.jsx": { | |
| "source": "import { observer } from \"mobx-react-lite\";\nimport DarkModeInfo from \"../DarkModeInfo\";\nimport PublishingTo from \"../PublishingTo\";\n\nfunction StatusBar({ store }) {\n return (\n <div>\n <PublishingTo\n publishingTarget={store.publishingConfig.target}\n onPublishingTargetChange={(newTarget) => {\n store.setPublishingTarget(newTarget);\n }}\n />{\" \"}\n · <DarkModeInfo /> · Status: {store.status}\n </div>\n );\n}\n\nexport default observer(StatusBar);\n", | |
| "_parentLookup": {}, | |
| "components": { | |
| "StatusBar": { | |
| "id": "StatusBar", | |
| "start": { | |
| "line": 5, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 17, | |
| "column": 1 | |
| }, | |
| "externals": { | |
| "observer": { | |
| "kind": "module", | |
| "start": { | |
| "line": 5, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 17, | |
| "column": 1 | |
| }, | |
| "jsx": false | |
| } | |
| }, | |
| "renders": [], | |
| "children": {}, | |
| "count": 0 | |
| } | |
| } | |
| }, | |
| "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/App/index.jsx": { | |
| "source": "import { formatISO } from \"date-fns\";\nimport Jabber from \"jabber\";\nimport { nanoid } from \"nanoid\";\nimport { memo, useEffect, useRef, useState } from \"react\";\nimport { useDispatch } from \"react-redux\";\nimport {\n deleteNotes,\n getNotes,\n putNote,\n saveNotesToLocalStorage,\n} from \"../../utils/storage\";\nimport { updateLastActiveDate } from \"../../store/redux/userReducer\";\nimport NotesList from \"../NotesList\";\nimport PrimaryPane from \"../PrimaryPane\";\nimport \"./index.css\";\nimport \"./index-pro.css\";\nimport { DarkModeProvider } from \"../DarkModeContext\";\nimport StatusBar from \"../StatusBar\";\n\nconst jabber = new Jabber();\n\nfunction App({ mobxStore }) {\n const [notes, setNotes] = useState(getNotes());\n const [activeNoteId, setActiveNoteId] = useState(null);\n\n useEffect(() => {\n saveNotesToLocalStorage(notes, activeNoteId);\n }, [notes, activeNoteId]);\n\n const dispatch = useDispatch();\n\n const saveNote = (id, { text, date }) => {\n putNote(id, { text, date });\n\n const newNotes = getNotes();\n setNotes(newNotes);\n\n dispatch(\n updateLastActiveDate(formatISO(new Date(), { representation: \"date\" }))\n );\n };\n\n const createNewNotes = ({ count, paragraphs }) => {\n for (let i = 0; i < count; i++) {\n const noteId = nanoid();\n\n let noteText = jabber.createParagraph(6);\n for (let j = 0; j < paragraphs; j++) {\n let line = jabber.createParagraph(30);\n\n noteText += \"\\n\\n\" + line;\n }\n\n // Make random words bold or italic\n noteText = noteText\n .split(\"\\n\")\n .map((line) =>\n line\n .split(\" \")\n .filter(Boolean)\n .map((word) => {\n if (Math.random() < 0.05) {\n return \"**\" + word + \"**\";\n }\n\n if (Math.random() < 0.05) {\n return \"_\" + word + \"_\";\n }\n\n return word;\n })\n .join(\" \")\n )\n .join(\"\\n\");\n\n putNote(noteId, { text: noteText });\n }\n\n const newNotes = getNotes();\n setNotes(newNotes);\n\n // For convenience, if only a single note was created, activate it\n if (count === 1) {\n const noteIds = Object.keys(newNotes);\n setActiveNoteId(noteIds[noteIds.length - 1]);\n }\n };\n\n const deleteAllNotes = () => {\n deleteNotes();\n\n const newNotes = getNotes();\n setNotes(newNotes);\n setActiveNoteId(null);\n };\n\n return (\n <DarkModeProvider>\n <div className=\"notes\">\n <div className=\"notes__columns\">\n <div className=\"notes__column notes__column_list\">\n <h1>NoteList</h1>\n <div className=\"notes__column-content\">\n <NotesList\n notes={notes}\n activeNoteId={activeNoteId}\n onNoteActivated={setActiveNoteId}\n onNewNotesRequested={createNewNotes}\n onDeleteAllRequested={deleteAllNotes}\n />\n </div>\n </div>\n <div className=\"notes__column notes__column_primary\">\n <div className=\"notes__column-content\">\n <PrimaryPane\n activeNoteId={activeNoteId}\n notes={notes}\n saveNote={saveNote}\n />\n </div>\n </div>\n </div>\n <div className=\"notes__status-bar\">\n <StatusBar store={mobxStore.statusBar} />\n </div>\n </div>\n </DarkModeProvider>\n );\n}\n\nexport default memo(App);\n", | |
| "_parentLookup": {}, | |
| "components": { | |
| "App": { | |
| "id": "App", | |
| "start": { | |
| "line": 22, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 129, | |
| "column": 1 | |
| }, | |
| "externals": { | |
| "formatISO": { | |
| "kind": "module", | |
| "start": { | |
| "line": 22, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 129, | |
| "column": 1 | |
| }, | |
| "jsx": false | |
| }, | |
| "nanoid": { | |
| "kind": "module", | |
| "start": { | |
| "line": 22, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 129, | |
| "column": 1 | |
| }, | |
| "jsx": false | |
| }, | |
| "memo": { | |
| "kind": "module", | |
| "start": { | |
| "line": 22, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 129, | |
| "column": 1 | |
| }, | |
| "jsx": false | |
| }, | |
| "useEffect": { | |
| "kind": "module", | |
| "start": { | |
| "line": 22, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 129, | |
| "column": 1 | |
| }, | |
| "jsx": false | |
| }, | |
| "useRef": { | |
| "kind": "module", | |
| "start": { | |
| "line": 22, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 129, | |
| "column": 1 | |
| }, | |
| "jsx": false | |
| }, | |
| "useState": { | |
| "kind": "module", | |
| "start": { | |
| "line": 22, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 129, | |
| "column": 1 | |
| }, | |
| "jsx": false | |
| }, | |
| "useDispatch": { | |
| "kind": "module", | |
| "start": { | |
| "line": 22, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 129, | |
| "column": 1 | |
| }, | |
| "jsx": false | |
| }, | |
| "deleteNotes": { | |
| "kind": "module", | |
| "start": { | |
| "line": 22, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 129, | |
| "column": 1 | |
| }, | |
| "jsx": false | |
| }, | |
| "getNotes": { | |
| "kind": "module", | |
| "start": { | |
| "line": 22, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 129, | |
| "column": 1 | |
| }, | |
| "jsx": false | |
| }, | |
| "putNote": { | |
| "kind": "module", | |
| "start": { | |
| "line": 22, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 129, | |
| "column": 1 | |
| }, | |
| "jsx": false | |
| }, | |
| "saveNotesToLocalStorage": { | |
| "kind": "module", | |
| "start": { | |
| "line": 22, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 129, | |
| "column": 1 | |
| }, | |
| "jsx": false | |
| }, | |
| "updateLastActiveDate": { | |
| "kind": "module", | |
| "start": { | |
| "line": 22, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 129, | |
| "column": 1 | |
| }, | |
| "jsx": false | |
| }, | |
| "jabber": { | |
| "kind": "const", | |
| "start": { | |
| "line": 22, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 129, | |
| "column": 1 | |
| }, | |
| "jsx": false | |
| } | |
| }, | |
| "renders": [ | |
| { | |
| "kind": "state", | |
| "start": { | |
| "line": 24, | |
| "column": 42 | |
| }, | |
| "end": { | |
| "line": 24, | |
| "column": 56 | |
| }, | |
| "selfTime": 0, | |
| "totalTime": 0.2999999523162842, | |
| "count": 2, | |
| "props": null, | |
| "state": { | |
| "prev": "null", | |
| "next": "\"egh7aJ7qDyklb5sEE4M5…\"", | |
| "stack": [ | |
| { | |
| "name": "dispatchDiscreteEvent", | |
| "loc": null | |
| }, | |
| { | |
| "name": "dispatchEvent", | |
| "loc": "http://localhost:5174/node_modules/.vite/deps/chunk-ZAUWP6QV.js?v=38ce16ae:5449:13" | |
| }, | |
| { | |
| "name": "dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay", | |
| "loc": "http://localhost:5174/node_modules/.vite/deps/chunk-ZAUWP6QV.js?v=38ce16ae:5472:13" | |
| }, | |
| { | |
| "name": "dispatchEventForPluginEventSystem", | |
| "loc": "http://localhost:5174/node_modules/.vite/deps/chunk-ZAUWP6QV.js?v=38ce16ae:5478:13" | |
| }, | |
| { | |
| "name": "batchedUpdates", | |
| "loc": "http://localhost:5174/node_modules/.vite/deps/chunk-ZAUWP6QV.js?v=38ce16ae:7176:11" | |
| }, | |
| { | |
| "name": "batchedUpdates$1", | |
| "loc": "http://localhost:5174/node_modules/.vite/deps/chunk-ZAUWP6QV.js?v=38ce16ae:3579:20" | |
| }, | |
| { | |
| "name": "<unknown>", | |
| "loc": "http://localhost:5174/node_modules/.vite/deps/chunk-ZAUWP6QV.js?v=38ce16ae:18909:20" | |
| }, | |
| { | |
| "name": "dispatchEventsForPlugins", | |
| "loc": "http://localhost:5174/node_modules/.vite/deps/chunk-ZAUWP6QV.js?v=38ce16ae:7177:20" | |
| }, | |
| { | |
| "name": "processDispatchQueue", | |
| "loc": "http://localhost:5174/node_modules/.vite/deps/chunk-ZAUWP6QV.js?v=38ce16ae:7053:11" | |
| }, | |
| { | |
| "name": "processDispatchQueueItemsInOrder", | |
| "loc": "http://localhost:5174/node_modules/.vite/deps/chunk-ZAUWP6QV.js?v=38ce16ae:7045:13" | |
| }, | |
| { | |
| "name": "executeDispatch", | |
| "loc": "http://localhost:5174/node_modules/.vite/deps/chunk-ZAUWP6QV.js?v=38ce16ae:7036:15" | |
| }, | |
| { | |
| "name": "invokeGuardedCallbackAndCatchFirstError", | |
| "loc": "http://localhost:5174/node_modules/.vite/deps/chunk-ZAUWP6QV.js?v=38ce16ae:7016:11" | |
| }, | |
| { | |
| "name": "invokeGuardedCallback", | |
| "loc": "http://localhost:5174/node_modules/.vite/deps/chunk-ZAUWP6QV.js?v=38ce16ae:3736:33" | |
| }, | |
| { | |
| "name": "invokeGuardedCallbackDev", | |
| "loc": "http://localhost:5174/node_modules/.vite/deps/chunk-ZAUWP6QV.js?v=38ce16ae:3733:39" | |
| } | |
| ] | |
| }, | |
| "owner": "Observer" | |
| } | |
| ], | |
| "children": {}, | |
| "count": 2 | |
| } | |
| } | |
| }, | |
| "/Users/aidenybai/Projects/aidenybai/anya/demo/src/index.jsx": { | |
| "source": "// Uncomment to enable why-did-you-render:\n// import \"./wdyr\";\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactDOMClient from 'react-dom/client';\nimport * as MobxReact from 'mobx-react-lite';\nimport * as ReactRedux from 'react-redux';\nimport App from './components/App';\nimport reduxStore from './store/redux';\nimport mobxStore from './store/mobx';\nimport './index.css';\nimport { createTheme, ThemeProvider } from '@mui/material';\n\nconst theme = createTheme({\n typography: {\n fontFamily: 'inherit',\n },\n components: {\n MuiButton: {\n defaultProps: {\n size: 'small',\n },\n styleOverrides: {\n root: {\n fontFamily: 'inherit',\n color: 'black',\n borderColor: 'rgba(0, 0, 0, 0.23)',\n backgroundColor: 'white',\n '&:hover': {\n borderColor: 'rgba(0, 0, 0, 0.23)',\n backgroundColor: '#ffe866',\n },\n '&:active': {\n borderColor: 'rgba(0, 0, 0, 0.23)',\n backgroundColor: '#ffdb01',\n },\n },\n },\n },\n },\n});\n\nconst useReact18 = true;\n\nconst element = (\n <React.StrictMode>\n <ReactRedux.Provider store={reduxStore}>\n <MobxReact.Observer>\n {() => (\n <ThemeProvider theme={theme}>\n {!useReact18 && (\n <div className=\"react-17-warning\">\n Workshop warning: running in the React 17 mode.\n </div>\n )}\n <App mobxStore={mobxStore} />\n </ThemeProvider>\n )}\n </MobxReact.Observer>\n </ReactRedux.Provider>\n </React.StrictMode>\n);\n\nif (useReact18) {\n ReactDOMClient.createRoot(document.getElementById('root')).render(element);\n} else {\n ReactDOM.render(element, document.getElementById('root'));\n}\n", | |
| "_parentLookup": {}, | |
| "components": {} | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment