Bladeren bron

graphQl and Redax

serg155alternate 2 jaren geleden
bovenliggende
commit
50443ddca4

+ 16 - 0
Class works/redax-thunk/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+
+</head>
+<body>
+    
+    <div id="root">
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>

+ 101 - 0
Class works/redax-thunk/script.js

@@ -0,0 +1,101 @@
+function promiseReducer(state={}, {type, name, status, payload, error}){
+    if (type === 'PROMISE'){
+        return {
+           ...state, [name]: {status, payload, error}
+        }
+    }
+    return state
+}
+
+
+const actionPending             = name => ({type:'PROMISE',name, status: 'PENDING'})
+const actionFulfilled = (name,payload) => ({type:'PROMISE',name, status: 'FULFILLED', payload})
+const actionRejected  = (name,error)   => ({type:'PROMISE',name, status: 'REJECTED', error})
+
+const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
+
+function createStore(reducer){
+    let state       = reducer(undefined, {}) //стартовая инициализация состояния, запуск редьюсера со state === undefined
+    let cbs         = []                     //массив подписчиков
+    
+    const getState  = () => state            //функция, возвращающая переменную из замыкания
+    const subscribe = cb => (cbs.push(cb),   //запоминаем подписчиков в массиве
+                             () => cbs = cbs.filter(c => c !== cb)) //возвращаем функцию unsubscribe, которая удаляет подписчика из списка
+                             
+    const dispatch  = action => { 
+        if (typeof action === 'function'){ //если action - не объект, а функция
+            return action(dispatch, getState) //запускаем эту функцию и даем ей dispatch и getState для работы
+        }
+        const newState = reducer(state, action) //пробуем запустить редьюсер
+        if (newState !== state){ //проверяем, смог ли редьюсер обработать action
+            state = newState //если смог, то обновляем state 
+            for (let cb of cbs)  cb() //и запускаем подписчиков
+        }
+    }
+    
+    return {
+        getState, //добавление функции getState в результирующий объект
+        dispatch,
+        subscribe //добавление subscribe в объект
+    }
+}
+let store = createStore(promiseReducer);
+
+store.subscribe(() => console.log(store.getState()))
+
+
+// store.dispatch(actionPending('delay1000'))
+//  delay(1000).then(result => store.dispatch(actionFulfilled('delay1000', result)))
+// store.dispatch(actionPending('delay2000'))
+//  delay(2000).then(result => store.dispatch(actionFulfilled('delay2000', result)))
+
+
+const actionPromise = (name, promise) =>
+    async dispatch => {
+        dispatch(actionPending(name))
+        try {
+            let payload = await promise
+            dispatch(actionFulfilled(name, payload))
+            return payload
+        }
+        catch(error){
+            dispatch(actionRejected(name, error))
+        }
+    }
+
+store.dispatch(actionPromise('delay1000', delay(1000)))
+store.dispatch(actionPromise('delay2000', delay(2000)))
+
+const actionLuke = () => actionPromise('luke', 
+                                        fetch('https://swapi.dev/api/people/1')
+                                                .then(res => res.json()))
+store.dispatch(actionLuke())
+
+
+
+
+// const actionRegister = (login, password) =>
+//     actionPromise('register', gql(`mutation ......
+//             ......
+//         ....`, {login, password}))
+// store.dispatch(actionRegister('anon100500', '123123'))
+
+// const actionCategoryById = _id => 
+//     actionPromise('catById', gql(`aaaaaaaa $query.....`, {query: JSON.stringify([{_id}])}))
+// store.dispatch(actionCategoryById('АЙДИКАТЕГОРИИ НАТЫРИТЬ В GRAPHQL'))
+
+// const actionGoodById = _id => 
+//     actionPromise('goodById', gql(`aaaaaaaa $query.....`, {query: JSON.stringify([{_id}])}))
+
+// const actionRootCategories = () => 
+//     actionPromise('rootCats', gql(`CategoryFind так, что бы parent: null`)}))
+
+// //сделать const actionOrders для истории заказов (нужен токен в localStorage)
+
+// //шобы сработало, надо добавить в createStore в dispatch один if:
+// //if (typeof action === 'function'){ //если action - не объект, а функция
+//         //return action(dispatch, getState) //запускаем эту функцию и даем ей dispatch и getState для работы
+//     //}
+// //надо const newState
+
+

+ 9 - 10
HW16 REST and GraphQL/script.js

@@ -3,15 +3,13 @@ const getGQL = url =>
         method: 'POST',
         headers: {
             "Content-Type": "application/json",
-            ...( localStorage.authToken ? {"Authorization": "Bearer " + localStorage.authToken} : null)
+            ...(localStorage.authToken ? {"Authorization": "Bearer " + localStorage.authToken} : {})
         },
         body: JSON.stringify({query, variables})
     }).then(res => res.json()).then(data => {
-        console.log(data)
         if (data){
              return Object.values(data.data) 
         } else throw new Error('No data found')
-       
     }).catch(e => console.log(e));
 
 
@@ -43,7 +41,7 @@ const caterory = `query categ{CategoryFind(query: "[{}]"){name image {url}}}`;
  await gql(caterory).then(res => res[0].map(item => console.log(item))))();
 
 
