From 9af3714d8ca85967463b0880d15aa96d0bccef95 Mon Sep 17 00:00:00 2001 From: Rishabh Date: Thu, 18 May 2023 02:03:49 +0530 Subject: [PATCH] Wired site settings to admin-x components refs https://github.com/TryGhost/Team/issues/3151 - wires real setting value for a site to general settings UI in admin-X --- .../src/components/SettingsProvider.tsx | 1 - .../settings/general/PublicationLanguage.tsx | 9 ++++--- .../components/settings/general/TimeZone.tsx | 26 ++++++++++++++---- .../settings/general/TitleAndDescription.tsx | 27 ++++++++++++++++--- ghost/admin-x-settings/src/utils/helpers.tsx | 4 +-- 5 files changed, 52 insertions(+), 15 deletions(-) diff --git a/ghost/admin-x-settings/src/components/SettingsProvider.tsx b/ghost/admin-x-settings/src/components/SettingsProvider.tsx index a8a9c8dfb5..11d8cf75aa 100644 --- a/ghost/admin-x-settings/src/components/SettingsProvider.tsx +++ b/ghost/admin-x-settings/src/components/SettingsProvider.tsx @@ -46,7 +46,6 @@ const SettingsProvider: React.FC = ({children}) => { // Update the local state with the new settings setSettings(data.settings); } catch (error) { - console.log('Error', error); // Log error in settings API } }; diff --git a/ghost/admin-x-settings/src/components/settings/general/PublicationLanguage.tsx b/ghost/admin-x-settings/src/components/settings/general/PublicationLanguage.tsx index bf278ce715..0f6c68c314 100644 --- a/ghost/admin-x-settings/src/components/settings/general/PublicationLanguage.tsx +++ b/ghost/admin-x-settings/src/components/settings/general/PublicationLanguage.tsx @@ -1,11 +1,15 @@ import ButtonGroup from '../../../admin-x-ds/global/ButtonGroup'; -import React from 'react'; +import React, {useContext} from 'react'; import SettingGroup from '../../../admin-x-ds/settings/SettingGroup'; import SettingGroupHeader from '../../../admin-x-ds/settings/SettingGroupHeader'; import SettingGroupValues from '../../../admin-x-ds/settings/SettingGroupValues'; import {ButtonColors} from '../../../admin-x-ds/global/Button'; +import {SettingsContext} from '../../SettingsProvider'; +import {getSettingValue} from '../../../utils/helpers'; const PublicationLanguage: React.FC = () => { + const {settings} = useContext(SettingsContext) || {}; + const publicationLanguage = getSettingValue(settings, 'locale'); const buttons = [ { label: 'Edit', @@ -17,8 +21,7 @@ const PublicationLanguage: React.FC = () => { { heading: 'Site language', key: 'site-language', - value: 'en' - + value: publicationLanguage } ]; diff --git a/ghost/admin-x-settings/src/components/settings/general/TimeZone.tsx b/ghost/admin-x-settings/src/components/settings/general/TimeZone.tsx index 74ae729470..f846db25d2 100644 --- a/ghost/admin-x-settings/src/components/settings/general/TimeZone.tsx +++ b/ghost/admin-x-settings/src/components/settings/general/TimeZone.tsx @@ -1,11 +1,27 @@ import ButtonGroup from '../../../admin-x-ds/global/ButtonGroup'; -import React from 'react'; +import React, {useContext, useEffect, useState} from 'react'; import SettingGroup from '../../../admin-x-ds/settings/SettingGroup'; import SettingGroupHeader from '../../../admin-x-ds/settings/SettingGroupHeader'; import SettingGroupValues from '../../../admin-x-ds/settings/SettingGroupValues'; import {ButtonColors} from '../../../admin-x-ds/global/Button'; +import {SettingsContext} from '../../SettingsProvider'; +import {getLocalTime, getSettingValue} from '../../../utils/helpers'; const TimeZone: React.FC = () => { + const {settings} = useContext(SettingsContext) || {}; + const publicationTimezone = getSettingValue(settings, 'timezone'); + + const [currentTime, setCurrentTime] = useState(getLocalTime(publicationTimezone)); + useEffect(() => { + const timer = setInterval(() => { + setCurrentTime(getLocalTime(publicationTimezone)); + }, 1000); + + return () => { + clearInterval(timer); + }; + }, [publicationTimezone]); + const buttons = [ { label: 'Edit', @@ -16,15 +32,15 @@ const TimeZone: React.FC = () => { const viewValues = [ { key: 'site-timezone', - value: '(GMT +2:00) Cairo, Egypt', - hint: 'The local time here is currently 12:04:09' + value: publicationTimezone, + hint: `The local time here is currently ${currentTime}` } ]; return ( - diff --git a/ghost/admin-x-settings/src/components/settings/general/TitleAndDescription.tsx b/ghost/admin-x-settings/src/components/settings/general/TitleAndDescription.tsx index dacb6c9740..4746d785fa 100644 --- a/ghost/admin-x-settings/src/components/settings/general/TitleAndDescription.tsx +++ b/ghost/admin-x-settings/src/components/settings/general/TitleAndDescription.tsx @@ -1,18 +1,23 @@ import ButtonGroup from '../../../admin-x-ds/global/ButtonGroup'; -import React, {useEffect, useRef, useState} from 'react'; +import React, {useContext, useEffect, useRef, useState} from 'react'; import SettingGroup from '../../../admin-x-ds/settings/SettingGroup'; import SettingGroupHeader from '../../../admin-x-ds/settings/SettingGroupHeader'; import SettingGroupInputs from '../../../admin-x-ds/settings/SettingGroupInputs'; import SettingGroupValues from '../../../admin-x-ds/settings/SettingGroupValues'; import TextField from '../../../admin-x-ds/global/TextField'; import {ButtonColors, IButton} from '../../../admin-x-ds/global/Button'; +import {SettingsContext} from '../../SettingsProvider'; import {TSettingGroupStates} from '../../../admin-x-ds/settings/SettingGroup'; +import {getSettingValue} from '../../../utils/helpers'; const TitleAndDescription: React.FC = () => { const [isEditMode, setIsEditMode] = useState(false); const [isEdited, setIsEdited] = useState(false); - const [siteTitle, setSiteTitleValue] = useState(`Dr. Evil's secret volcano lair`); - const [siteDescription, setSiteDescriptionValue] = useState(`I'm doing this for fun`); + const {settings, saveSettings} = useContext(SettingsContext) || {}; + const savedSiteTitle = getSettingValue(settings, 'title'); + const savedSiteDescription = getSettingValue(settings, 'description'); + const [siteTitle, setSiteTitleValue] = useState(savedSiteTitle); + const [siteDescription, setSiteDescriptionValue] = useState(savedSiteDescription); const siteTitleRef = useRef(null); useEffect(() => { @@ -62,7 +67,21 @@ const TitleAndDescription: React.FC = () => { label: 'Save', key: 'save', disabled: !isEdited, - color: ButtonColors.Green + color: ButtonColors.Green, + onClick: () => { + saveSettings?.([ + { + key: 'title', + value: siteTitle + }, + { + key: 'description', + value: siteDescription + } + ]); + setIsEdited(false); + setIsEditMode(false); + } } ); } diff --git a/ghost/admin-x-settings/src/utils/helpers.tsx b/ghost/admin-x-settings/src/utils/helpers.tsx index 51d57f0b40..7f7ca3d752 100644 --- a/ghost/admin-x-settings/src/utils/helpers.tsx +++ b/ghost/admin-x-settings/src/utils/helpers.tsx @@ -23,9 +23,9 @@ export function getGhostPaths(): IGhostPaths { return {adminRoot, assetRoot, apiRoot}; } -export function getLocalTime({timeZone}) { +export function getLocalTime(timeZone: string) { const date = new Date(); - const options = {timeZone: timeZone, hour12: false, hour: 'numeric', minute: 'numeric', second: 'numeric'}; + const options = {timeZone: timeZone}; const localTime = date.toLocaleString('en-US', options); return localTime; } \ No newline at end of file