- implement ability to rename sections

- clean up kannada translations

src/components/builder/left/LeftNavbar.js

@@ -10,6 +10,7 @@ import styles from './LeftNavbar.module.css';
 
 const LeftNavbar = () => {
   const { t } = useTranslation();
+
   return (
     <div className={styles.container}>
       <Tooltip title={t('builder.tooltips.backToDashboard')} placement="right">

src/components/builder/left/LeftSidebar.js

@@ -1,6 +1,5 @@
 import React, { Fragment, memo } from 'react';
 import { Element } from 'react-scroll';
-import { useTranslation } from 'react-i18next';
 import sections from '../../../data/leftSections';
 import LeftNavbar from './LeftNavbar';
 import styles from './LeftSidebar.module.css';
@@ -48,30 +47,26 @@ const getComponent = (id) => {
   }
 };
 
-const LeftSidebar = () => {
-  const { t } = useTranslation();
+const SidebarSection = ({ id, event }) => {
+  const Component = getComponent(id);
 
+  return (
+    <Fragment key={id}>
+      <Element name={id}>
+        <Component id={id} event={event} />
+      </Element>
+      <hr />
+    </Fragment>
+  );
+};
+
+const LeftSidebar = () => {
   return (
     <div className="flex">
       <LeftNavbar />
 
       <div id="LeftSidebar" className={styles.container}>
-        {sections.map(({ id, event }) => {
-          const Component = getComponent(id);
-
-          return (
-            <Fragment key={id}>
-              <Element name={id}>
-                <Component
-                  id={id}
-                  name={t(`builder.sections.${id}`)}
-                  event={event}
-                />
-              </Element>
-              <hr />
-            </Fragment>
-          );
-        })}
+        {sections.map(SidebarSection)}
       </div>
     </div>
   );

src/components/builder/left/sections/Awards.js

@@ -1,13 +1,22 @@
 import React, { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 import Heading from '../../../shared/Heading';
+import Input from '../../../shared/Input';
 import List from '../../lists/List';
 
-const Awards = ({ id, name, event }) => {
+const Awards = ({ id, event }) => {
   const path = `${id}.items`;
+  const { t } = useTranslation();
 
   return (
     <section>
-      <Heading>{name}</Heading>
+      <Heading id={id} />
+
+      <Input
+        name="heading"
+        label={t('builder.sections.heading')}
+        path={`${id}.heading`}
+      />
 
       <List
         path={path}

src/components/builder/left/sections/Certifications.js

@@ -1,13 +1,22 @@
 import React, { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 import Heading from '../../../shared/Heading';
+import Input from '../../../shared/Input';
 import List from '../../lists/List';
 
-const Certifications = ({ id, name, event }) => {
+const Certifications = ({ id, event }) => {
   const path = `${id}.items`;
+  const { t } = useTranslation();
 
   return (
     <section>
-      <Heading>{name}</Heading>
+      <Heading id={id} />
+
+      <Input
+        name="heading"
+        label={t('builder.sections.heading')}
+        path={`${id}.heading`}
+      />
 
       <List
         path={path}

src/components/builder/left/sections/Education.js

@@ -1,13 +1,22 @@
 import React, { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 import Heading from '../../../shared/Heading';
+import Input from '../../../shared/Input';
 import List from '../../lists/List';
 
-const Education = ({ id, name, event }) => {
+const Education = ({ id, event }) => {
   const path = `${id}.items`;
+  const { t } = useTranslation();
 
   return (
     <section>
-      <Heading>{name}</Heading>
+      <Heading id={id} />
+
+      <Input
+        name="heading"
+        label={t('builder.sections.heading')}
+        path={`${id}.heading`}
+      />
 
       <List
         hasDate

src/components/builder/left/sections/Hobbies.js

@@ -1,13 +1,22 @@
 import React, { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 import Heading from '../../../shared/Heading';
+import Input from '../../../shared/Input';
 import List from '../../lists/List';
 
-const Hobbies = ({ id, name, event }) => {
+const Hobbies = ({ id, event }) => {
   const path = `${id}.items`;
+  const { t } = useTranslation();
 
   return (
     <section>
-      <Heading>{name}</Heading>
+      <Heading id={id} />
+
+      <Input
+        name="heading"
+        label={t('builder.sections.heading')}
+        path={`${id}.heading`}
+      />
 
       <List path={path} event={event} titlePath="name" />
     </section>

src/components/builder/left/sections/Languages.js

@@ -1,13 +1,22 @@
 import React, { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 import Heading from '../../../shared/Heading';
+import Input from '../../../shared/Input';
 import List from '../../lists/List';
 
-const Languages = ({ id, name, event }) => {
+const Languages = ({ id, event }) => {
   const path = `${id}.items`;
+  const { t } = useTranslation();
 
   return (
     <section>
-      <Heading>{name}</Heading>
+      <Heading id={id} />
+
+      <Input
+        name="heading"
+        label={t('builder.sections.heading')}
+        path={`${id}.heading`}
+      />
 
       <List path={path} event={event} titlePath="name" subtitlePath="fluency" />
     </section>

src/components/builder/left/sections/Objective.js

@@ -3,12 +3,18 @@ import { useTranslation } from 'react-i18next';
 import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
 
-const Objective = ({ name }) => {
+const Objective = ({ id }) => {
   const { t } = useTranslation();
 
   return (
     <section>
-      <Heading>{name}</Heading>
+      <Heading id={id} />
+
+      <Input
+        name="heading"
+        label={t('builder.sections.heading')}
+        path={`${id}.heading`}
+      />
 
       <Input
         type="textarea"

src/components/builder/left/sections/Profile.js

@@ -4,12 +4,18 @@ import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
 import PhotoUpload from '../../../shared/PhotoUpload';
 
-const Profile = ({ name }) => {
+const Profile = ({ id }) => {
   const { t } = useTranslation();
 
   return (
     <section>
-      <Heading>{name}</Heading>
+      <Heading id={id} />
+
+      <Input
+        name="heading"
+        label={t('builder.sections.heading')}
+        path={`${id}.heading`}
+      />
 
       <PhotoUpload />
 

src/components/builder/left/sections/Projects.js

@@ -1,13 +1,22 @@
 import React, { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 import Heading from '../../../shared/Heading';
+import Input from '../../../shared/Input';
 import List from '../../lists/List';
 
-const Projects = ({ id, name, event }) => {
+const Projects = ({ id, event }) => {
   const path = `${id}.items`;
+  const { t } = useTranslation();
 
   return (
     <section>
-      <Heading>{name}</Heading>
+      <Heading id={id} />
+
+      <Input
+        name="heading"
+        label={t('builder.sections.heading')}
+        path={`${id}.heading`}
+      />
 
       <List
         path={path}

src/components/builder/left/sections/References.js

@@ -1,13 +1,22 @@
 import React, { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 import Heading from '../../../shared/Heading';
+import Input from '../../../shared/Input';
 import List from '../../lists/List';
 
-const References = ({ id, name, event }) => {
+const References = ({ id, event }) => {
   const path = `${id}.items`;
+  const { t } = useTranslation();
 
   return (
     <section>
-      <Heading>{name}</Heading>
+      <Heading id={id} />
+
+      <Input
+        name="heading"
+        label={t('builder.sections.heading')}
+        path={`${id}.heading`}
+      />
 
       <List
         path={path}

src/components/builder/left/sections/Skills.js

@@ -1,13 +1,22 @@
 import React, { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 import Heading from '../../../shared/Heading';
+import Input from '../../../shared/Input';
 import List from '../../lists/List';
 
-const Skills = ({ id, name, event }) => {
+const Skills = ({ id, event }) => {
   const path = `${id}.items`;
+  const { t } = useTranslation();
 
   return (
     <section>
-      <Heading>{name}</Heading>
+      <Heading id={id} />
+
+      <Input
+        name="heading"
+        label={t('builder.sections.heading')}
+        path={`${id}.heading`}
+      />
 
       <List path={path} event={event} titlePath="name" subtitlePath="level" />
     </section>

src/components/builder/left/sections/Social.js

@@ -1,13 +1,22 @@
 import React, { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 import Heading from '../../../shared/Heading';
+import Input from '../../../shared/Input';
 import List from '../../lists/List';
 
-const Social = ({ id, name, event }) => {
+const Social = ({ id, event }) => {
   const path = `${id}.items`;
+  const { t } = useTranslation();
 
   return (
     <section>
-      <Heading>{name}</Heading>
+      <Heading id={id} />
+
+      <Input
+        name="heading"
+        label={t('builder.sections.heading')}
+        path={`${id}.heading`}
+      />
 
       <List
         path={path}

src/components/builder/left/sections/Work.js

@@ -1,13 +1,22 @@
 import React, { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 import Heading from '../../../shared/Heading';
+import Input from '../../../shared/Input';
 import List from '../../lists/List';
 
-const Work = ({ id, name, event }) => {
+const Work = ({ id, event }) => {
   const path = `${id}.items`;
+  const { t } = useTranslation();
 
   return (
     <section>
-      <Heading>{name}</Heading>
+      <Heading id={id} />
+
+      <Input
+        name="heading"
+        label={t('builder.sections.heading')}
+        path={`${id}.heading`}
+      />
 
       <List
         hasDate

src/components/builder/right/RightSidebar.js

@@ -1,5 +1,4 @@
 import React, { Fragment, memo } from 'react';
-import { useTranslation } from 'react-i18next';
 import { Element } from 'react-scroll';
 import sections from '../../../data/rightSections';
 import RightNavbar from './RightNavbar';
@@ -33,28 +32,24 @@ const getComponent = (id) => {
   }
 };
 
-const RightSidebar = () => {
-  const { t } = useTranslation();
+const SidebarSection = ({ id, event }) => {
+  const Component = getComponent(id);
 
+  return (
+    <Fragment key={id}>
+      <Element name={id}>
+        <Component id={id} event={event} />
+      </Element>
+      <hr />
+    </Fragment>
+  );
+};
+
+const RightSidebar = () => {
   return (
     <div className="flex">
       <div id="RightSidebar" className={styles.container}>
-        {sections.map(({ id, event }) => {
-          const Component = getComponent(id);
-
-          return (
-            <Fragment key={id}>
-              <Element name={id}>
-                <Component
-                  id={id}
-                  name={t(`builder.sections.${id}`)}
-                  event={event}
-                />
-              </Element>
-              <hr />
-            </Fragment>
-          );
-        })}
+        {sections.map(SidebarSection)}
       </div>
 
       <RightNavbar />

src/components/builder/right/sections/About.js

@@ -6,12 +6,12 @@ import Button from '../../../shared/Button';
 import Heading from '../../../shared/Heading';
 import styles from './About.module.css';
 
-const About = ({ name }) => {
+const About = ({ id }) => {
   const { t } = useTranslation();
 
   return (
     <section>
-      <Heading>{name}</Heading>
+      <Heading id={id} />
 
       <div className={styles.container}>
         <h5>{t('builder.about.donate.heading')}</h5>

src/components/builder/right/sections/Actions.js

@@ -8,7 +8,7 @@ import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
 import styles from './Actions.module.css';
 
-const Actions = ({ name }) => {
+const Actions = ({ id }) => {
   const { t } = useTranslation();
 
   const [loadDemoText, setLoadDemoText] = useState(
@@ -59,7 +59,7 @@ const Actions = ({ name }) => {
 
   return (
     <section>
-      <Heading>{name}</Heading>
+      <Heading id={id} />
 
       <div className={styles.container}>
         <h5>{t('builder.actions.import.heading')}</h5>

src/components/builder/right/sections/Colors.js

@@ -8,7 +8,7 @@ import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
 import styles from './Colors.module.css';
 
-const Colors = ({ name }) => {
+const Colors = ({ id }) => {
   const dispatch = useDispatch();
   const { t } = useTranslation();
 
@@ -24,7 +24,7 @@ const Colors = ({ name }) => {
 
   return (
     <section>
-      <Heading>{name}</Heading>
+      <Heading id={id} />
 
       <div className="mb-6 grid grid-cols-8 col-gap-2 row-gap-6">
         {colorOptions.map((color) => (

src/components/builder/right/sections/Fonts.js

@@ -6,7 +6,7 @@ import { handleKeyUp } from '../../../../utils';
 import Heading from '../../../shared/Heading';
 import styles from './Fonts.module.css';
 
-const Fonts = ({ name }) => {
+const Fonts = ({ id }) => {
   const dispatch = useDispatch();
   const font = useSelector('metadata.font');
 
@@ -22,7 +22,7 @@ const Fonts = ({ name }) => {
 
   return (
     <section>
-      <Heading>{name}</Heading>
+      <Heading id={id} />
 
       <div className="grid grid-cols-2 gap-8">
         {fontOptions.map((x) => (

src/components/builder/right/sections/Layout.js

@@ -7,7 +7,7 @@ import Button from '../../../shared/Button';
 import Heading from '../../../shared/Heading';
 import styles from './Layout.module.css';
 
-const Layout = ({ name }) => {
+const Layout = ({ id }) => {
   const { t } = useTranslation();
   const [resetLayoutText, setResetLayoutText] = useState(
     t('builder.layout.reset'),
@@ -64,7 +64,7 @@ const Layout = ({ name }) => {
 
   return (
     <section>
-      <Heading>{name}</Heading>
+      <Heading id={id} />
 
       <p className="leading-loose">
         {t('builder.layout.text', { count: blocks.length })}

src/components/builder/right/sections/Settings.js

@@ -11,7 +11,7 @@ import themeConfig from '../../../../data/themeConfig';
 import { languages } from '../../../../i18n';
 import { useDispatch } from '../../../../contexts/ResumeContext';
 
-const Settings = ({ name }) => {
+const Settings = ({ id }) => {
   const { t } = useTranslation();
 
   const [deleteText, setDeleteText] = useState(
@@ -48,7 +48,7 @@ const Settings = ({ name }) => {
 
   return (
     <section>
-      <Heading>{name}</Heading>
+      <Heading id={id} />
 
       <Input
         label={t('builder.settings.theme')}

src/components/builder/right/sections/Templates.js

@@ -8,7 +8,7 @@ import { handleKeyUp } from '../../../../utils';
 import Heading from '../../../shared/Heading';
 import styles from './Templates.module.css';
 
-const Templates = ({ name }) => {
+const Templates = ({ id }) => {
   const dispatch = useDispatch();
   const template = useSelector('metadata.template');
 
@@ -71,7 +71,7 @@ const Templates = ({ name }) => {
 
   return (
     <section>
-      <Heading>{name}</Heading>
+      <Heading id={id} />
 
       <div className="grid grid-cols-2 gap-8">
         {templateOptions.map((x) => (

src/components/shared/Heading.js

@@ -1,7 +1,12 @@
 import React, { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSelector } from '../../contexts/ResumeContext';
 
-const Heading = ({ children }) => {
-  return <h2 className="text-4xl focus:outline-none">{children}</h2>;
+const Heading = ({ id }) => {
+  const { t } = useTranslation();
+  const heading = useSelector(`${id}.heading`, t(`builder.sections.${id}`));
+
+  return <h2 className="text-4xl focus:outline-none">{heading}</h2>;
 };
 
 export default memo(Heading);

src/components/shared/SectionIcon.js

@@ -1,17 +1,13 @@
 import { Tooltip } from '@material-ui/core';
-import React, { memo, useEffect } from 'react';
-import { Link, scrollSpy } from 'react-scroll';
+import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Link } from 'react-scroll';
 import styles from './SectionIcon.module.css';
 
 const SectionIcon = ({ section, containerId, tooltipPlacement }) => {
   const { t } = useTranslation();
   const { id, icon: Icon } = section;
 
-  useEffect(() => {
-    scrollSpy.update();
-  }, []);
-
   return (
     <Tooltip
       title={t(`builder.sections.${id}`)}