Blog Theme API calls

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.

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;

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,
   },
 });