Clears fields better

src/PersonView.ts

@@ -1,3 +1,4 @@
+import { Timestamp } from 'firebase/firestore';
 import { LitElement, html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { IPerson } from './models/people.js';
@@ -9,10 +10,25 @@ export class PersonView extends LitElement {
 
     @property({type: Object}) person! :  IPerson;
 
-
     static styles = css``;
 
     render() {
-        return html`<li>${this.personId} - ${this.person.name}</li>`;
+        return html`
+        <li>
+        ${this.formatTime(this.person.updatedAt)} - ${this.person.name}
+            <div>
+                <ul>
+                    ${this.person.entries.map((entry) =>
+                        html`<li>${this.formatTime(entry.updatedAt)} - ${entry.content}</li>`
+                    )}
+                </ul>
+            </div>
+        </li>
+        `;
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    formatTime(zeTime? : Timestamp | null) {
+        return zeTime ? zeTime.toDate().toLocaleDateString() : "unknown";
     }
 }

src/PersonsView.ts

@@ -0,0 +1,26 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from 'lit/decorators.js';
+
+import { IPerson } from "./models/people.js";
+
+import "./PersonView.js";
+
+@customElement("persons-view")
+export class PersonsView extends LitElement{
+
+    @property({type: String}) search : string = "";
+    
+    @property({type: Array}) persons : Array<[string, IPerson]> = [];
+
+    static styles = css``;
+
+    render(){
+        return html`
+        <ul>
+            ${this.persons.filter( p => p[1].name.includes(this.search) ).map((person) =>
+                html`<person-view personId="${person[0]}" .person="${person[1]}"></person-view>`
+            )}
+        </ul>
+        `;
+    }
+}

src/WebBrain.ts

@@ -15,12 +15,12 @@ import {
   onAuthStateChanged
 } from 'firebase/auth';
 
-import { getFirestore, collection, Firestore, onSnapshot, addDoc, CollectionReference } from "firebase/firestore"; 
+import { getFirestore, collection, Firestore, onSnapshot, addDoc, CollectionReference, Timestamp } from "firebase/firestore"; 
 
 
 import { FIREBASE_CONFIG } from './constants.js';
 import { IEntry, IPerson } from './models/people.js';
-import "./PersonView.js"
+import "./PersonsView.js"
 
 @customElement('web-brain')
 export class WebBrain extends LitElement {
@@ -52,7 +52,6 @@ export class WebBrain extends LitElement {
     this.auth = getAuth();
     
     onAuthStateChanged(this.auth, (user) => {
-      console.log(`onAuthStateChanged ${user}`);
       if (user) { 
         this.user = user;
         this.peopleCollection = collection(this.firestore, `/users/${this.user.uid}/people`);
@@ -72,7 +71,6 @@ export class WebBrain extends LitElement {
   static styles = css``;
 
   async logIn() {
-    console.log('Logging in');
     try {
       await setPersistence(this.auth,browserLocalPersistence);
       const result = await signInWithPopup(this.auth, this.provider);
@@ -84,19 +82,18 @@ export class WebBrain extends LitElement {
   }
 
   async logout() {
-    console.log('Logging out');
     try {
       await signOut(this.auth);
       console.log('logged out');
       this.user = null;
+      this.persons = [];
+      this.search = "";
     } catch (error) {
       console.log('Error while logging out', error);
     }
   }
 
   async savePerson() {
-    console.log(`saving ${JSON.stringify(this.newPerson)}`);
-
     if(this.peopleCollection){
       try {
         const docRef = await addDoc(this.peopleCollection, this.newPerson);
@@ -145,9 +142,10 @@ export class WebBrain extends LitElement {
         Adding a new person
         <input
           type="text"
+          .value = "${this.newPerson ? this.newPerson.name : ''}"
           @input="${(e: any) => {
-            const entry : IEntry = { content : "Met at the 6th floor at SC"};
+            // const entry : IEntry = { content : "Met at the 6th floor at SC", createdAt : new Date(), updatedAt : new Date() };
-            const p : IPerson = { name: e.target.value, entries: [entry] }
+            const p : IPerson = { name: e.target.value, entries: [], createdAt : Timestamp.fromDate(new Date()), updatedAt : Timestamp.fromDate(new Date())};
             this.newPerson = p;
           }}"
         />
@@ -159,14 +157,7 @@ export class WebBrain extends LitElement {
       <!-- Content -->
       <main>
         <h2>The content will come here</h2>
-
+        <persons-view .persons="${this.persons}" .search="${this.search}"></persons-view>
-        <ul>
-        ${this.persons.filter( p => p[1].name.includes(this.search) ).map((person) =>
-          // html`<li>${person[0]} - ${person[1].name}</li>`
-          html`<person-view personId="${person[0]}" .person="${person[1]}"></person-view>`
-        )}
-        </ul>
-
       </main>
 
       <footer>Web brain, because you forget everything</footer>

src/models/people.ts

@@ -1,12 +1,14 @@
+import { Timestamp } from "firebase/firestore";
+
 export interface IEntry {
     content: string,
-    createdAt?: Date | null,
+    createdAt?: Timestamp | null,
-    updatedAt?: Date | null,    
+    updatedAt?: Timestamp | null,    
 }
 
 export interface IPerson {
     name: string,
-    createdAt?: Date | null,
+    createdAt?: Timestamp | null,
-    updatedAt?: Date | null,
+    updatedAt?: Timestamp | null,
     entries: Array<IEntry>,
   }