Skip to content

Commit c7bacb7

Browse files
dishant0406dishant0406
committed
Refactor ResourceListBar component
1 parent f40ada1 commit c7bacb7

File tree

1 file changed

+100
-104
lines changed
  • lazyweb/components/desktop/ResourceListBar

1 file changed

+100
-104
lines changed

‎lazyweb/components/desktop/ResourceListBar/index.tsx

+100-104
Original file line numberDiff line numberDiff line change
@@ -1,155 +1,151 @@
11
type Props = {}
2-
import { useSelectedTab,useUserData,useAllResources, useCompleteResourceLength,useLoginModal } from 'hooks/Zustand';
2+
import { useSelectedTab, useUserData, useAllResources, useCompleteResourceLength, useLoginModal } from 'hooks/Zustand';
33
import { event } from 'nextjs-google-analytics';
44
import { useState, useEffect } from 'react';
5-
import {Tabs, Tab,} from "@nextui-org/react";
6-
import {Kbd} from "@nextui-org/react";
5+
import { Tabs, Tab, } from "@nextui-org/react";
6+
import { Kbd } from "@nextui-org/react";
77
import { useRouter } from 'next/router';
88

99
const ResourceListBar = (props: Props) => {
10-
const {session} = useUserData()
11-
const {setSelectedTab, selectedTab} = useSelectedTab()
12-
const {setAllResources,allResources} = useAllResources()
13-
const {completeResourceLength,setCompleteResourceLength} = useCompleteResourceLength()
14-
const {setIsLoginModalOpen} = useLoginModal()
10+
const { session } = useUserData()
11+
const { setSelectedTab, selectedTab } = useSelectedTab()
12+
const { setAllResources, allResources } = useAllResources()
13+
const { completeResourceLength, setCompleteResourceLength } = useCompleteResourceLength()
14+
const { setIsLoginModalOpen } = useLoginModal()
15+
const [isInitialized, setIsInitialized] = useState(false);
1516
const router = useRouter()
1617
const [tabs, setTabs] = useState([
1718
{
18-
id:1,
19-
name:'All Resources',
20-
slug:'all',
21-
selected:true
19+
id: 1,
20+
name: 'All Resources',
21+
slug: 'all',
22+
selected: true
2223
},
2324
{
24-
id:2,
25-
name:'Saved Resources',
26-
slug:'saved',
27-
selected:false
28-
},{
29-
id:3,
30-
name:'My Resources',
31-
slug:'my',
32-
selected:false
33-
},{
34-
id:4,
35-
name:'Publish',
36-
slug:'publish',
37-
selected:false
25+
id: 2,
26+
name: 'Saved Resources',
27+
slug: 'saved',
28+
selected: false
29+
}, {
30+
id: 3,
31+
name: 'My Resources',
32+
slug: 'my',
33+
selected: false
34+
}, {
35+
id: 4,
36+
name: 'Publish',
37+
slug: 'publish',
38+
selected: false
3839
}
3940
])
4041

41-
const selectionHandler = (id:number)=>{
42-
if(session){
43-
const newTabs = tabs.map(e=>{
42+
const selectionHandler = (id: number) => {
43+
if (session) {
44+
const newTabs = tabs.map(e => {
4445
return {
4546
...e,
46-
selected:false
47+
selected: false
4748
}
4849
})
49-
newTabs[id-1].selected = true
50-
setSelectedTab(newTabs[id-1].slug)
51-
setAllResources(newTabs[id-1].slug)
52-
setCompleteResourceLength(newTabs[id-1].slug)
53-
if(newTabs[id-1].slug === 'all'){
50+
newTabs[id - 1].selected = true
51+
setSelectedTab(newTabs[id - 1].slug)
52+
setAllResources(newTabs[id - 1].slug)
53+
setCompleteResourceLength(newTabs[id - 1].slug)
54+
if (newTabs[id - 1].slug === 'all') {
5455
router.replace({
5556
pathname: '/',
5657
}, undefined, { shallow: true })
57-
}else{
58+
} else {
5859
router.replace({
5960
pathname: '/',
60-
query: {
61+
query: {
6162
...router.query,
62-
tab: newTabs[id-1].slug
63-
},
63+
tab: newTabs[id - 1].slug
64+
},
6465
}, undefined, { shallow: true })
6566
}
6667
setTabs(newTabs)
67-
}else{
68+
} else {
6869
setIsLoginModalOpen(true)
6970
}
7071
}
7172

72-
useEffect(()=>{
73-
if(!localStorage.getItem('token') && router.query.tab){
74-
router.replace({
75-
pathname: '/',
76-
}, undefined, { shallow: true })
77-
}
7873

79-
if(localStorage.getItem('token') && !router.query.tab){
80-
router.replace({
81-
pathname: '/',
82-
query: {
83-
...router.query,
84-
tab: 'all'
85-
},
86-
}, undefined, { shallow: true })
87-
}
8874

89-
if(localStorage.getItem('token') && router.query.tab){
90-
const tab = tabs.find(e=>e.slug === router.query.tab)
91-
if(tab){
92-
selectionHandler(tab.id)
75+
useEffect(() => {
76+
// Only proceed if router.query is ready
77+
if (!isInitialized && Object.keys(router.query).length > 0) {
78+
setIsInitialized(true);
79+
80+
if (!localStorage.getItem('token') && router.query.tab) {
81+
router.replace('/', undefined, { shallow: true });
82+
} else if (localStorage.getItem('token') && !router.query.tab) {
83+
router.replace({
84+
pathname: '/',
85+
query: { ...router.query, tab: 'all' },
86+
}, undefined, { shallow: true });
87+
} else if (localStorage.getItem('token') && router.query.tab) {
88+
const tab = tabs.find(e => e.slug === router.query.tab);
89+
if (tab) {
90+
selectionHandler(tab.id);
91+
}
9392
}
94-
}
95-
96-
97-
if(session?.email){
98-
if(router.query.tab){
99-
const tab = tabs.find(e=>e.slug === router.query.tab)
100-
if(tab){
101-
selectionHandler(tab.id)
93+
94+
if (session?.email && router.query.tab) {
95+
const tab = tabs.find(e => e.slug === router.query.tab);
96+
if (tab) {
97+
selectionHandler(tab.id);
10298
}
10399
}
104100
}
105-
}
106-
,[session?.email])
101+
}, [session?.email, router.query, isInitialized]);
107102

108103

109-
useEffect(()=>{
104+
105+
useEffect(() => {
110106
window.scrollTo({
111107
top: 0,
112108
behavior: "smooth",
113109
});
114-
},[selectedTab])
110+
}, [selectedTab])
115111

116112
return (
117113
<div className="w-[100%] sticky mt-[0.5rem] items-center top-[70px] z-[2] bg-gray lazyweb-resource-list flex justify-start">
118-
<div className="flex flex-col ml-[1rem] py-[0.5rem]">
119-
<Tabs
120-
aria-label="Options"
121-
color='default'
122-
123-
variant='bordered'
124-
selectedKey={tabs.find(e=>e.selected)?.slug}
125-
onSelectionChange={(e)=>{
126-
const tab = tabs.find(ee=>ee.slug === e)
127-
if(tab){
128-
selectionHandler(tab.id)
114+
<div className="flex flex-col ml-[1rem] py-[0.5rem]">
115+
<Tabs
116+
aria-label="Options"
117+
color='default'
118+
119+
variant='bordered'
120+
selectedKey={tabs.find(e => e.selected)?.slug}
121+
onSelectionChange={(e) => {
122+
const tab = tabs.find(ee => ee.slug === e)
123+
if (tab) {
124+
selectionHandler(tab.id)
125+
}
126+
}}
127+
>
128+
{
129+
tabs.map((e, i) => {
130+
if (e.slug === 'publish' && !session?.isAdmin) return null
131+
return (
132+
<Tab key={e.slug} title={e.name}>
133+
</Tab>
134+
)
135+
})
129136
}
130-
}}
131-
>
132-
{
133-
tabs.map((e,i)=>{
134-
if(e.slug === 'publish' && !session?.isAdmin) return null
135-
return (
136-
<Tab key={e.slug} title={e.name}>
137-
</Tab>
138-
)
139-
})
140-
}
141-
</Tabs>
142-
</div>
137+
</Tabs>
138+
</div>
143139
<div className="flex scale-75 items-center ml-[0rem]">
144-
<kbd className="px-2 py-1 text-white bg-gray-900 border border-gray-700 rounded">
145-
ctrl
146-
</kbd>
147-
<span className="ml-2 text-trueGray-200">+</span>
148-
<kbd className="px-2 py-1 ml-2 text-white bg-gray-900 border border-gray-700 rounded">
149-
space
150-
</kbd>
151-
<span className="ml-2 text-trueGray-200">for AI search</span>
152-
</div>
140+
<kbd className="px-2 py-1 text-white bg-gray-900 border border-gray-700 rounded">
141+
ctrl
142+
</kbd>
143+
<span className="ml-2 text-trueGray-200">+</span>
144+
<kbd className="px-2 py-1 ml-2 text-white bg-gray-900 border border-gray-700 rounded">
145+
space
146+
</kbd>
147+
<span className="ml-2 text-trueGray-200">for AI search</span>
148+
</div>
153149
</div>
154150
)
155151
}

0 commit comments

Comments
 (0)