add types to settings UI components

src/components/Settings/ProjectSettings/Authentication.tsx

@@ -12,7 +12,9 @@ export default function Authentication({
   publicSettings,
   updatePublicSettings,
 }: IProjectSettingsChildProps) {
-  const [signInOptions, setSignInOptions] = useState(
+  const [signInOptions, setSignInOptions] = useState<
+    NonNullable<typeof publicSettings["signInOptions"]>
+  >(
     Array.isArray(publicSettings?.signInOptions)
       ? publicSettings.signInOptions
       : ["google"]
@@ -23,10 +25,12 @@ export default function Authentication({
       <MultiSelect
         label="Sign-in options"
         value={signInOptions}
-        options={Object.keys(authOptions).map((option) => ({
-          value: option,
-          label: startCase(option).replace("Github", "GitHub"),
-        }))}
+        options={
+          Object.keys(authOptions).map((option) => ({
+            value: option,
+            label: startCase(option).replace("Github", "GitHub"),
+          })) as any
+        }
         onChange={setSignInOptions}
         onClose={() => updatePublicSettings({ signInOptions })}
         multiple

src/components/Settings/ProjectSettings/Customization.tsx

@@ -13,8 +13,8 @@ export default function Customization({
   updatePublicSettings,
 }: IProjectSettingsChildProps) {
   const [customizedThemeColor, setCustomizedThemeColor] = useState(
-    publicSettings.theme?.light?.palette?.primary?.main ||
-      publicSettings.theme?.dark?.palette?.primary?.main
+    (publicSettings.theme?.light?.palette?.primary as any)?.main ||
+      (publicSettings.theme?.dark?.palette?.primary as any)?.main
   );
 
   const handleSave = ({ light, dark }: { light: string; dark: string }) => {
@@ -50,8 +50,12 @@ export default function Customization({
       <Collapse in={customizedThemeColor} style={{ marginTop: 0 }}>
         <Suspense fallback={<Loading />}>
           <ThemeColorPicker
-            currentLight={publicSettings.theme?.light?.palette?.primary?.main}
-            currentDark={publicSettings.theme?.dark?.palette?.primary?.main}
+            currentLight={
+              (publicSettings.theme?.light?.palette?.primary as any)?.main
+            }
+            currentDark={
+              (publicSettings.theme?.dark?.palette?.primary as any)?.main
+            }
             handleSave={handleSave}
           />
         </Suspense>

src/components/Settings/UserSettings/Account.tsx

@@ -9,19 +9,19 @@ export default function Account({ settings }: IUserSettingsChildProps) {
   return (
     <Grid container spacing={2} alignItems="center">
       <Grid item>
-        <Avatar src={settings.user.photoURL} />
+        <Avatar src={settings.user?.photoURL} />
       </Grid>
 
       <Grid item xs>
         <Typography variant="body1" style={{ userSelect: "all" }}>
-          {settings.user.displayName}
+          {settings.user?.displayName}
         </Typography>
         <Typography
           variant="body2"
           color="textSecondary"
           style={{ userSelect: "all" }}
         >
-          {settings.user.email}
+          {settings.user?.email}
         </Typography>
       </Grid>
 

src/components/Settings/UserSettings/Personalization.tsx

@@ -14,8 +14,8 @@ export default function Personalization({
 }: IUserSettingsChildProps) {
   const [customizedThemeColor, setCustomizedThemeColor] = useState(
     Boolean(
-      settings.theme?.light?.palette?.primary?.main ||
-        settings.theme?.dark?.palette?.primary?.main
+      (settings.theme?.light?.palette?.primary as any)?.main ||
+        (settings.theme?.dark?.palette?.primary as any)?.main
     )
   );
 
@@ -52,8 +52,10 @@ export default function Personalization({
       <Collapse in={customizedThemeColor} style={{ marginTop: 0 }}>
         <Suspense fallback={<Loading style={{ height: "auto" }} />}>
           <ThemeColorPicker
-            currentLight={settings.theme?.light?.palette?.primary?.main}
-            currentDark={settings.theme?.dark?.palette?.primary?.main}
+            currentLight={
+              (settings.theme?.light?.palette?.primary as any)?.main
+            }
+            currentDark={(settings.theme?.dark?.palette?.primary as any)?.main}
             handleSave={handleSave}
           />
         </Suspense>

src/components/Settings/UserSettings/Theme.tsx

@@ -62,7 +62,9 @@ export default function Theme({
       <FormControlLabel
         control={
           <Checkbox
-            defaultChecked={Boolean(settings.theme?.dark?.palette?.darker)}
+            defaultChecked={Boolean(
+              (settings.theme?.dark?.palette as any)?.darker
+            )}
             onChange={(e) => {
               updateSettings({
                 theme: merge(settings.theme, {

src/pages/Settings/DebugSettingsPage.tsx

@@ -23,13 +23,6 @@ import { USERS } from "@src/config/dbPaths";
 import { getTableSchemaPath } from "@src/utils/table";
 import { useScrollToHash } from "@src/hooks/useScrollToHash";
 
-export interface IProjectSettingsChildProps {
-  settings: Record<string, any>;
-  updateSettings: (data: Record<string, any>) => void;
-  publicSettings: Record<string, any>;
-  updatePublicSettings: (data: Record<string, any>) => void;
-}
-
 export default function DebugSettingsPage() {
   const [firebaseDb] = useAtom(firebaseDbAtom, projectScope);
   const [projectSettings] = useAtom(projectSettingsAtom, projectScope);

src/pages/Settings/ProjectSettingsPage.tsx

@@ -19,12 +19,13 @@ import {
   updatePublicSettingsAtom,
 } from "@src/atoms/projectScope";
 import { useScrollToHash } from "@src/hooks/useScrollToHash";
+import { ProjectSettings, PublicSettings } from "@src/types/settings";
 
 export interface IProjectSettingsChildProps {
-  settings: Record<string, any>;
-  updateSettings: (data: Record<string, any>) => void;
-  publicSettings: Record<string, any>;
-  updatePublicSettings: (data: Record<string, any>) => void;
+  settings: ProjectSettings;
+  updateSettings: (data: Partial<ProjectSettings>) => void;
+  publicSettings: PublicSettings;
+  updatePublicSettings: (data: Partial<PublicSettings>) => void;
 }
 
 export default function ProjectSettingsPage() {

src/pages/Settings/UserSettingsPage.tsx

@@ -18,10 +18,11 @@ import {
   updateUserSettingsAtom,
 } from "@src/atoms/projectScope";
 import { useScrollToHash } from "@src/hooks/useScrollToHash";
+import { UserSettings } from "@src/types/settings";
 
 export interface IUserSettingsChildProps {
-  settings: Record<string, any>;
-  updateSettings: (data: Record<string, any>) => void;
+  settings: UserSettings;
+  updateSettings: (data: Partial<UserSettings>) => void;
 }
 
 export default function UserSettingsPage() {