Skip to content

Commit 8c303e7

Browse files
Utkarsh-123githubUtkarsh-123github
authored
Merge pull request #1909 from vishwansh01/1902/Replace-multiple-useState-hooks-for-logos
Replace multiple useState hooks for logos
2 parents dcf4ea4 + 48cfe74 commit 8c303e7

File tree

1 file changed

+77
-89
lines changed

1 file changed

+77
-89
lines changed

‎pages/index.page.tsx‎

Lines changed: 77 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect, useState } from 'react';
1+
import React, { useEffect, useMemo, useState } from 'react';
22
import { getLayout } from '../components/SiteLayout';
33
import { DocSearch } from '@docsearch/react';
44
import fs from 'fs';
@@ -93,79 +93,67 @@ const Home = (props: any) => {
9393
const timeToRead = Math.ceil(readingTime(blogPosts[0].content).minutes);
9494
const { resolvedTheme } = useTheme();
9595

96-
const [asyncapi_logo, setAsyncapi_logo] = useState('');
97-
const [vpsserver_logo, setVPSserver_logo] = useState('');
98-
const [airbnb_logo, setAirbnb_logo] = useState('');
99-
const [postman_logo, setPostman_logo] = useState('');
100-
const [itflashcards_logo, setItflashcards_logo] = useState('');
101-
const [route4me_logo, setRoute4me_logo] = useState('');
102-
const [n8n_logo, setN8n_logo] = useState('');
103-
const [endjin_logo, setEndjin_logo] = useState('');
104-
const [llc_logo, setLlc_logo] = useState('');
105-
const [common_room_logo, setCommon_room_logo] = useState('');
106-
const [slack_logo, setSlack_logo] = useState('');
107-
const [ccopter_logo, setCCopter_logo] = useState('');
10896
const [isClient, setIsClient] = useState(false);
109-
const [octue_logo, setOctue_logo] = useState('');
110-
const [apideck_logo, setApideck_logo] = useState('');
111-
const [rxdb_logo, setRxdb_logo] = useState('');
112-
const [wda_logo, setWDA_logo] = useState('');
113-
const [anon_logo, setAnon_logo] = useState('');
114-
const [sourcemeta_logo, setSourcemeta_logo] = useState('');
115-
const [dottxt_logo, setDottxt_logo] = useState('');
116-
const [supadata_logo, setSupadata_logo] = useState('');
117-
const [devevents_logo, setDevevents_logo] = useState('');
11897

11998
useEffect(() => {
12099
// Ensure the component is only rendered client-side
121100
setIsClient(true);
122101
}, []);
123-
useEffect(() => {
124-
if (resolvedTheme === 'dark') {
125-
setAsyncapi_logo('/img/logos/dark-mode/asyncapi_white.svg');
126-
setAirbnb_logo('/img/logos/dark-mode/airbnb_white.png');
127-
setPostman_logo('/img/logos/usedby/postman-white.png');
128-
setEndjin_logo('/img/logos/sponsors/endjin-logo.svg');
129-
setLlc_logo('/img/logos/dark-mode/llc_white.svg');
130-
setCommon_room_logo('/img/logos/dark-mode/common-room_white.svg');
131-
setSlack_logo('/img/logos/dark-mode/slack_white.svg');
132-
setVPSserver_logo('/img/logos/sponsors/vps-server-logo.svg');
133-
setItflashcards_logo('/img/logos/sponsors/it_flashcards-white.svg');
134-
setRoute4me_logo('/img/logos/sponsors/route4me-logo-dark.svg');
135-
setN8n_logo('/img/logos/sponsors/n8n-logo-dark.svg');
136-
setCCopter_logo('/img/logos/sponsors/copycopter-white.png');
137-
setOctue_logo('/img/logos/sponsors/octue-white.svg');
138-
setApideck_logo('/img/logos/sponsors/apideck-white.svg');
139-
setRxdb_logo('/img/logos/sponsors/rxdb.svg');
140-
setWDA_logo('/img/logos/sponsors/wda-dark.svg');
141-
setAnon_logo('/img/logos/sponsors/anon-white.png');
142-
setSourcemeta_logo('/img/logos/sponsors/sourcemeta-logo-light.svg');
143-
setDottxt_logo('/img/logos/sponsors/dottxt-logo-white.svg');
144-
setSupadata_logo('/img/logos/sponsors/supadata-logo-light.svg');
145-
setDevevents_logo('/img/logos/dark-mode/dev_events_logo.png');
146-
} else {
147-
setAsyncapi_logo('/img/logos/sponsors/asyncapi-logo-dark.svg');
148-
setAirbnb_logo('/img/logos/sponsors/airbnb-logo.png');
149-
setPostman_logo('/img/logos/sponsors/postman_logo-orange.svg');
150-
setEndjin_logo('/img/logos/sponsors/endjin-logo.svg');
151-
setLlc_logo('/img/logos/sponsors/llc-logo.svg');
152-
setCommon_room_logo('/img/logos/supported/common-room.svg');
153-
setSlack_logo('/img/logos/supported/slack-logo.svg');
154-
setVPSserver_logo('/img/logos/sponsors/vps-server-logo.svg');
155-
setItflashcards_logo('/img/logos/sponsors/it_flashcards.svg');
156-
setRoute4me_logo('/img/logos/sponsors/route4me-logo-white.svg');
157-
setN8n_logo('/img/logos/sponsors/n8n-logo-white.svg');
158-
setCCopter_logo('/img/logos/sponsors/copycopter.png');
159-
setOctue_logo('/img/logos/sponsors/octue-black.svg');
160-
setApideck_logo('/img/logos/sponsors/apideck.svg');
161-
setRxdb_logo('/img/logos/sponsors/rxdb.svg');
162-
setWDA_logo('/img/logos/sponsors/wda.svg');
163-
setAnon_logo('/img/logos/sponsors/anon-black.png');
164-
setSourcemeta_logo('/img/logos/sponsors/sourcemeta-logo-dark.svg');
165-
setSupadata_logo('/img/logos/sponsors/supadata-logo-dark.svg');
166-
setDottxt_logo('/img/logos/sponsors/dottxt-logo-dark.svg');
167-
}
168-
}, [resolvedTheme]);
102+
const LOGOS_PATHS = {
103+
darkLogos: {
104+
asyncapi: '/img/logos/dark-mode/asyncapi_white.svg',
105+
airbnb: '/img/logos/dark-mode/airbnb_white.png',
106+
postman: '/img/logos/usedby/postman-white.png',
107+
endjin: '/img/logos/sponsors/endjin-logo.svg',
108+
llc: '/img/logos/dark-mode/llc_white.svg',
109+
common_room: '/img/logos/dark-mode/common-room_white.svg',
110+
slack: '/img/logos/dark-mode/slack_white.svg',
111+
vpsserver: '/img/logos/sponsors/vps-server-logo.svg',
112+
itflashcards: '/img/logos/sponsors/it_flashcards-white.svg',
113+
route4me: '/img/logos/sponsors/route4me-logo-dark.svg',
114+
n8n: '/img/logos/sponsors/n8n-logo-dark.svg',
115+
ccopter: '/img/logos/sponsors/copycopter-white.png',
116+
octue: '/img/logos/sponsors/octue-white.svg',
117+
apideck: '/img/logos/sponsors/apideck-white.svg',
118+
rxdb: '/img/logos/sponsors/rxdb.svg',
119+
wda: '/img/logos/sponsors/wda-dark.svg',
120+
anon: '/img/logos/sponsors/anon-white.png',
121+
sourcemeta: '/img/logos/sponsors/sourcemeta-logo-light.svg',
122+
dottxt: '/img/logos/sponsors/dottxt-logo-white.svg',
123+
supadata: '/img/logos/sponsors/supadata-logo-light.svg',
124+
devevents: '/img/logos/dark-mode/dev_events_logo.png',
125+
},
126+
lightLogos: {
127+
asyncapi: '/img/logos/sponsors/asyncapi-logo-dark.svg',
128+
airbnb: '/img/logos/sponsors/airbnb-logo.png',
129+
postman: '/img/logos/sponsors/postman_logo-orange.svg',
130+
endjin: '/img/logos/sponsors/endjin-logo.svg',
131+
llc: '/img/logos/sponsors/llc-logo.svg',
132+
common_room: '/img/logos/supported/common-room.svg',
133+
slack: '/img/logos/supported/slack-logo.svg',
134+
vpsserver: '/img/logos/sponsors/vps-server-logo.svg',
135+
itflashcards: '/img/logos/sponsors/it_flashcards.svg',
136+
route4me: '/img/logos/sponsors/route4me-logo-white.svg',
137+
n8n: '/img/logos/sponsors/n8n-logo-white.svg',
138+
ccopter: '/img/logos/sponsors/copycopter.png',
139+
octue: '/img/logos/sponsors/octue-black.svg',
140+
apideck: '/img/logos/sponsors/apideck.svg',
141+
rxdb: '/img/logos/sponsors/rxdb.svg',
142+
wda: '/img/logos/sponsors/wda.svg',
143+
anon: '/img/logos/sponsors/anon-black.png',
144+
sourcemeta: '/img/logos/sponsors/sourcemeta-logo-dark.svg',
145+
supadata: '/img/logos/sponsors/supadata-logo-dark.svg',
146+
dottxt: '/img/logos/sponsors/dottxt-logo-dark.svg',
147+
devevents: '/img/logos/dark-mode/dev_events_logo.png',
148+
},
149+
};
150+
151+
const logos = useMemo(
152+
() =>
153+
LOGOS_PATHS[resolvedTheme == 'dark' ? 'darkLogos' : 'lightLogos'] ||
154+
LOGOS_PATHS.lightLogos,
155+
[resolvedTheme],
156+
);
169157
return (
170158
<div>
171159
<div className='flex flex-col items-center'>
@@ -692,7 +680,7 @@ const Home = (props: any) => {
692680
{isClient && (
693681
<>
694682
<Image
695-
src={asyncapi_logo}
683+
src={logos.asyncapi}
696684
className='w-44 transition-transform duration-300 hover:scale-105'
697685
width={176}
698686
height={100}
@@ -709,7 +697,7 @@ const Home = (props: any) => {
709697
{isClient && (
710698
<>
711699
<Image
712-
src={airbnb_logo}
700+
src={logos.airbnb}
713701
className='w-44 transition-transform duration-300 hover:scale-105'
714702
width={176}
715703
height={100}
@@ -726,7 +714,7 @@ const Home = (props: any) => {
726714
{isClient && (
727715
<>
728716
<Image
729-
src={postman_logo}
717+
src={logos.postman}
730718
className='w-44 transition-transform duration-300 hover:scale-105'
731719
width={176}
732720
height={100}
@@ -739,7 +727,7 @@ const Home = (props: any) => {
739727
{isClient && (
740728
<>
741729
<Image
742-
src={endjin_logo}
730+
src={logos.endjin}
743731
className='w-44 transition-transform duration-300 hover:scale-105'
744732
width={176}
745733
height={100}
@@ -752,7 +740,7 @@ const Home = (props: any) => {
752740
{isClient && (
753741
<>
754742
<Image
755-
src={llc_logo}
743+
src={logos.llc}
756744
className='w-44 transition-transform duration-300 hover:scale-105'
757745
width={176}
758746
height={100}
@@ -769,7 +757,7 @@ const Home = (props: any) => {
769757
{isClient && (
770758
<>
771759
<Image
772-
src={vpsserver_logo}
760+
src={logos.vpsserver}
773761
className='w-44 transition-transform duration-300 hover:scale-105'
774762
width={176}
775763
height={100}
@@ -786,7 +774,7 @@ const Home = (props: any) => {
786774
{isClient && (
787775
<>
788776
<Image
789-
src={itflashcards_logo}
777+
src={logos.itflashcards}
790778
className='w-44 transition-transform duration-300 hover:scale-105'
791779
width={176}
792780
height={100}
@@ -803,7 +791,7 @@ const Home = (props: any) => {
803791
{isClient && (
804792
<>
805793
<Image
806-
src={route4me_logo}
794+
src={logos.route4me}
807795
className='w-44 transition-transform duration-300 hover:scale-105'
808796
width={176}
809797
height={100}
@@ -816,7 +804,7 @@ const Home = (props: any) => {
816804
{isClient && (
817805
<>
818806
<Image
819-
src={n8n_logo}
807+
src={logos.n8n}
820808
className='w-44 transition-transform duration-300 hover:scale-105'
821809
width={176}
822810
height={100}
@@ -829,7 +817,7 @@ const Home = (props: any) => {
829817
{isClient && (
830818
<>
831819
<Image
832-
src={ccopter_logo}
820+
src={logos.ccopter}
833821
className='w-44 transition-transform duration-300 hover:scale-105'
834822
width={176}
835823
height={100}
@@ -840,7 +828,7 @@ const Home = (props: any) => {
840828
</a>
841829
<a href='https://www.octue.com/' target='_blank' rel='noreferrer'>
842830
<img
843-
src={octue_logo}
831+
src={logos.octue}
844832
className='w-44 transition-transform duration-300 hover:scale-105'
845833
/>
846834
</a>
@@ -850,7 +838,7 @@ const Home = (props: any) => {
850838
rel='noreferrer'
851839
>
852840
<img
853-
src={apideck_logo}
841+
src={logos.apideck}
854842
className='w-44 transition-transform duration-300 hover:scale-105'
855843
alt='The Realtime Unified API
856844
for Accounting integrations'
@@ -862,7 +850,7 @@ for Accounting integrations'
862850
rel='noreferrer'
863851
>
864852
<img
865-
src={rxdb_logo}
853+
src={logos.rxdb}
866854
className='w-44 transition-transform duration-300 hover:scale-105'
867855
alt='The local Database for JavaScript Applications'
868856
/>
@@ -873,7 +861,7 @@ for Accounting integrations'
873861
rel='noreferrer'
874862
>
875863
<img
876-
src={wda_logo}
864+
src={logos.wda}
877865
className='w-44 transition-transform duration-300 hover:scale-105'
878866
alt='best website design agencies'
879867
/>
@@ -884,21 +872,21 @@ for Accounting integrations'
884872
rel='noreferrer'
885873
>
886874
<img
887-
src={anon_logo}
875+
src={logos.anon}
888876
className='w-44 transition-transform duration-300 hover:scale-105'
889877
alt='Instagram Story Viewer'
890878
/>
891879
</a>
892880
<a href='https://supadata.ai/' target='_blank' rel='noreferrer'>
893881
<img
894-
src={supadata_logo}
882+
src={logos.supadata}
895883
className='w-44 transition-transform duration-300 hover:scale-105'
896884
alt='supadata logo'
897885
/>
898886
</a>
899887
<a href='https://dottxt.ai/' target='_blank' rel='noreferrer'>
900888
<img
901-
src={dottxt_logo}
889+
src={logos.dottxt}
902890
className='w-44 transition-transform duration-300 hover:scale-105'
903891
alt='dottxt logo'
904892
/>
@@ -909,7 +897,7 @@ for Accounting integrations'
909897
rel='noreferrer'
910898
>
911899
<img
912-
src={sourcemeta_logo}
900+
src={logos.sourcemeta}
913901
className='w-44 transition-transform duration-300 hover:scale-105'
914902
alt='dottxt logo'
915903
/>
@@ -959,7 +947,7 @@ for Accounting integrations'
959947
{isClient && (
960948
<>
961949
<Image
962-
src={devevents_logo}
950+
src={logos.devevents}
963951
className='w-48 md:w-56 transition-transform duration-300 hover:scale-105'
964952
width={192}
965953
height={224}
@@ -996,7 +984,7 @@ for Accounting integrations'
996984
{isClient && (
997985
<>
998986
<Image
999-
src={common_room_logo}
987+
src={logos.common_room}
1000988
className='w-48 md:w-56'
1001989
width={192}
1002990
height={224}
@@ -1009,7 +997,7 @@ for Accounting integrations'
1009997
{isClient && (
1010998
<>
1011999
<Image
1012-
src={slack_logo}
1000+
src={logos.slack}
10131001
className=' w-24 md:w-32'
10141002
width={96}
10151003
height={128}

0 commit comments

Comments
 (0)