remove contextprovider, add notification when invalid file

eslint.config.mjs

@@ -4,6 +4,7 @@ export default antfu({
   rules: {
     'no-console': 'off',
     'style/max-len': ['off'],
+    'style/max-statements-per-line': ['off'],
   },
   yaml: false,
 })

package.json

@@ -16,6 +16,7 @@
     "@cloudpss/zstd": "^0.2.16",
     "@mantine/core": "^7.9.1",
     "@mantine/hooks": "^7.9.1",
+    "@mantine/notifications": "^7.9.1",
     "@tabler/icons-react": "^3.3.0",
     "immer": "^10.1.1",
     "react": "^18.2.0",

src/App.tsx

@@ -1,15 +1,50 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { AppShell, Center, FileInput, Group, Title } from '@mantine/core'
-import CharacterContextProvider from './Context/CharacterContextProvider'
+import { useImmer } from 'use-immer'
+import { notifications } from '@mantine/notifications'
+import CharacterContext from './Context/CharacterContext.tsx'
+import CharacterEditor from './Components/CharacterEditor.tsx'
+import type { Character } from './Chf/Character.ts'
+import { readCharacter } from './Chf/Character.ts'
+import { extractChf } from './Chf/ChfFile.ts'
 
 function App() {
   const [chf, setChf] = useState<File | null>()
+  const [character, updateCharacter] = useImmer<Character>(undefined!)
+
+  useEffect(() => {
+    if (!chf) {
+      updateCharacter(() => undefined)
+      return
+    }
+
+    chf.arrayBuffer().then((buffer) => {
+      try {
+        const newCharacter = readCharacter(extractChf(new Uint8Array(buffer)))
+        updateCharacter(() => newCharacter)
+      }
+      catch {
+        console.error('Failed to read character')
+        updateCharacter(() => undefined)
+        setChf(null)
+        notifications.show({
+          title: 'Failed to read character',
+          message: 'Please upload a valid .chf file',
+          color: 'red',
+          autoClose: 5000,
+
+        })
+      }
+    }).catch((e) => {
+      console.error(e)
+    })
+  }, [chf, updateCharacter, setChf])
 
   return (
     <AppShell header={{ height: 60 }} footer={{ height: 60 }} padding="md">
       <AppShell.Header>
         <Group h="100%" px="md" justify="space-between">
-          <Title onClick={() => window.location.reload()}>StarChar</Title>
+          <Title>StarChar</Title>
           <FileInput
             clearable
             accept=".chf"
@@ -20,9 +55,11 @@ function App() {
         </Group>
       </AppShell.Header>
       <AppShell.Main>
-        {chf
+        {character && chf
           ? (
-            <CharacterContextProvider chf={chf} />
+            <CharacterContext.Provider value={[character, updateCharacter]}>
+              <CharacterEditor />
+            </CharacterContext.Provider>
             )
           : (
             <Center>

src/Components/CharacterEditor.tsx

@@ -24,7 +24,7 @@ function CharacterEditor() {
           <SkinColorPicker />
         </Group>
       </Stack>
-      <Affix zIndex={1000} position={{ bottom: 0, left: 0, right: 0 }}>
+      <Affix zIndex={900} position={{ bottom: 0, left: 0, right: 0 }}>
         <Center p="xl">
           <Button
             size="xl"

src/main.tsx

@@ -1,13 +1,15 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { MantineProvider } from '@mantine/core'
-
+import { Notifications } from '@mantine/notifications'
 import App from './App.tsx'
+import '@mantine/notifications/styles.css'
 import '@mantine/core/styles.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <MantineProvider forceColorScheme="dark">
+      <Notifications position="top-center" zIndex={1000} />
       <App />
     </MantineProvider>
   </React.StrictMode>,

yarn.lock

@@ -165,7 +165,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.20.13":
+"@babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.7":
   version: 7.24.5
   resolution: "@babel/runtime@npm:7.24.5"
   dependencies:
@@ -674,6 +674,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mantine/notifications@npm:^7.9.1":
+  version: 7.9.1
+  resolution: "@mantine/notifications@npm:7.9.1"
+  dependencies:
+    "@mantine/store": "npm:7.9.1"
+    react-transition-group: "npm:4.4.5"
+  peerDependencies:
+    "@mantine/core": 7.9.1
+    "@mantine/hooks": 7.9.1
+    react: ^18.2.0
+    react-dom: ^18.2.0
+  checksum: 10c0/c27534feb9f29336a5034e772a3a8577cf84f4936101615147754b2b364e95142ae18bf4f6f5cbfe9d768886665d432fc8d547cba9bada5f50de40815f9f1f28
+  languageName: node
+  linkType: hard
+
+"@mantine/store@npm:7.9.1":
+  version: 7.9.1
+  resolution: "@mantine/store@npm:7.9.1"
+  peerDependencies:
+    react: ^18.2.0
+  checksum: 10c0/a4b5e72cc78b53ae4aa98547c84d57e74a9f01d31e998b10090b658b5a2e68cb0a320c37b330b7347e70e5fbc6a84863d5625093791afe2d11b5599424442ee1
+  languageName: node
+  linkType: hard
+
 "@nodelib/fs.scandir@npm:2.1.5":
   version: 2.1.5
   resolution: "@nodelib/fs.scandir@npm:2.1.5"
@@ -1986,6 +2010,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dom-helpers@npm:^5.0.1":
+  version: 5.2.1
+  resolution: "dom-helpers@npm:5.2.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.8.7"
+    csstype: "npm:^3.0.2"
+  checksum: 10c0/f735074d66dd759b36b158fa26e9d00c9388ee0e8c9b16af941c38f014a37fc80782de83afefd621681b19ac0501034b4f1c4a3bff5caa1b8667f0212b5e124c
+  languageName: node
+  linkType: hard
+
 "eastasianwidth@npm:^0.2.0":
   version: 0.2.0
   resolution: "eastasianwidth@npm:0.2.0"
@@ -4739,7 +4773,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
+"prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -4860,6 +4894,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-transition-group@npm:4.4.5":
+  version: 4.4.5
+  resolution: "react-transition-group@npm:4.4.5"
+  dependencies:
+    "@babel/runtime": "npm:^7.5.5"
+    dom-helpers: "npm:^5.0.1"
+    loose-envify: "npm:^1.4.0"
+    prop-types: "npm:^15.6.2"
+  peerDependencies:
+    react: ">=16.6.0"
+    react-dom: ">=16.6.0"
+  checksum: 10c0/2ba754ba748faefa15f87c96dfa700d5525054a0141de8c75763aae6734af0740e77e11261a1e8f4ffc08fd9ab78510122e05c21c2d79066c38bb6861a886c82
+  languageName: node
+  linkType: hard
+
 "react@npm:^18.2.0":
   version: 18.3.1
   resolution: "react@npm:18.3.1"
@@ -5372,6 +5421,7 @@ __metadata:
     "@eslint-react/eslint-plugin": "npm:^1.5.11"
     "@mantine/core": "npm:^7.9.1"
     "@mantine/hooks": "npm:^7.9.1"
+    "@mantine/notifications": "npm:^7.9.1"
     "@tabler/icons-react": "npm:^3.3.0"
     "@types/react": "npm:^18.2.66"
     "@types/react-dom": "npm:^18.2.22"