Edit and display fab's social networks

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<SocialNetwork> = () => {
+interface FabSocialsProps {
+  show: boolean
+}
+
+export const FabSocials: React.FC<FabSocialsProps> = ({ 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<SettingName, string>();
+    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 (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <div className="social-icons">
+    <>{show
+      ? <div className='social-icons'>
         {fabNetworks.map((network, index) =>
-          <img key={index} src={`${Icons}#${network.name.replace('socials_', '')}`} onClick={() => selectNetwork(network)}></img>
+          selectedNetworks.includes(network) &&
+          <a key={index} href={network.url} target='_blank' rel="noreferrer">
+            <img src={`${Icons}#${network.name.replace('socials_', '')}`}></img>
+          </a>
         )}
       </div>
-      {fabNetworks.map((network, index) =>
-        <FormInput id={network.name}
-                  key={index}
-                  register={register}
-                  label={network.name.replace('socials_', '')}
-                  placeholder={t('app.shared.text_editor.url_placeholder')}
-                  addOn={<Trash size={16} />}
-                  addOnAction={() => remove(network)} />
-      )}
-      <FabButton type='submit'
-                 className='btn-warning'>
-        {t('app.shared.buttons.save')}
-      </FabButton>
-    </form>
+
+      : <form onSubmit={handleSubmit(onSubmit)}>
+        <div className="social-icons">
+          {fabNetworks.map((network, index) =>
+            !selectedNetworks.includes(network) &&
+            <img key={index} src={`${Icons}#${network.name.replace('socials_', '')}`} onClick={() => selectNetwork(network)}></img>
+          )}
+        </div>
+        {fabNetworks.map((network, index) =>
+          selectedNetworks.includes(network) &&
+          <FormInput id={network.name}
+                    key={index}
+                    register={register}
+                    defaultValue={network.url}
+                    label={network.name.replace('socials_', '')}
+                    placeholder={t('app.shared.text_editor.url_placeholder')}
+                    icon={<img src={`${Icons}#${network.name.replace('socials_', '')}`}></img>}
+                    addOn={<Trash size={16} />}
+                    addOnAction={() => remove(network)} />
+        )}
+        <FabButton type='submit'
+                  className='btn-warning'>
+          {t('app.shared.buttons.save')}
+        </FabButton>
+      </form>
+    }</>
   );
 };
 
-const FabSocialsWrapper: React.FC<SocialNetwork> = (props) => {
+const FabSocialsWrapper: React.FC<FabSocialsProps> = (props) => {
   return (
     <Loader>
       <FabSocials {...props} />
     </Loader>
   );
 };
-Application.Components.component('fabSocials', react2angular(FabSocialsWrapper, []));
+Application.Components.component('fabSocials', react2angular(FabSocialsWrapper, ['show']));

app/frontend/src/javascript/components/socials/socials.tsx

@@ -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<SocialsProps> = ({ networks = plop }) => {
-  return (
-    <div className='social-icons'>
-      {networks.map((network, index) =>
-        <a key={index} href={network.url}>
-          <img src={`${Icons}#${network.name}`}></img>
-        </a>
-      )}
-    </div>
-  );
-};
-
-const SocialsWrapper: React.FC<SocialsProps> = (props) => {
-  return (
-    <Loader>
-      <Socials {...props} />
-    </Loader>
-  );
-};
-Application.Components.component('socials', react2angular(SocialsWrapper, ['networks']));

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'
+];

app/frontend/templates/admin/settings/about.html

@@ -57,6 +57,7 @@
                 <button name="button" class="btn btn-warning" ng-click="save(aboutContactsSetting)" translate>{{ 'app.shared.buttons.save' }}</button>
             </div>
             <div class="col-md-4 col-md-offset-2 m-t-xl">
+              <h2 translate>{{ 'app.public.home.follow_us' }}</h2>
               <fab-socials></fab-socials>
             </div>
         </div>

app/frontend/templates/shared/about.html

@@ -27,8 +27,7 @@
       <span ng-bind-html="aboutContacts.value"></span>
       <div class="m-t-xl">
         <h2 translate>{{ 'app.public.home.follow_us' }}</h2>
-        <!-- TODO: get fablab's social networks -->
-        <socials />
+        <fab-socials show="true" />
       </div>
     </div>
   </div>

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"