Alt simplify types

src/lib/types.ts

@@ -35,30 +35,15 @@ export interface RecordBase {
   // fromPb(data: any): RecordClass; // can't have static methods in interface https://github.com/microsoft/TypeScript/issues/13462
 }
 
-export class Record {
-  id: RecordIdString;
-
-  constructor(data: Record) {
-    this.id = data.id;
-  }
-}
-
-export class User extends Record {
-  name: string;
-  isAdmin: boolean;
-
-  constructor(data: User) {
-    super(data);
-    this.name = data.name;
-    this.isAdmin = data.isAdmin;
-  }
+export class User {
+  constructor(
+    public readonly id: RecordIdString,
+    public readonly name: string,
+    public readonly isAdmin: boolean
+  ) {}
 
   static fromPb(data: AuthModel): User {
-    return new User({
-      id: data?.id,
-      name: data?.name,
-      isAdmin: data?.is_admin
-    });
+    return new User(data?.id, data?.name, data?.is_admin);
   }
 }
 
@@ -67,171 +52,132 @@ export type ExpandedOrderRecord = OrderResponse & {
   expand: { items: ExpandedOrderItemRecord[] };
 };
 
-export class Order extends Record implements RecordBase {
-  state: State;
-  items: Array<OrderItem>;
-
-  constructor(data: Order) {
-    super(data);
-    this.state = data.state;
-    this.items = data.items;
-  }
+export class Order implements RecordBase {
+  constructor(
+    public readonly id: RecordIdString,
+    public readonly state: State,
+    public readonly items: Array<OrderItem>
+  ) {}
 
   // FIXME: implement correctly
   toPb() {
-    return this;
+    return { state: this.state, items: this.items };
   }
 
   static fromPb(data: ExpandedOrderRecord): Order {
-    return new Order({
-      id: data.id,
-      state: data.state,
-      items: data.expand.items.map(OrderItem.fromPb)
-    } as Order);
+    return new Order(data.id, data.state, data.expand.items.map(OrderItem.fromPb));
   }
 }
 
 export type ExpandedOrderItemRecord = OrderItemResponse & {
   expand: { item: ItemResponse };
 };
 
-export class OrderItem extends Record implements RecordBase {
-  name: string;
-  item: Item;
-
-  constructor(data: OrderItem) {
-    super(data);
-    this.name = data.name;
-    this.item = data.item;
-  }
+export class OrderItem implements RecordBase {
+  constructor(
+    public readonly id: RecordIdString,
+    public readonly name: string,
+    public readonly item: Item
+  ) {}
 
   toPb() {
-    return this;
+    return { name: this.name, item: this.item };
   }
 
   static fromPb(data: ExpandedOrderItemRecord): OrderItem {
-    return new OrderItem({
-      id: data.id,
-      name: data.expand.item.name,
-      item: Item.fromPb(data.expand.item)
-    } as OrderItem);
+    return new OrderItem(data.id, data.expand.item.name, Item.fromPb(data.expand.item));
   }
 }
 
-export class Item extends Record implements RecordBase {
-  name: string;
-  price: number;
-  category: string;
-  image: string;
-
-  constructor(data: Item) {
-    super(data);
-    this.name = data.name;
-    this.price = data.price;
-    this.category = data.category;
-    this.image = data.image;
-  }
+export class Item implements RecordBase {
+  constructor(
+    public readonly id: RecordIdString,
+    public readonly name: string,
+    public readonly price: number,
+    public readonly category: string,
+    public readonly image: string
+  ) {}
 
   toPb() {
-    return this;
+    return { name: this.name, price_nok: this.price, category: this.category, image: this.image };
   }
 
   static fromPb(data: ItemResponse): Item {
-    return new Item({
-      id: data.id,
-      name: data.name,
-      price: data.price_nok,
-      category: data.category,
-      image: pb.files.getUrl(data, data.image)
-    } as Item);
+    return new Item(
+      data.id,
+      data.name,
+      data.price_nok,
+      data.category,
+      pb.files.getUrl(data, data.image)
+    );
   }
 }
 
 export type ExpandedCategoryRecord = CategoryResponse & {
   expand: { item_via_category: ItemResponse[] };
 };
 
-export class Category extends Record implements RecordBase {
-  name: string;
-  sortOrder: number;
-  items: Item[];
-
-  constructor(data: Category) {
-    super(data);
-    this.name = data.name;
-    this.sortOrder = data.sortOrder;
-    this.items = data.items;
-  }
+export class Category implements RecordBase {
+  constructor(
+    public readonly id: RecordIdString,
+    public readonly name: string,
+    public readonly sortOrder: number,
+    public readonly items: Item[]
+  ) {}
 
   toPb() {
     return { name: this.name, sort_order: this.sortOrder };
   }
 
   static fromPb(data: ExpandedCategoryRecord): Category {
-    return new Category({
-      id: data.id,
-      name: data.name,
-      sortOrder: data.sort_order,
-      items: data.expand.item_via_category.map(Item.fromPb)
-    } as Category);
+    return new Category(
+      data.id,
+      data.name,
+      data.sort_order,
+      data.expand.item_via_category.map(Item.fromPb)
+    );
   }
 }
 
 // messages
-export class Message extends Record implements RecordBase {
-  title: string;
-  subtitle: string;
+export class Message implements RecordBase {
+  constructor(
+    public readonly id: RecordIdString,
+    public readonly title: string,
+    public readonly subtitle: string
+  ) {}
 
-  static baseValue = { id: "", title: "", subtitle: "" } as Message;
-
-  constructor(data: Message) {
-    super(data);
-    this.title = data.title;
-    this.subtitle = data.subtitle;
-  }
+  static baseValue = new Message("", "", "");
 
   toPb() {
     return { title: this.title, subtitle: this.subtitle };
   }
 
   static fromPb(data: MessageResponse): Message {
-    return new Message({
-      id: data.id,
-      title: data.title,
-      subtitle: data.subtitle
-    } as Message);
+    return new Message(data.id, data.title, data.subtitle);
   }
 }
 
-export class Status extends Record implements RecordBase {
-  message: Message;
-  messages: Message[];
-  online: boolean;
-
-  static baseValue = {
-    id: "",
-    online: false,
-    message: Message.baseValue,
-    messages: [Message.baseValue]
-  } as Status;
-
-  constructor(data: Status) {
-    super(data);
-    this.messages = data.messages;
-    this.message = data.message;
-    this.online = data.online;
-  }
+export class Status implements RecordBase {
+  constructor(
+    public readonly id: RecordIdString,
+    public readonly message: Message,
+    public readonly messages: Message[],
+    public readonly online: boolean
+  ) {}
+
+  static baseValue = new Status("", Message.baseValue, [Message.baseValue], false);
 
   toPb() {
     return { message: this.message.id, online: this.online };
   }
 
   static fromPb(status: StatusResponse, messages: Message[]): Status {
-    return new Status({
-      id: status.id,
-      message: messages.filter((m) => m.id == status.message)[0] || Message.baseValue,
-      messages: messages,
-      online: status.online
-    } as Status);
+    return new Status(
+      status.id,
+      messages.filter((m) => m.id == status.message)[0] || Message.baseValue,
+      messages,
+      status.online
+    );
   }
 }

src/routes/admin/message/+page.svelte

@@ -3,31 +3,23 @@
   import { Message, Status } from "$lib/types";
 
   const handleStatusChange = (message: Message) => {
-    status.update(
-      new Status({
-        ...$status,
-        online: true,
-        message
-      } as Status)
+    status.update(new Status($status.id, message, $status.messages, true));
+  };
+
+  const handleTitleChange = (event: Event, message: Message) => {
+    messages.update(
+      new Message(message.id, (event.target as HTMLInputElement).value, message.subtitle)
     );
   };
 
-  const handleMessageTextChange = (event: Event, message: Message, field: "title" | "subtitle") => {
+  const handleSubtitleChange = (event: Event, message: Message) => {
     messages.update(
-      new Message({
-        ...message,
-        [field]: (event.target as HTMLInputElement).value
-      } as Message)
+      new Message(message.id, message.title, (event.target as HTMLInputElement).value)
     );
   };
 
   const handleVisibilityChange = () => {
-    status.update(
-      new Status({
-        ...$status,
-        online: false
-      } as Status)
-    );
+    status.update(new Status($status.id, $status.message, $status.messages, false));
   };
 </script>
 
@@ -49,14 +41,14 @@
             class="input input-lg input-bordered w-full"
             value={message.title}
             placeholder="Tittel"
-            oninput={(event) => handleMessageTextChange(event, message, "title")}
+            oninput={(event) => handleTitleChange(event, message)}
           />
           <input
             type="text"
             class="input input-lg input-bordered w-full"
             value={message.subtitle}
             placeholder="Beskrivelse"
-            oninput={(event) => handleMessageTextChange(event, message, "subtitle")}
+            oninput={(event) => handleSubtitleChange(event, message)}
           />
           <button
             class="btn btn-secondary btn-lg"
@@ -81,9 +73,7 @@
         <span>Åpent!</span>
       </label>
     </li>
-    <button
-      class="btn btn-lg"
-      onclick={() => messages.create(new Message({ title: "", subtitle: "" } as Message))}
+    <button class="btn btn-lg" onclick={() => messages.create(Message.baseValue)}
       >Legg til melding</button
     >
   </ul>

src/routes/admin/orders/+layout.svelte

@@ -17,12 +17,8 @@
       class="btn relative m-4 flex h-24 w-1/2 flex-col items-center justify-center text-3xl lg:text-5xl
 "
       onclick={() =>
-        status.update(
-          new Status({
-            ...$status,
-            online: false
-          } as Status)
-        )}>Åpne</button
+        status.update(new Status($status.id, $status.message, $status.messages, false))}
+      >Åpne</button
     >
     <a
       href="/admin/message"