From cf3589f1270bafbc9ae00a57fcacdb0ccfcf18e0 Mon Sep 17 00:00:00 2001
From: Enessetere <muszalski.sebastian@gmail.com>
Date: Thu, 14 Jan 2021 14:31:15 +0100
Subject: [PATCH 1/2] refactor: change generation of Logo element to
 elementFactory

---
 src/app/components/Logo.js | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/src/app/components/Logo.js b/src/app/components/Logo.js
index dfdaa50..9841785 100644
--- a/src/app/components/Logo.js
+++ b/src/app/components/Logo.js
@@ -1,15 +1,8 @@
-function Logo() {
-  // Creating elements
-  const elementA = document.createElement('a');
-  const elementDiv = document.createElement('div');
-
-  // Setting atribute and class
-  elementA.setAttribute('href', './');
-  elementDiv.classList.add('starwars__logo');
+import elementFactory from '../utils/elementFactory';
 
-  // Adding to html structure
-  elementA.appendChild(elementDiv);
-  document.querySelector('#swquiz-app').appendChild(elementA);
+function Logo() {
+  // Creating element
+  return elementFactory('div', { className: 'starwars__logo' });
 }
 
 export default Logo;

From 7f786aef26f31ebdf59f53a4e29c31f215dc36a0 Mon Sep 17 00:00:00 2001
From: Enessetere <muszalski.sebastian@gmail.com>
Date: Fri, 15 Jan 2021 13:30:51 +0100
Subject: [PATCH 2/2] rafector: change creation of node to elementFactory and
 implement function to change image content

---
 src/app/components/VisualImage.js | 32 +++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/app/components/VisualImage.js b/src/app/components/VisualImage.js
index b2e5894..6ccb8d4 100644
--- a/src/app/components/VisualImage.js
+++ b/src/app/components/VisualImage.js
@@ -1,26 +1,26 @@
-function VisualImage(imageSource) {
+import elementFactory from '../utils/elementFactory';
+
+const imageNode = {};
+
+export const updateImage = (imageSource) => {
   // Checking that img source is in base64 format
   // FIXME: If we should use only base64/jpg, delete one condition in if
   const reg = /^data:image\/(?:gif|png|jpeg|bmp|webp)(?:;charset=utf-8)?;base64,(?:[A-Za-z0-9]|[+/])+={0,2}/;
   if (reg.test(imageSource) || /.jpg/.test(imageSource)) {
-    // Creating div and img
-    const createDiv = document.createElement('div');
-    createDiv.className = 'visual-box';
-
-    const createImg = document.createElement('img');
-    createImg.classList.add('visual-box__image');
-    createImg.setAttribute('alt', 'image');
-
-    // Placing div with img inside container with id = "swquiz-app"
-    document.querySelector('#swquiz-app').appendChild(createDiv);
-    document.querySelector('.visual-box').appendChild(createImg);
-
-    // Adding sourse to img
-    const img = document.querySelector('.visual-box__image');
-    img.setAttribute('src', imageSource);
+    imageNode.ref.setAttribute('src', imageSource);
   } else {
     throw new Error('Ups, format of input string is incorrect');
   }
+};
+
+function VisualImage(imageSource) {
+  const image = elementFactory('img', {
+    className: 'visual-box__image',
+    alt: 'image',
+  });
+  imageNode.ref = image;
+  updateImage(imageSource);
+  return elementFactory('div', { className: 'visual-box' }, image);
 }
 
 export default VisualImage;