From cb5dd953ea61df754bb4378dc301e74f77cef2a3 Mon Sep 17 00:00:00 2001 From: vincent Date: Tue, 3 May 2022 18:05:30 +0200 Subject: [PATCH] Edit and display fab's social networks --- .../components/socials/fab-socials.tsx | 92 +++++++++++++------ .../javascript/components/socials/socials.tsx | 41 --------- .../src/javascript/models/social-network.ts | 16 ++++ .../templates/admin/settings/about.html | 1 + app/frontend/templates/shared/about.html | 3 +- config/locales/app.admin.en.yml | 1 + 6 files changed, 83 insertions(+), 71 deletions(-) delete mode 100644 app/frontend/src/javascript/components/socials/socials.tsx diff --git a/app/frontend/src/javascript/components/socials/fab-socials.tsx b/app/frontend/src/javascript/components/socials/fab-socials.tsx index 3b9d73ebd..bbc000800 100644 --- a/app/frontend/src/javascript/components/socials/fab-socials.tsx +++ b/app/frontend/src/javascript/components/socials/fab-socials.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'; import { useForm } from 'react-hook-form'; import { FormInput } from '../form/form-input'; import SettingAPI from '../../api/setting'; -import { SocialNetwork } from '../../models/social-network'; +import { supportedNetworks } from '../../models/social-network'; import { IApplication } from '../../models/application'; import { Loader } from '../base/loader'; import { react2angular } from 'react2angular'; @@ -14,58 +14,94 @@ import { FabButton } from '../base/fab-button'; declare const Application: IApplication; -export const FabSocials: React.FC = () => { +interface FabSocialsProps { + show: boolean +} + +export const FabSocials: React.FC = ({ show = false }) => { const { t } = useTranslation('shared'); - const { handleSubmit, register, resetField } = useForm(); - const onSubmit = (data) => console.log(data); + const { handleSubmit, register, setValue } = useForm(); - const supportedNetworks = [SettingName.SocialsFacebook, SettingName.SocialsTwitter, SettingName.SocialsViadeo, SettingName.SocialsLinkedin, SettingName.SocialsInstagram, SettingName.SocialsYoutube, SettingName.SocialsVimeo, SettingName.SocialsDailymotion, SettingName.SocialsGithub, SettingName.SocialsEchosciences, SettingName.SocialsPinterest, SettingName.SocialsLastfm, SettingName.SocialsFlickr]; + const settingsList = supportedNetworks.map(el => `socials_${el}` as SettingName); const [fabNetworks, setFabNetworks] = useState([]); + const [selectedNetworks, setSelectedNetworks] = useState([]); + useEffect(() => { - SettingAPI.query(supportedNetworks).then(res => { - setFabNetworks(Array.from(res, ([name, value]) => ({ name, value }))); + SettingAPI.query(settingsList).then(res => { + setFabNetworks(Array.from(res, ([name, url]) => ({ name, url }))); }).catch(error => console.error(error)); }, []); + useEffect(() => { + setSelectedNetworks(fabNetworks.filter(el => el.url !== '')); + }, [fabNetworks]); + + const onSubmit = (data) => { + const updatedNetworks = new Map(); + Object.keys(data).forEach(key => updatedNetworks.set(key as SettingName, data[key])); + SettingAPI.bulkUpdate(updatedNetworks).then(res => { + const errorResults = Array.from(res.values()).filter(item => !item.status); + if (errorResults.length > 0) { + console.error(errorResults.map(item => item.error[0]).join(' ')); + } + }); + }; + const selectNetwork = (network) => { - console.log(network); + setSelectedNetworks([...selectedNetworks, network]); }; const remove = (network) => { - resetField(network.name); + setSelectedNetworks(selectedNetworks.filter(el => el !== network)); + setValue(network.name, ''); }; return ( -
-
+ <>{show + ?
{fabNetworks.map((network, index) => - selectNetwork(network)}> + selectedNetworks.includes(network) && + + + )}
- {fabNetworks.map((network, index) => - } - addOnAction={() => remove(network)} /> - )} - - {t('app.shared.buttons.save')} - - + + :
+
+ {fabNetworks.map((network, index) => + !selectedNetworks.includes(network) && + selectNetwork(network)}> + )} +
+ {fabNetworks.map((network, index) => + selectedNetworks.includes(network) && + } + addOn={} + addOnAction={() => remove(network)} /> + )} + + {t('app.shared.buttons.save')} + + + } ); }; -const FabSocialsWrapper: React.FC = (props) => { +const FabSocialsWrapper: React.FC = (props) => { return ( ); }; -Application.Components.component('fabSocials', react2angular(FabSocialsWrapper, [])); +Application.Components.component('fabSocials', react2angular(FabSocialsWrapper, ['show'])); diff --git a/app/frontend/src/javascript/components/socials/socials.tsx b/app/frontend/src/javascript/components/socials/socials.tsx deleted file mode 100644 index f70ef52dd..000000000 --- a/app/frontend/src/javascript/components/socials/socials.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; -import { SocialNetwork } from '../../models/social-network'; -import Icons from '../../../../images/social-icons.svg'; -import { IApplication } from '../../models/application'; -import { Loader } from '../base/loader'; -import { react2angular } from 'react2angular'; - -declare const Application: IApplication; - -interface SocialsProps { - networks: SocialNetwork[] -} - -const plop = [{ - name: 'facebook', - url: 'https://plop.com' -}, { - name: 'linkedin', - url: 'https://plop.com' -}]; - -export const Socials: React.FC = ({ networks = plop }) => { - return ( -
- {networks.map((network, index) => - - - - )} -
- ); -}; - -const SocialsWrapper: React.FC = (props) => { - return ( - - - - ); -}; -Application.Components.component('socials', react2angular(SocialsWrapper, ['networks'])); diff --git a/app/frontend/src/javascript/models/social-network.ts b/app/frontend/src/javascript/models/social-network.ts index a6cbd07df..2b1875e8a 100644 --- a/app/frontend/src/javascript/models/social-network.ts +++ b/app/frontend/src/javascript/models/social-network.ts @@ -2,3 +2,19 @@ export interface SocialNetwork { name: string, url: string } + +export const supportedNetworks = [ + 'facebook', + 'twitter', + 'viadeo', + 'linkedin', + 'instagram', + 'youtube', + 'vimeo', + 'dailymotion', + 'github', + 'echosciences', + 'pinterest', + 'lastfm', + 'flickr' +]; diff --git a/app/frontend/templates/admin/settings/about.html b/app/frontend/templates/admin/settings/about.html index 8f09d17f3..768ac1b23 100644 --- a/app/frontend/templates/admin/settings/about.html +++ b/app/frontend/templates/admin/settings/about.html @@ -57,6 +57,7 @@
+

{{ 'app.public.home.follow_us' }}

diff --git a/app/frontend/templates/shared/about.html b/app/frontend/templates/shared/about.html index a25f8dfa0..a6f9b0796 100644 --- a/app/frontend/templates/shared/about.html +++ b/app/frontend/templates/shared/about.html @@ -27,8 +27,7 @@

{{ 'app.public.home.follow_us' }}

- - +
diff --git a/config/locales/app.admin.en.yml b/config/locales/app.admin.en.yml index 05d319fd3..b5abd8a6a 100644 --- a/config/locales/app.admin.en.yml +++ b/config/locales/app.admin.en.yml @@ -1309,6 +1309,7 @@ en: about_title: "\"About\" page title" about_body: "\"About\" page content" about_contacts: "\"About\" page contacts" + about_follow_us: "Follow us" privacy_draft: "privacy policy draft" privacy_body: "privacy policy" privacy_dpo: "data protection officer address"