From 1f72e2948315af29dd2c5f2973713ebfaef9d548 Mon Sep 17 00:00:00 2001 From: Iten Elhak <56697800+Iten-No-404@users.noreply.github.com> Date: Thu, 30 Dec 2021 23:43:47 +0200 Subject: [PATCH] Blog Theme API calls --- .../src/states/blogthemeslice/blogthemeAPI.js | 82 +++++++++++++++++ .../states/blogthemeslice/blogthemeSlice.js | 87 +++++++++++++++++++ tumblr-replica/src/states/store.js | 2 + 3 files changed, 171 insertions(+) create mode 100644 tumblr-replica/src/states/blogthemeslice/blogthemeAPI.js create mode 100644 tumblr-replica/src/states/blogthemeslice/blogthemeSlice.js diff --git a/tumblr-replica/src/states/blogthemeslice/blogthemeAPI.js b/tumblr-replica/src/states/blogthemeslice/blogthemeAPI.js new file mode 100644 index 00000000..91f977f5 --- /dev/null +++ b/tumblr-replica/src/states/blogthemeslice/blogthemeAPI.js @@ -0,0 +1,82 @@ +/* eslint-disable max-len */ +import Axios from 'axios'; +import { createAsyncThunk } from '@reduxjs/toolkit'; +import { api, apiR } from '../../apis/globalAxpi'; +import { apiR as apiReal, SERVICETYPE, MOCK } from '../../apis/globalAPI'; + +export const getBlogTheme = createAsyncThunk( + 'blogTheme/getTheme', + async (blogName, { getState }) => { + if (SERVICETYPE === MOCK) { + try { + const response = await api.get(`blog/${blogName}/theme`); + return response.data.response; + } catch (e) { + throw Error(e); + } + } else { + try { + const state = getState(); + const USERTOKEN = state.user.user.accessToken; + const AuthStr = `Bearer ${USERTOKEN}`; + const response1 = await apiR.get(`blog/info/${blogName}`, { headers: { Authorization: AuthStr } }); + const blogInfo = response1.data.response; + const response = await apiR.get(`blog/${blogInfo.id}/theme`, { headers: { Authorization: AuthStr } }); + return { theme: response.data, id: blogInfo.id }; + } catch (e) { + throw Error(e); + } + } + }, +); + +export const putBlogTheme = createAsyncThunk( + 'blogTheme/putTheme', + async (blogId, { getState }) => { + if (SERVICETYPE === MOCK) { + try { + const response = await api.put(`blog/${blogId}/theme`); + return response.data.response; + } catch (e) { + throw Error(e); + } + } else { + try { + const state = getState(); + const USERTOKEN = state.user.user.accessToken; + const AuthStr = `Bearer ${USERTOKEN}`; + const body = { + replies_settings: state.blogSettings.settings.replies_settings, + color_title: state.blogTheme.theme.color_title, + font_title: state.blogTheme.theme.font_title, + title: state.blogTheme.theme.title, + font_weight_title: state.blogTheme.theme.font_weight_title, + description: state.blogTheme.theme.description, + background_color: state.blogTheme.theme.background_color, + accent_color: state.blogTheme.theme.accent_color, + body_font: state.blogTheme.theme.body_font, + header_image: state.blogTheme.theme.header_image, + avatar: state.blogTheme.theme.avatar, + avatar_shape: state.blogTheme.theme.avatar_shape, + }; + + const response = await Axios({ + method: 'PUT', + url: `${apiReal}/blog/${blogId}/theme`, + headers: { + Authorization: AuthStr, + Accept: 'application/json', + 'Content-Type': 'application/json', + }, + data: body, + }); + return response.data; + } catch (e) { + throw Error(e); + } + } + }, +); + +export const zero = 0; +// nevermind this. otherwilse will have to use a default export. diff --git a/tumblr-replica/src/states/blogthemeslice/blogthemeSlice.js b/tumblr-replica/src/states/blogthemeslice/blogthemeSlice.js new file mode 100644 index 00000000..ef29b341 --- /dev/null +++ b/tumblr-replica/src/states/blogthemeslice/blogthemeSlice.js @@ -0,0 +1,87 @@ +/* eslint-disable no-else-return */ +import { createSlice } from '@reduxjs/toolkit'; +import { getBlogTheme, putBlogTheme } from './blogthemeAPI'; + +const blogTheme = createSlice({ + name: 'blogTheme', + initialState: { + theme: { }, + // "color_title": "#000000", + // "font_title": "Gibson", + // "font_weight_title": "bold", + // "description": "dec", + // "title": "dec", + // "background_color": "#FFFFFF", + // "accent_color": "#e17e66", + // "body_font": "Helvetica Neue", + // "header_image": "www.image.com", + // "avatar": "www.jjj.com", + // "avatar_shape": "circle" + blogId: '', + status: '', + }, + reducers: { + /** + * This function resets the status state + * @method + * @param {object} state The object that stores the current Status number + */ + resetStatus: (state) => { + const s = state; + s.settingsStatus = ''; + }, + /** + * This function sets whether Share Likes is on or not + * @method + * @param {object} state The object that stores the current ShareLikes value + * @param {object} action The object containing the new ShareLikes value + */ + setShareLikes: (state, action) => { + const s = state; + s.settings.share_likes = action.payload; + }, + }, + + extraReducers: { + [getBlogTheme.pending]: (state) => { + const s = state; + s.isLoading = true; + }, + [getBlogTheme.fulfilled]: (state, { payload }) => { + const s = state; + if (payload.theme.meta.status === '200') { + s.theme = payload.theme.response; + s.blogId = payload.id; + s.status = '200'; + } + s.isLoading = false; + console.log('Blog Theme:', s.theme); + }, + [getBlogTheme.rejected]: () => { + + }, + [putBlogTheme.pending]: (state) => { + const s = state; + s.isLoading = true; + }, + [putBlogTheme.fulfilled]: (state, { payload }) => { + const s = state; + if (payload.meta.status === '200') { + s.theme = payload.response; + } + s.isLoading = false; + }, + [putBlogTheme.rejected]: () => { + + }, + }, +}); + +export const selectBlogTheme = (state) => state.blogTheme.theme; +export const selectStatus = (state) => state.blogTheme.status; +export const selectBlogId = (state) => state.blogTheme.blogId; +export { getBlogTheme, putBlogTheme }; +export const { + resetStatus, setShareLikes, +} = blogTheme.actions; +export default blogTheme.reducer; diff --git a/tumblr-replica/src/states/store.js b/tumblr-replica/src/states/store.js index c0d0d3f0..6c9d2a9e 100644 --- a/tumblr-replica/src/states/store.js +++ b/tumblr-replica/src/states/store.js @@ -63,6 +63,7 @@ import themeReducer from './theme/themeSlice'; import notificationsReducer from './notifications/notificationSlice'; import searchStuffReducder from './search/searchSlice'; import searchAutocompleteReducer from './search/autocompleteSlice'; +import blogThemeReducer from './blogthemeslice/blogthemeSlice'; const store = configureStore({ reducer: { @@ -128,6 +129,7 @@ const store = configureStore({ searchStuff: searchStuffReducder, searchAutocomplete: searchAutocompleteReducer, blogSettings: blogSettingsReducer, + blogTheme: blogThemeReducer, }, });