chore: share data by local storage

luccas-specht · Aug 22, 2024 · f374a26 · f374a26
1 parent 998f1b5
commit f374a26
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 26 deletions.
diff --git a/src/ui/components/personaCard/script.js b/src/ui/components/personaCard/script.js
@@ -1,5 +1,13 @@
 class PersonaCard extends HTMLElement {
-  static observedAttributes = ['flag-from', 'name', 'accent', 'img-path'];
+  static observedAttributes = [
+    'name',
+    'from',
+    'accent',
+    'description',
+    'img-path',
+    'flag-from',
+    'flag-class',
+  ];
 
   constructor() {
     super();
@@ -8,6 +16,9 @@ class PersonaCard extends HTMLElement {
     this._name = 'not defined';
     this._accent = 'not defined';
     this._imgPath = 'assets/image/person-not-found.png';
+    this._flagClass;
+    this._from;
+    this._description;
   }
 
   connectedCallback() {
@@ -19,6 +30,9 @@ class PersonaCard extends HTMLElement {
 
     shadow.innerHTML = htmlStructure;
     shadow.appendChild(styleStructure);
+
+    const linkElement = shadow.querySelector('.persona-card');
+    linkElement.addEventListener('click', () => this.saveToLocalStorage());
   }
 
   attributeChangedCallback(name, _, newValue) {
@@ -27,10 +41,27 @@ class PersonaCard extends HTMLElement {
       accent: () => (this._accent = newValue),
       'img-path': () => (this._imgPath = newValue),
       'flag-from': () => (this._flagFrom = newValue),
+      from: () => (this._from = newValue),
+      'flag-class': () => (this._flagClass = newValue),
+      description: () => (this._description = newValue),
     };
     attributes[name]();
   }
 
+  saveToLocalStorage() {
+    const personaData = {
+      flagFrom: this._flagFrom,
+      name: this._name,
+      accent: this._accent,
+      imgPath: this._imgPath,
+      from: this._from,
+      flagClass: this._flagClass,
+      description: this._description,
+    };
+
+    localStorage.setItem('personaData', JSON.stringify(personaData));
+  }
+
   build() {
     const htmlStructure = `
       <a class="persona-card" href="/persona-details?name=${this._name}">

diff --git a/src/ui/pages/personaDetails/index.html b/src/ui/pages/personaDetails/index.html
@@ -12,7 +12,7 @@
     />
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>Speak Comigo</title>
+    <title>Persona details</title>
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" href="./style.css" />

diff --git a/src/ui/pages/personaDetails/script.js b/src/ui/pages/personaDetails/script.js
@@ -11,15 +11,6 @@ function getWrapperListDiv() {
   return document.querySelector('.main-layout');
 }
 
-function getNameFromURL({ urlCoded }) {
-  const params = new URLSearchParams(urlCoded.split('?')[1]);
-  return params.get('name');
-}
-
-function getPersonaByName({ name, personas }) {
-  return personas[name];
-}
-
 function renderPersonaDetailsCard({ persona, HTMLElementToAppend, url }) {
   const { imgPath, flagClass, from, name, accent, description } = persona;
 
@@ -88,22 +79,10 @@ function renderPersonaDetailsCard({ persona, HTMLElementToAppend, url }) {
   element.style.backgroundImage = `url('${imgPath}')`;
 }
 
-function getPersonasFromLocalStorage() {
-  try {
-    const personas = localStorage.getItem('personas');
-    const personasParsed = JSON.parse(personas);
-    return personasParsed;
-  } catch (e) {
-    console.log(e);
-  }
-}
-
 (async function main() {
   if (window.location) {
-    const urlCoded = window.location.href;
-    const name = getNameFromURL({ urlCoded });
-    const personas = getPersonasFromLocalStorage();
-    const persona = getPersonaByName({ name, personas });
+    const personaData = localStorage.getItem('personaData');
+    const persona = JSON.parse(personaData);
     const mainDiv = getWrapperListDiv();
 
     const url = await createPreviousURLAudio({

diff --git a/src/ui/pages/personas/script.js b/src/ui/pages/personas/script.js
@@ -3,13 +3,17 @@ function getWrapperListSection() {
 }
 
 function createPersonaTag({ persona }) {
-  const { imgPath, flagFrom, name, accent } = persona;
+  const { imgPath, flagFrom, name, accent, flagClass, from, description } =
+    persona;
 
   const personaCardTag = document.createElement('persona-card');
   personaCardTag.setAttribute('img-path', imgPath);
   personaCardTag.setAttribute('flag-from', flagFrom);
   personaCardTag.setAttribute('name', name);
   personaCardTag.setAttribute('accent', accent);
+  personaCardTag.setAttribute('flag-class', flagClass);
+  personaCardTag.setAttribute('description', description);
+  personaCardTag.setAttribute('from', from);
 
   return personaCardTag;
 }

diff --git a/webpack.config.js b/webpack.config.js
@@ -10,6 +10,7 @@ module.exports = {
     personas: './src/ui/pages/personas/index.html',
     personaDetails: './src/ui/pages/personaDetails/index.html',
     personaScript: './src/ui/pages/personaDetails/script.js',
+    chat: './src/ui/pages/chat/index.html',
   },
   module: {
     rules: [
@@ -72,6 +73,7 @@ module.exports = {
         { from: /^\/$/, to: '/welcome.html' },
         { from: /^\/personas$/, to: '/personas.html' },
         { from: /^\/persona-details$/, to: '/personaDetails.html' },
+        { from: /^\/chat$/, to: '/chat.html' },
       ],
     },
   },
@@ -89,6 +91,11 @@ module.exports = {
       filename: 'welcome.html',
       chunks: ['welcome'],
     }),
+    new HtmlWebpackPlugin({
+      template: './src/ui/pages/chat/index.html',
+      filename: 'chat.html',
+      chunks: ['chat'],
+    }),
     new HtmlWebpackPlugin({
       template: './src/ui/pages/personas/index.html',
       filename: 'personas.html',