From 956b480d19f13a18fdc9160e7dc724105685ab1e Mon Sep 17 00:00:00 2001
From: wholteza <zackarias@montell.se>
Date: Sat, 23 Dec 2023 22:34:18 +0100
Subject: [PATCH] Fix styling and crashign date field

---
 src/helpers/dynamic-object-helpers.ts       |  4 ++--
 src/hooks/use-form/use-form-helpers.spec.ts |  2 +-
 src/hooks/use-form/use-form-helpers.ts      | 16 ++++++++++------
 src/index.scss                              |  5 ++---
 4 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/helpers/dynamic-object-helpers.ts b/src/helpers/dynamic-object-helpers.ts
index 0df1a75..9d7ae03 100644
--- a/src/helpers/dynamic-object-helpers.ts
+++ b/src/helpers/dynamic-object-helpers.ts
@@ -24,10 +24,10 @@ export const mutatePropOnPath = <K>(
 export const getValueOnPath = <T>(
   dynamicObject: Record<string, never>,
   propertyPath: string[]
-): T => {
+): T | null => {
   const [key, ...rest] = propertyPath;
   if (!rest.length) {
-    return dynamicObject[key] as T;
+    return dynamicObject[key] as T | null;
   }
   return getValueOnPath(dynamicObject[key], rest);
 };
diff --git a/src/hooks/use-form/use-form-helpers.spec.ts b/src/hooks/use-form/use-form-helpers.spec.ts
index f008107..b1ed95b 100644
--- a/src/hooks/use-form/use-form-helpers.spec.ts
+++ b/src/hooks/use-form/use-form-helpers.spec.ts
@@ -78,7 +78,7 @@ describe("getFormValueBasedOnPropertyInformation", () => {
     );
 
     // assert
-    expect(result).toBe(expectedValue.toLocaleDateString());
+    expect(result).toBe(expectedValue.toLocaleDateString("sv-SE"));
     expect(spy).toHaveBeenCalledWith(dynamicObject, information.propertyPath);
   });
   it("throws if type is anything but the implemented ones", () => {
diff --git a/src/hooks/use-form/use-form-helpers.ts b/src/hooks/use-form/use-form-helpers.ts
index 2d120b4..dc5c094 100644
--- a/src/hooks/use-form/use-form-helpers.ts
+++ b/src/hooks/use-form/use-form-helpers.ts
@@ -11,14 +11,18 @@ export const getFormValueBasedOnPropertyInformation = (
 ): string | number => {
   switch (information.type) {
     case "string":
-      return getValueOnPath<string>(dynamicObject, information.propertyPath);
+      return (
+        getValueOnPath<string>(dynamicObject, information.propertyPath) ?? ""
+      );
     case "number":
-      return getValueOnPath<number>(dynamicObject, information.propertyPath);
+      return (
+        getValueOnPath<number>(dynamicObject, information.propertyPath) ?? 0
+      );
     case "date":
-      return getValueOnPath<Date>(
-        dynamicObject,
-        information.propertyPath
-      ).toLocaleDateString();
+      return (
+        getValueOnPath<Date>(dynamicObject, information.propertyPath) ??
+        new Date(Date.now())
+      ).toLocaleDateString("se-SE");
     default:
       throw new Error(`field type ${information.type} is not implemented`);
   }
diff --git a/src/index.scss b/src/index.scss
index 397782d..7a35c92 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -5,6 +5,7 @@ $color-primary-light:  #B8B8FF;
 $color-background:  #F8F7FF;
 $color-secondary-light:  #FFEEDD;
 $color-secondary:  #FFD8BE;
+$color-secondary-text:  color-mix(in srgb, #FFD8BE 40%, black);
 
 @mixin font-family {
   font-family: 'Ubuntu Mono';
@@ -14,7 +15,6 @@ $color-secondary:  #FFD8BE;
 
 @mixin secondary-text-color{
   color: $color-secondary;
-  filter: brightness(50%);
 }
 
 @mixin fade-in-animation {
@@ -75,7 +75,6 @@ body {
   width: 100vw;
   height: 100vh;
   @media (min-width: 768px) {
-    width: 500px;
     margin: 0 auto;
   }
 }
@@ -175,7 +174,7 @@ hr {
     width: 100%;
   }
   label {
-    @include secondary-text-color();
+    color: $color-secondary-text;
     font-weight: 600;
     text-transform: capitalize;
     position: relative;