From c66d8f0124e0bb8f1a2f6c6ef3471eb255a3e5d7 Mon Sep 17 00:00:00 2001
From: ayushsatyam146 <ayushsatyam146@gmail.com>
Date: Fri, 28 Jan 2022 02:26:27 +0530
Subject: [PATCH 1/3] fixed data loss on page refresh and enabled auto
 scrolling to selected icon in shared links

---
 src/App.js              |  5 +--
 src/modules/IconsSet.js | 72 +++++++++++++++++++++++++++++------------
 2 files changed, 52 insertions(+), 25 deletions(-)

diff --git a/src/App.js b/src/App.js
index f3a92c02..579ac244 100644
--- a/src/App.js
+++ b/src/App.js
@@ -22,8 +22,7 @@ import Footer from './components/Footer'
 import ThankYou from './components/ThankYou'
 import ScrollToTopBtn from './components/ScrollToTop'
 import AppContext from './utils/AppContext'
-import CookiesBanner from './components/CookiesBanner'
-import StartOnTop from './components/StartOnTop'
+import CookiesBanner from './components/CookiesBanner' 
 
 const tagManagerArgs = {
   gtmId: GTM
@@ -39,7 +38,6 @@ const App = () => {
         <Navigation />
         <div className='app-container'>
           <Router primary={false}>
-            <StartOnTop path='/'>
               <Home path='/' />
               <Docs path='/docs' />
               <CookiesPage path='/cookies-policy' />
@@ -48,7 +46,6 @@ const App = () => {
               <AboutPage path='/about' />
               <TeamPage path='/team' />
               <Cheatsheet path='/cheatsheet' />
-            </StartOnTop>
           </Router>
           <ScrollToTopBtn />
         </div>
diff --git a/src/modules/IconsSet.js b/src/modules/IconsSet.js
index 6f31fe00..fb5009df 100644
--- a/src/modules/IconsSet.js
+++ b/src/modules/IconsSet.js
@@ -28,6 +28,15 @@ const IconsSet = (props) => {
   const [selectMultiple, setSelectMultiple] = useState(true)
   const [emptySearchResult, setEmptySearchResult] = useState(false)
   const [suggestedString, setSuggestedString] = useState('')
+ 
+  const activeIconRef = useRef(null) 
+  useEffect(()=> {
+    if(iconSelected!=='') {
+      window.addEventListener('DOMContentLoaded', ()=> {
+        window.scrollTo(0, activeIconRef.current.offsetTop);
+      });
+    }
+  })
 
   let setSearchWithUrlParam = urlIconName
 
@@ -128,7 +137,7 @@ const IconsSet = (props) => {
         tab === 'Static Icons'
           ? 'TOGGLE_SEARCH_REGULAR_ICONS'
           : 'TOGGLE_SEARCH_ANIMATED_ICONS',
-      search: selectMultiple ? searchValue : ''
+      search: ''
     })
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tab, dispatch, selectMultiple])
@@ -150,14 +159,14 @@ const IconsSet = (props) => {
   const setIconInSearch = () => {
     return dispatch({
       type: 'TOGGLE_SEARCH_REGULAR_ICONS',
-      search: urlIconName
+      search: ''
     })
   }
 
   const setTagInSearch = () => {
     return dispatch({
       type: 'TOGGLE_SEARCH_REGULAR_ICONS',
-      search: urlTagName
+      search: ''
     })
   }
 
@@ -200,7 +209,7 @@ const IconsSet = (props) => {
         tab === 'Static Icons'
           ? 'TOGGLE_SEARCH_REGULAR_ICONS'
           : 'TOGGLE_SEARCH_ANIMATED_ICONS',
-      search: suggestedString
+      search: ''
     })
     setSearchValue(suggestedString)
   }
