fix(settingstab): fix state updates

snek-at · Sep 16, 2021 · 0535ee5 · 0535ee5
1 parent af7752b
commit 0535ee5
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 10 deletions.
diff --git a/packages/jaen-pages/src/containers/ui/tabs/SettingsTab.tsx b/packages/jaen-pages/src/containers/ui/tabs/SettingsTab.tsx
@@ -36,7 +36,7 @@ const SettingsTab: React.FC<{}> = () => {
           mode="selector"
           onSelectorClose={fileSelector.onClose}
           onSelectorSelect={i => {
-            handleValuesChange({image: i.src})
+            handleValuesChange({...siteMetadata, image: i.src})
 
             fileSelector.onClose()
           }}

diff --git a/packages/jaen-shared-ui/src/components/molecules/SiteSettings/index.tsx b/packages/jaen-shared-ui/src/components/molecules/SiteSettings/index.tsx
@@ -172,9 +172,16 @@ const SiteSettings: React.FC<SiteSettingsType> = props => {
                 <Box p={2}>
                   <Heading size="sm">Name</Heading>
                   <Input
-                    placeholder="Description"
+                    placeholder="John Doe"
                     value={values.author?.name || ''}
-                    onChange={e => handleValuesChange('description', e)}
+                    onChange={e =>
+                      setValues({
+                        ...values,
+                        author: {
+                          name: e.target.value
+                        }
+                      })
+                    }
                     onBlur={handleValuesCb}
                   />
                 </Box>
@@ -193,27 +200,54 @@ const SiteSettings: React.FC<SiteSettingsType> = props => {
                 <Box p={2}>
                   <Heading size="sm">Name</Heading>
                   <Input
-                    placeholder="Description"
+                    placeholder="Example, Inc."
                     value={values.organization?.name || ''}
-                    onChange={e => handleValuesChange('description', e)}
+                    onChange={e =>
+                      setValues({
+                        ...values,
+                        organization: {
+                          name: e.target.value,
+                          url: values.organization?.url || '',
+                          logo: values.organization?.logo || ''
+                        }
+                      })
+                    }
                     onBlur={handleValuesCb}
                   />
                 </Box>
                 <Box p={2}>
                   <Heading size="sm">URL</Heading>
                   <Input
-                    placeholder="Description"
+                    placeholder="https://example.com"
                     value={values.organization?.url || ''}
-                    onChange={e => handleValuesChange('description', e)}
+                    onChange={e =>
+                      setValues({
+                        ...values,
+                        organization: {
+                          name: values.organization?.name || '',
+                          url: e.target.value,
+                          logo: values.organization?.logo || ''
+                        }
+                      })
+                    }
                     onBlur={handleValuesCb}
                   />
                 </Box>
                 <Box p={2}>
                   <Heading size="sm">Logo</Heading>
                   <Input
-                    placeholder="Description"
+                    placeholder="https://example.com"
                     value={values.organization?.logo || ''}
-                    onChange={e => handleValuesChange('description', e)}
+                    onChange={e =>
+                      setValues({
+                        ...values,
+                        organization: {
+                          name: values.organization?.name || '',
+                          url: values.organization?.url || '',
+                          logo: e.target.value
+                        }
+                      })
+                    }
                     onBlur={handleValuesCb}
                   />
                 </Box>
@@ -228,7 +262,10 @@ const SiteSettings: React.FC<SiteSettingsType> = props => {
                 transition="0.2s all"
                 objectFit="cover"
                 _hover={{filter: 'brightness(70%)', cursor: 'pointer'}}
-                onClick={props.onImageClick}
+                onClick={() => {
+                  handleValuesCb()
+                  props.onImageClick()
+                }}
               />
             </Box>
           </Flex>