Modul continued

js/lesson21_Module/Gql_promis.html

@@ -6,19 +6,8 @@
     </header>
     <div id='mainContainer'>
         <aside id='aside'>
-            Категории
-            Сюда надо воткнуть список корневых категорий интернет-магазина
-            <a href="#/people/1">Luke</a>
-            <a href="#/people/2">C-3PO</a>
-            <a href="#/people/3">R2-D2</a>
-            <a href="#/people/4">Dart Vader</a>
-
-            <a href="#/films/4">new hope</a>
-            <a href="#/films/5">пятая часть</a>
-            <a href="#/films/3">шестая часть</a>
         </aside>
         <main id='main'>
-            Контент
         </main>
     </div>
 
@@ -247,10 +236,10 @@
         const gqlCategoryFindOne = (id) => {
             const catQuery = `query CategoryFindOne($q: String) {
                     CategoryFindOne(query: $q) {
-                            _id name
-                            parent { _id name }
-                            subCategories { _id name }
-                            goods { _id name price description
+                        _id name
+                        parent { _id name }
+                        subCategories { _id name }
+                        goods { _id name price description 
                             images { url }
                         }
                     }
@@ -273,7 +262,7 @@
             return gql(catQuery, { q: `[{\"_id\": \"${id}\"}]` });
         }
         const actionGoodFindOne = (id) =>
-            actionPromise('goodsFindOne', gqlGoodFindOne(id));
+            actionPromise('goodFindOne', gqlGoodFindOne(id));
         //////////////////////////////////
         const actionLogin = (login, password) => {
             const upsertQuery = `query login($login:String, $password:String){
@@ -369,76 +358,117 @@
             action();
             ok(ms);
         }, ms));
-        store.subscribe(() => {
+        /*store.subscribe(() => {
             console.log({ state: store.getState() });
-        });
+        });*/
         //////////////////////////////////////////////
-        store.subscribe(() => {
-            console.log(store.getState());
-        });
 
-        const fillRootCategories = (categories) => {
-            aside.innerText = '';
+        const fillRootCategories = (categories, htmlEl) => {
+            htmlEl.innerText = '';
             if (!categories)
                 return;
             for (category of categories) {
                 let el = document.createElement('a');
                 el.innerText = `${category.name}`;
-                el.href = `"#/category/${category._id}`;
-                aside.appendChild(el);
+                el.href = `#/categories/${category._id}`;
+                htmlEl.appendChild(el);
             }
         }
+        store.subscribe(() =>
+            subscribePromiseItem("rootCats", aside, [], fillRootCategories));
 
-        store.subscribe(() => {
-            let state = store.getState();
-            let rootCatsPromisRes = state.promiseReducer?.rootCats;
-            if (rootCatsPromisRes?.status == "FULFILLED") {
-                let rootCats = rootCatsPromisRes.payload;
-                fillRootCategories(rootCats);
+        const fillCurrentCategoryContent = (category, htmlEl) => {
+            htmlEl.innerHTML = '';
+            const { name, parent, subCategories, goods } = category;
+            htmlEl.innerHTML = `<h1>Category: ${name}</h1>
+                                <section>Parent: <a href="#/subCategories/${parent?._id}">${parent?.name ?? 'Empty'}</a></section>
+                             `
+            htmlEl.innerHTML += `<section>Sub Categories:</section><br>`
+            for (const subCategory of subCategories) {
+                htmlEl.innerHTML += `<a href="#/subCategories/${subCategory._id}">${subCategory.name}</a><br>`
             }
-            else
-                fillRootCategories(undefined);
-        });
-        /*
-                window.onhashchange = () => {
-                    const [, route, _id] = location.hash.split('/')
-        
-                    const routes = {
-                        people() {
-                            console.log('People', _id)
-                            store.dispatch(actionGetPeople(_id))
-                        },
-                        films() {
-                            store.dispatch(actionGetFilm(_id))
-                        },
-                        //category() {
-                        //store.dispatch(actionCategoryById(_id))
-                        //},
-                        //good(){
-                        ////тут был store.dispatch goodById
-                        //console.log('good', _id)
-                        //},
-                        login() {
-                            console.log('А ТУТ ЩА ДОЛЖНА БЫТЬ ФОРМА ЛОГИНА')
-                            //нарисовать форму логина, которая по нажатию кнопки Login делает store.dispatch(actionFullLogin(login, password))
-                        },
-                        //register(){
-                        ////нарисовать форму регистрации, которая по нажатию кнопки Login делает store.dispatch(actionFullRegister(login, password))
-                        //},
-                    }
-        
-                    if (route in routes) {
-                        routes[route]()
-                    }
-                }
-        
-                window.onhashchange()
-        */
+            htmlEl.innerHTML += `<section>Sub Categories:</section><br>`
+            for (const good of goods) {
+                htmlEl.innerHTML += `<a href="#/goods/${good._id}">${good.name}</a><br>`//вставить css display block
+            }
+        }
+        store.subscribe(() =>
+            subscribePromiseItem(
+                "catFindOne", main, ["categories", "subCategories"], fillCurrentCategoryContent));
+
+        const fillCurrentGoodContent = (good, htmlEl) => {
+            htmlEl.innerHTML = '';
+            const { name, _id, price, description, images } = good;
+            htmlEl.innerHTML = `<h1>Good: ${name}</h1>
+                                <section>Description: ${description}</section>
+                                <section>Price: ${price}</section>
+                             `
+            htmlEl.innerHTML += `<section>Images:</section><br>`  //вставить css display block
+            for (const image of images) {
+                htmlEl.innerHTML += `<img src="http://shop-roles.node.ed.asmer.org.ua/${image.url}"</img><br>`//вставить css display block
+            }
+        }
+        store.subscribe(() =>
+            subscribePromiseItem(
+                "goodFindOne", main, ["goods"], fillCurrentGoodContent));
+
+        const subscribePromiseItem = (promiseName, htmlEl, subscrNames, execFunc) => {
+            const [, route, _id] = location.hash.split('/');
+            if ((subscrNames.length > 0 && (!route || !subscrNames.some(v => v == route)))/* || !_id*/)
+                return;
+            const { status, payload, error } = store.getState().promiseReducer[promiseName];
+            if (status === 'PENDING') {
+                htmlEl.innerHTML = `<img src='https://cdn.dribbble.com/users/63485/screenshots/1309731/infinite-gif-preloader.gif' />`
+            }
+            if (status == "FULFILLED") {
+                execFunc(payload, htmlEl);
+            }
+        }
 
+        window.onhashchange = () => {
+            const [, route, _id] = location.hash.split('/')
 
+            const routes = {
+                categories() {
+                    console.log('Category', _id)
+                    store.dispatch(actionCategoryFindOne(_id))
+                },
+                subCategories() {
+                    console.log('subCategory', _id)
+                    store.dispatch(actionCategoryFindOne(_id))
+                },
+                goods() {
+                    console.log('good', _id)
+                    store.dispatch(actionGoodFindOne(_id))
+                },
+                //category() {
+                //store.dispatch(actionCategoryById(_id))
+                //},
+                //good(){
+                ////тут был store.dispatch goodById
+                //console.log('good', _id)
+                //},
+                login() {
+                    console.log('А ТУТ ЩА ДОЛЖНА БЫТЬ ФОРМА ЛОГИНА')
+                    //нарисовать форму логина, которая по нажатию кнопки Login делает store.dispatch(actionFullLogin(login, password))
+                },
+                //register(){
+                ////нарисовать форму регистрации, которая по нажатию кнопки Login делает store.dispatch(actionFullRegister(login, password))
+                //},
+            }
 
+            if (route in routes) {
+                routes[route]()
+            }
+        }
+
+        window.onhashchange()
 
         store.dispatch(actionRootCats());
+
+
+
+
         /*store.dispatch(actionCategoryFindOne("6262ca7dbf8b206433f5b3d1"));
         store.dispatch(actionGoodFindOne("62d3099ab74e1f5f2ec1a125"));
         store.dispatch(actionFullLogin("Berg", "123456789"));