-
+// добавить в getGQL все что надо, и еще проверку на localStorage.authToken. если токен есть, добавлять header Authorization.
 
 //  let newUser =  {
 //             "login": "Serg",
@@ -96,12 +94,13 @@ console.log(localStorage)
 //     params.headers.Authorization = "Bearer " + localStorage.authToken
 //     return originalFetch(url, params)
 // };
-console.log({
-    method: 'POST',
-    headers: { 
-        "Content-Type": "application/json",
-        ...(localStorage.authToken ? {"Authorization": "Bearer " + localStorage.authToken} : null)
-    }})
+
+// console.log({
+//     method: 'POST',
+//     headers: { 
+//         "Content-Type": "application/json",
+//         ...(localStorage.authToken ? {"Authorization": "Bearer " + localStorage.authToken} : {})
+//     }})
 
 
 

+ 107 - 1
HW17 try-catch, redux-thunk/script.js

@@ -1 +1,107 @@
-//Closures and scopes
+// function promiseReducer(state={}, {type, name, status, payload, error}){
+//     if (type === 'PROMISE'){
+//         return {
+//            ...state, [name]: {status, payload, error}
+//         }
+//     }
+//     return state
+// }
+
+// const actionPending             = name => ({type:'PROMISE',name, status: 'PENDING'})
+// const actionFulfilled = (name,payload) => ({type:'PROMISE',name, status: 'FULFILLED', payload})
+// const actionRejected  = (name,error)   => ({type:'PROMISE',name, status: 'REJECTED', error})
+
+// const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
+
+
+
+// function createStore(reducer){
+//     let state       = reducer(undefined, {}) //стартовая инициализация состояния, запуск редьюсера со state === undefined
+//     let cbs         = []                     //массив подписчиков
+    
+//     const getState  = () => state            //функция, возвращающая переменную из замыкания
+//     const subscribe = cb => (cbs.push(cb),   //запоминаем подписчиков в массиве
+//                              () => cbs = cbs.filter(c => c !== cb)) //возвращаем функцию unsubscribe, которая удаляет подписчика из списка
+                             
+//     const dispatch  = action => { 
+//         if (typeof action === 'function'){ //если action - не объект, а функция
+//             return action(dispatch, getState) //запускаем эту функцию и даем ей dispatch и getState для работы
+//         }
+//         const newState = reducer(state, action) //пробуем запустить редьюсер
+//         if (newState !== state){ //проверяем, смог ли редьюсер обработать action
+//             state = newState //если смог, то обновляем state 
+//             for (let cb of cbs)  cb() //и запускаем подписчиков
+//         }
+//     }
+    
+//     return {
+//         getState, //добавление функции getState в результирующий объект
+//         dispatch,
+//         subscribe //добавление subscribe в объект
+//     }
+// }
+// let store = createStore(promiseReducer);
+
+// store.subscribe(() => console.log(store.getState()))
+
+
+// // store.dispatch(actionPending('delay1000'))
+// //  delay(1000).then(result => store.dispatch(actionFulfilled('delay1000', result)))
+// // store.dispatch(actionPending('delay2000'))
+// //  delay(2000).then(result => store.dispatch(actionFulfilled('delay2000', result)))
+
+
+// const actionPromise = (name, promise) =>
+//     async dispatch => {
+//         dispatch(actionPending(name))
+//         try {
+//             let payload = await promise
+//             dispatch(actionFulfilled(name, payload))
+//             return payload
+//         }
+//         catch(error){
+//             dispatch(actionRejected(name, error))
+//         }
+//     }
+
+// store.dispatch(actionPromise('delay1000', delay(1000)))
+// store.dispatch(actionPromise('delay2000', delay(2000)))
+
+// const actionLuke = () => actionPromise('luke', 
+//                                         fetch('https://swapi.dev/api/people/1')
+//                                                 .then(res => res.json()))
+// store.dispatch(actionLuke())
+
+
+// // const actionRegister = (login, password) =>
+// //     actionPromise('register', gql(`mutation ......
+// //             ......
+// //         ....`, {login, password}))
+// // store.dispatch(actionRegister('anon100500', '123123'))
+
+// // const actionCategoryById = _id => 
+// //     actionPromise('catById', gql(`aaaaaaaa $query.....`, {query: JSON.stringify([{_id}])}))
+// // store.dispatch(actionCategoryById('АЙДИКАТЕГОРИИ НАТЫРИТЬ В GRAPHQL'))
+
+// // const actionGoodById = _id => 
+// //     actionPromise('goodById', gql(`aaaaaaaa $query.....`, {query: JSON.stringify([{_id}])}))
+
+// // const actionRootCategories = () => 
+// //     actionPromise('rootCats', gql(`CategoryFind так, что бы parent: null`)}))
+
+// // //сделать const actionOrders для истории заказов (нужен токен в localStorage)
+
+// // //шобы сработало, надо добавить в createStore в dispatch один if:
+// // //if (typeof action === 'function'){ //если action - не объект, а функция
+// //         //return action(dispatch, getState) //запускаем эту функцию и даем ей dispatch и getState для работы
+// //     //}
+// // //надо const newState
+
+
+
+
+
+
+
+
+