Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-10 23:36:14 -05:00
Code Issues Activity

Wired site settings to admin-x components

Browse source 
refs https://github.com/TryGhost/Team/issues/3151

- wires real setting value for a site to general settings UI in admin-X
This commit is contained in:
Rishabh 2023-05-18 02:03:49 +05:30
parent 5b0eba9b1f
commit 9af3714d8c
5 changed files with 52 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
ghost/admin-x-settings/src/components/SettingsProvider.tsx
View file

@ -46,7 +46,6 @@ const SettingsProvider: React.FC<SettingsProviderProps> = ({children}) => {
// Update the local state with the new settings
setSettings(data.settings);
} catch (error) {
console.log('Error', error);
// Log error in settings API
}
};

9
ghost/admin-x-settings/src/components/settings/general/PublicationLanguage.tsx
View file

@ -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
}
];

26
ghost/admin-x-settings/src/components/settings/general/TimeZone.tsx
View file

@ -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 (
<SettingGroup>
<SettingGroupHeader
description="Set the time and date of your publication, used for all published posts"
<SettingGroupHeader
description="Set the time and date of your publication, used for all published posts"
title="Site timezone"
>
<ButtonGroup buttons={buttons} link={true} />

27
ghost/admin-x-settings/src/components/settings/general/TitleAndDescription.tsx
View file

@ -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<HTMLInputElement>(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);
}
}
);
}

4
ghost/admin-x-settings/src/utils/helpers.tsx
View file

@ -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;
}