Nuxt.js: Podpinanie komponentów pod dane z serwera

Zmiany wprowadzone w lekcji · 10 min

diff --git a/19/minipedia/components/ContentSection.vue b/19/minipedia/components/ContentSection.vue
index 2c93545..2566ab3 100644
--- a/19/minipedia/components/ContentSection.vue
+++ b/19/minipedia/components/ContentSection.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <h2 :id="headingId">{{ $props.title }}</h2>
-    <p v-for="paragraph in content">
+    <p v-for="paragraph in contentAsAnArray">
      {{ paragraph }}
     </p>
   </div>
@@ -15,11 +15,14 @@ export default {
     required: true,
    },
    content: {
-    type: Array,
+    type: String,
     required: true,
    }
  },
  computed: {
+  contentAsAnArray() {
+   return this.$props.content.split('\n\n');
+  },
   headingId() {
    return this.$props.title.replace(' ', '-').toLowerCase();
   }
diff --git a/19/minipedia/components/FullInfoBox.vue b/19/minipedia/components/FullInfoBox.vue
index d8f98f8..76b7e08 100644
--- a/19/minipedia/components/FullInfoBox.vue
+++ b/19/minipedia/components/FullInfoBox.vue
@@ -36,12 +36,19 @@
      textDetails() {
       return this.details.filter(detail => {
         const detailValue = detail[1];
+        if (typeof detailValue !== 'string') {
+         return false;
+        }
         return !detailValue.includes('.PNG')
       });
      },
      mainImage() {
       const firstImageBasedOnValue = this.details.filter(detail => {
        const detailValue = detail[1];
+       
+       if (typeof detailValue !== 'string') {
+         return false;
+        }
         return detailValue.includes('.PNG')
       })[0];
       
diff --git a/19/minipedia/pages/index.vue b/19/minipedia/pages/index.vue
index 309612d..8054a79 100644
--- a/19/minipedia/pages/index.vue
+++ b/19/minipedia/pages/index.vue
@@ -1,18 +1,12 @@
 <template>
   <article class="content">
-     {{ $store.state.fullInfo }}
-     {{ $store.state.content }}
-     {{ $store.state.summary }}
-     {{ $store.state.rawImages }}
-     {{ $store.state.mainImage }}
     <h1>
       Janusz Korczak
     </h1>
 
-    <span v-tooltip="'Please support the original source of the data'" class="notice">From Wikipedia, the free encyclopedia</span>
+    <span class="notice">From Wikipedia, the free encyclopedia</span>
     
-    
-    <FullInfoBox :content="fullInfo" />
+    <FullInfoBox :content="$store.state.fullInfo.general" />
     
     <p>Janusz Korczak, the pen name of Henryk Goldszmit (22 July 1878 or 1879 – 7 August 1942), was a
       Polish Jewish educator, children's author and pedagogue known as Pan Doktor ("Mr. Doctor") or Stary
@@ -21,10 +15,10 @@
       was sent from the Ghetto to the Treblinka extermination camp by the Nazis, during the Grossaktion
       Warschau of 1942.</p>
 
-    <TableOfContents :content="content" />
+    <TableOfContents :content="$store.state.content" />
     
     <ContentSection 
-     v-for="section in content" 
+     v-for="section in $store.state.content" 
      :title="section.title"
      :content="section.content"
      :key="section.title"
@@ -180,92 +174,10 @@
 </template>
 
 <script>
- import { mapMutations } from 'vuex';
-
   export default {
     layout: 'default',
     middleware: ['wiki-routing'],
-    computed: {
-      fullInfo() {
-        return {
-          "Profile photo": "https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/Janusz_Korczak.PNG/220px-Janusz_Korczak.PNG",
-          "Born ": "Henryk Goldszmit 22 July 1878",
-          "Died": `c. 7 August 1942 (aged 64)
-        Treblinka extermination camp, German-occupied Poland`,
-        "Occupation": [`Children's author`, `humanitarian`, `pediatrician`, `child pedagogue and defender of children's rights`]
-        };
-      },
-      content() {
-        return [{
-          title: 'Biography',
-          content: [
-            `Korczak was born in Warsaw in 1878. He was unsure of his birth date, which he attributed to his
-    father's
-    failure to promptly acquire a birth certificate for him. His parents were Józef Goldszmit, a
-    respected lawyer from a family of proponents of the haskalah, and Cecylia née Gębicka, daughter
-    of a
-    prominent Kalisz family. Born to a Jewish family, he was an agnostic in his later life who did
-    not
-    believe in forcing religion on children. His father fell ill around 1890 and was admitted
-    to a
-    mental hospital, where he died six years later on 25 April 1896. Spacious apartments were
-    given
-    up on Miodowa street, then Świętojerska. As his family's financial situation worsened, Henryk,
-    while
-    still attending the gymnasium (the current 8th Lycée in Warsaw began to work as a tutor for
-    other
-    pupils. In 1896 he debuted on the literary scene with a satirical text on raising children,
-    Węzeł
-    gordyjski (The Gordian Knot).`,
-            `In 1898, he used Janusz Korczak as a pen name in the Ignacy Jan Paderewski Literary Contest. The
-    name
-    originated from the book Janasz Korczak and the Pretty Swordsweeperlady (O Janaszu Korczaku i
-    pięknej
-    Miecznikównie) by Józef Ignacy Kraszewski. In the 1890s he studied in the Flying University.
-    During
-    the years 1898–1904 Korczak studied medicine at the University of Warsaw and also wrote for
-    several
-    Polish language newspapers. After graduation, he became a pediatrician. In 1905−1912 Korczak worked
-    at
-    Bersohns and Baumans Children's Hospital in Warsaw. During the Russo-Japanese War, in 1905–06 he
-    served
-    as a military doctor. Meanwhile, his book Child of the Drawing Room (Dziecko salonu) gained him some
-    literary recognition.`,
-            `Korczak's orphanage is still in operation at 6 Jaktorowska Street
-    In 1907–08, Korczak went to study in Berlin. While working for the Orphans' Society in 1909, he met
-    Stefania Wilczyńska, his future closest associate. In 1911–1912, he became a director of Dom Sierot
-    in
-    Warsaw, an orphanage of his own design for Jewish children. He hired Wilczyńska as his
-    assistant.
-    There he formed a kind-of-a-republic for children with its own small parliament, court, and a
-    newspaper.
-    He reduced his other duties as a doctor. Some of his descriptions of the summer camp for Jewish
-    children
-    in this period and subsequently, were later published in his Fragmenty Utworów and have been
-    translated
-    into English.`,
-            `During World War I, in 1914 Korczak became a military doctor with the rank of lieutenant. He served
-    again as a military doctor in the Polish Army with the rank of major during the Polish-Soviet War,
-    but
-    after a brief stint in Łódź was assigned to Warsaw. After the wars, he continued his practice in
-    Warsaw.`
-          ]
-        },
-        {
-          title: 'Childhood',
-          content: ['Hello world']
-         
-        },
-        {
-          title: 'Writings',
-          content: ['Hello world2']
-         
-        }
-        ]
-      }
-    }
   }
-
 </script>
 
 <style>