@@ -430,24 +439,45 @@ const IconsSet = (props) => {
               return categoryObject.icons.length > 0 ? (
                 <div key={index}>
                   <h4 className='category'>{categoryObject.category}</h4>
-                  <div className='icons-list'>
+                  <div className='icons-list'>  
                     {categoryObject.icons.map((icon, i) => (
-                      <Icon
-                        size={36}
-                        active={isActive(icon.name, state)}
-                        key={icon.name}
-                        name={icon.name}
-                        iconsTheme={state.iconsTheme}
-                        action={() =>
-                          selectIcon(
-                            icon,
-                            dispatch({
-                              type: state.customize ? 'ADD_MULTIPLE_ICONS' : '',
-                              selection: icon.name
-                            })
-                          )
-                        }
-                      />
+                      isActive(icon.name,state) ? (
+                        <div ref={activeIconRef}>
+                          <Icon
+                            size={36}
+                            active={isActive(icon.name, state)}
+                            key={icon.name}
+                            name={icon.name}
+                            iconsTheme={state.iconsTheme}
+                            action={() =>
+                              selectIcon(
+                                icon,
+                                dispatch({
+                                  type: state.customize ? 'ADD_MULTIPLE_ICONS' : '',
+                                  selection: icon.name
+                                })
+                              )
+                            }
+                          />
+                        </div>
+                      ) : (
+                        <Icon
+                          size={36}
+                          active={isActive(icon.name, state)}
+                          key={icon.name}
+                          name={icon.name}
+                          iconsTheme={state.iconsTheme}
+                          action={() =>
+                            selectIcon(
+                              icon,
+                              dispatch({
+                                type: state.customize ? 'ADD_MULTIPLE_ICONS' : '',
+                                selection: icon.name
+                              })
+                            )
+                          }
+                        />
+                      )
                     ))}
                   </div>
                 </div>

From c60f07259c2d7e8e4275e9d00302c5df69542dfb Mon Sep 17 00:00:00 2001
From: ayushsatyam146 <ayushsatyam146@gmail.com>
Date: Fri, 28 Jan 2022 02:31:04 +0530
Subject: [PATCH 2/3] minor linting changes

---
 src/App.js              | 18 +++++++++---------
 src/modules/IconsSet.js | 30 +++++++++++++++++-------------
 2 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/src/App.js b/src/App.js
index 579ac244..e6532fc6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -22,7 +22,7 @@ import Footer from './components/Footer'
 import ThankYou from './components/ThankYou'
 import ScrollToTopBtn from './components/ScrollToTop'
 import AppContext from './utils/AppContext'
-import CookiesBanner from './components/CookiesBanner' 
+import CookiesBanner from './components/CookiesBanner'
 
 const tagManagerArgs = {
   gtmId: GTM
@@ -38,14 +38,14 @@ const App = () => {
         <Navigation />
         <div className='app-container'>
           <Router primary={false}>
-              <Home path='/' />
-              <Docs path='/docs' />
-              <CookiesPage path='/cookies-policy' />
-              <ThankYou path='/thankyou' />
-              <PageNotFound path='*' />
-              <AboutPage path='/about' />
-              <TeamPage path='/team' />
-              <Cheatsheet path='/cheatsheet' />
+            <Home path='/' />
+            <Docs path='/docs' />
+            <CookiesPage path='/cookies-policy' />
+            <ThankYou path='/thankyou' />
+            <PageNotFound path='*' />
+            <AboutPage path='/about' />
+            <TeamPage path='/team' />
+            <Cheatsheet path='/cheatsheet' />
           </Router>
           <ScrollToTopBtn />
         </div>
diff --git a/src/modules/IconsSet.js b/src/modules/IconsSet.js
index fb5009df..c679edb0 100644
--- a/src/modules/IconsSet.js
+++ b/src/modules/IconsSet.js
@@ -28,13 +28,13 @@ const IconsSet = (props) => {
   const [selectMultiple, setSelectMultiple] = useState(true)
   const [emptySearchResult, setEmptySearchResult] = useState(false)
   const [suggestedString, setSuggestedString] = useState('')
- 
-  const activeIconRef = useRef(null) 
-  useEffect(()=> {
-    if(iconSelected!=='') {
-      window.addEventListener('DOMContentLoaded', ()=> {
-        window.scrollTo(0, activeIconRef.current.offsetTop);
-      });
+
+  const activeIconRef = useRef(null)
+  useEffect(() => {
+    if (iconSelected !== '') {
+      window.addEventListener('DOMContentLoaded', () => {
+        window.scrollTo(0, activeIconRef.current.offsetTop)
+      })
     }
   })
 
@@ -439,9 +439,9 @@ const IconsSet = (props) => {
               return categoryObject.icons.length > 0 ? (
                 <div key={index}>
                   <h4 className='category'>{categoryObject.category}</h4>
-                  <div className='icons-list'>  
-                    {categoryObject.icons.map((icon, i) => (
-                      isActive(icon.name,state) ? (
+                  <div className='icons-list'>
+                    {categoryObject.icons.map((icon, i) =>
+                      isActive(icon.name, state) ? (
                         <div ref={activeIconRef}>
                           <Icon
                             size={36}
@@ -453,7 +453,9 @@ const IconsSet = (props) => {
                               selectIcon(
                                 icon,
                                 dispatch({
-                                  type: state.customize ? 'ADD_MULTIPLE_ICONS' : '',
+                                  type: state.customize
+                                    ? 'ADD_MULTIPLE_ICONS'
+                                    : '',
                                   selection: icon.name
                                 })
                               )
@@ -471,14 +473,16 @@ const IconsSet = (props) => {
                             selectIcon(
                               icon,
                               dispatch({
-                                type: state.customize ? 'ADD_MULTIPLE_ICONS' : '',
+                                type: state.customize
+                                  ? 'ADD_MULTIPLE_ICONS'
+                                  : '',
                                 selection: icon.name
                               })
                             )
                           }
                         />
                       )
-                    ))}
+                    )}
                   </div>
                 </div>
               ) : (

From 3122a43b2643a2008aac3302e3995929b3d65cd9 Mon Sep 17 00:00:00 2001
From: ayushsatyam146 <ayushsatyam146@gmail.com>
Date: Fri, 28 Jan 2022 10:59:41 +0530
Subject: [PATCH 3/3] fixed share by tag

---
 src/modules/IconsSet.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/modules/IconsSet.js b/src/modules/IconsSet.js
index c679edb0..a920d0e9 100644
--- a/src/modules/IconsSet.js
+++ b/src/modules/IconsSet.js
@@ -137,7 +137,7 @@ const IconsSet = (props) => {
         tab === 'Static Icons'
           ? 'TOGGLE_SEARCH_REGULAR_ICONS'
           : 'TOGGLE_SEARCH_ANIMATED_ICONS',
-      search: ''
+      search: selectMultiple ? searchValue : ''
     })
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tab, dispatch, selectMultiple])
@@ -166,7 +166,7 @@ const IconsSet = (props) => {
   const setTagInSearch = () => {
     return dispatch({
       type: 'TOGGLE_SEARCH_REGULAR_ICONS',
-      search: ''
+      search: urlTagName
     })
   }
 
@@ -209,7 +209,7 @@ const IconsSet = (props) => {
         tab === 'Static Icons'
           ? 'TOGGLE_SEARCH_REGULAR_ICONS'
           : 'TOGGLE_SEARCH_ANIMATED_ICONS',
-      search: ''
+      search: suggestedString
     })
     setSearchValue(suggestedString)
   }