0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-04 02:01:58 -05:00

Added site api data to settings context in admin-x

refs https://github.com/TryGhost/Team/issues/3318

- pulls in site data via API in settings provider
- adds site data to be accessible via settings context
This commit is contained in:
Rishabh 2023-06-01 15:55:53 +05:30
parent 17e9b803e4
commit 75b4b1fdff
4 changed files with 29 additions and 18 deletions

View file

@ -1,11 +1,12 @@
import React, {createContext, useCallback, useContext, useEffect, useState} from 'react'; import React, {createContext, useCallback, useContext, useEffect, useState} from 'react';
import {ServicesContext} from './ServiceProvider'; import {ServicesContext} from './ServiceProvider';
import {Setting} from '../../types/api'; import {Setting, SiteData} from '../../types/api';
// Define the Settings Context // Define the Settings Context
interface SettingsContextProps { interface SettingsContextProps {
settings: Setting[] | null; settings: Setting[] | null;
saveSettings: (updatedSettings: Setting[]) => Promise<void>; saveSettings: (updatedSettings: Setting[]) => Promise<void>;
siteData: SiteData | null;
} }
interface SettingsProviderProps { interface SettingsProviderProps {
@ -14,20 +15,24 @@ interface SettingsProviderProps {
const SettingsContext = createContext<SettingsContextProps>({ const SettingsContext = createContext<SettingsContextProps>({
settings: null, settings: null,
saveSettings: async () => {} siteData: null,
saveSettings: async () => {},
}); });
// Create a Settings Provider component // Create a Settings Provider component
const SettingsProvider: React.FC<SettingsProviderProps> = ({children}) => { const SettingsProvider: React.FC<SettingsProviderProps> = ({children}) => {
const {api} = useContext(ServicesContext); const {api} = useContext(ServicesContext);
const [settings, setSettings] = useState <Setting[] | null> (null); const [settings, setSettings] = useState <Setting[] | null> (null);
const [siteData, setSiteData] = useState <SiteData | null> (null);
useEffect(() => { useEffect(() => {
const fetchSettings = async (): Promise<void> => { const fetchSettings = async (): Promise<void> => {
try { try {
// Make an API call to fetch the settings // Make an API call to fetch the settings
const data = await api.settings.browse(); const data = await api.settings.browse();
const siteDataRes = await api.site.browse();
setSettings(data.settings); setSettings(data.settings);
setSiteData(siteDataRes.site);
} catch (error) { } catch (error) {
// Log error in settings API // Log error in settings API
} }
@ -50,7 +55,9 @@ const SettingsProvider: React.FC<SettingsProviderProps> = ({children}) => {
// Provide the settings and the saveSettings function to the children components // Provide the settings and the saveSettings function to the children components
return ( return (
<SettingsContext.Provider value={{settings, saveSettings}}> <SettingsContext.Provider value={{
settings, saveSettings, siteData
}}>
{children} {children}
</SettingsContext.Provider> </SettingsContext.Provider>
); );

View file

@ -1,6 +1,6 @@
import React, {useEffect} from 'react'; import React, {useEffect} from 'react';
import {SaveState, TSettingGroupStates} from '../admin-x-ds/settings/SettingGroup'; import {SaveState, TSettingGroupStates} from '../admin-x-ds/settings/SettingGroup';
import {Setting, SettingValue} from '../types/api'; import {Setting, SettingValue, SiteData} from '../types/api';
import {SettingsContext} from '../components/providers/SettingsProvider'; import {SettingsContext} from '../components/providers/SettingsProvider';
import {useContext, useReducer, useRef, useState} from 'react'; import {useContext, useReducer, useRef, useState} from 'react';
@ -11,6 +11,7 @@ interface LocalSetting extends Setting {
export interface SettingGroupHook { export interface SettingGroupHook {
currentState: TSettingGroupStates; currentState: TSettingGroupStates;
saveState: SaveState; saveState: SaveState;
siteData: SiteData | null;
focusRef: React.RefObject<HTMLInputElement>; focusRef: React.RefObject<HTMLInputElement>;
handleSave: () => void; handleSave: () => void;
handleCancel: () => void; handleCancel: () => void;
@ -59,7 +60,7 @@ const useSettingGroup = (): SettingGroupHook => {
const focusRef = useRef<HTMLInputElement>(null); const focusRef = useRef<HTMLInputElement>(null);
// get the settings and saveSettings function from the Settings Context // get the settings and saveSettings function from the Settings Context
const {settings, saveSettings} = useContext(SettingsContext) || {}; const {siteData, settings, saveSettings} = useContext(SettingsContext) || {};
// create a local state to store the settings // create a local state to store the settings
const [localSettings, dispatch] = useReducer<SettingsReducer>(settingsReducer, settings || []); const [localSettings, dispatch] = useReducer<SettingsReducer>(settingsReducer, settings || []);
@ -140,6 +141,7 @@ const useSettingGroup = (): SettingGroupHook => {
currentState, currentState,
saveState, saveState,
focusRef, focusRef,
siteData,
handleSave, handleSave,
handleCancel, handleCancel,
updateSetting, updateSetting,

View file

@ -44,3 +44,14 @@ export type UserRole = {
created_at: string; created_at: string;
updated_at: string; updated_at: string;
}; };
export type SiteData = {
title: string;
description: string;
logo: string;
icon: string;
accent_color: string;
url: string;
locale: string;
version: string;
};

View file

@ -1,4 +1,4 @@
import {Setting, User, UserRole} from '../types/api'; import {Setting, SiteData, User, UserRole} from '../types/api';
import {getGhostPaths} from './helpers'; import {getGhostPaths} from './helpers';
interface Meta { interface Meta {
@ -28,16 +28,7 @@ export interface RolesResponseType {
} }
export interface SiteResponseType { export interface SiteResponseType {
site: { site: SiteData;
title: string;
description: string;
logo: string;
icon: string;
accent_color: string;
url: string;
locale: string;
version: string;
};
} }
export interface ImagesResponseType { export interface ImagesResponseType {