New tab component implementation and usage

src/pages/home/HomePage.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import cn from 'classnames';
+import { Tabs } from '~shared/ui/tabs';
 import { GlobalArticlesList } from '~widgets/global-articles-list';
 import { PopularTags } from '~widgets/popular-tags';
 import { UserArticlesList } from '~widgets/user-articles-list';
@@ -8,25 +8,22 @@ type HomePageProps = {
   auth?: boolean;
 };
 
-type TabsState = {
-  globalfeed?: boolean;
-  userfeed?: boolean;
-  tagfeed?: string;
-};
-
 export function HomePage(props: HomePageProps) {
   const { auth } = props;
 
-  const initTabsState: TabsState = {
-    ...(auth && { userfeed: true }),
-    ...(!auth && { globalfeed: true }),
-  };
+  const [activeTab, setActiveTab] = useState(auth ? 'userfeed' : 'globalfeed');
 
-  const [tabs, setTabs] = useState<TabsState>(initTabsState);
+  const [tag, setTag] = useState<string | null>(null);
 
-  const onUserfeedClick = () => setTabs({ userfeed: true });
-  const onGlobalfeedClick = () => setTabs({ globalfeed: true });
-  const onTabfeedClick = (tag: string) => setTabs({ tagfeed: tag });
+  const handleTabChange = (value: string) => {
+    if (value !== 'tagfeed') setTag(null);
+    setActiveTab(value);
+  };
+
+  const handleTagClick = (_tag: string) => {
+    setTag(_tag);
+    setActiveTab('tagfeed');
+  };
 
   return (
     <div className="home-page">
@@ -40,58 +37,33 @@ export function HomePage(props: HomePageProps) {
       <div className="container page">
         <div className="row">
           <div className="col-md-9">
-            <div className="feed-toggle">
-              <ul className="nav nav-pills outline-active">
-                {auth && (
-                  <li className="nav-item">
-                    <button
-                      className={cn('nav-link', { active: tabs.userfeed })}
-                      type="button"
-                      onClick={onUserfeedClick}
-                    >
-                      Your Feed
-                    </button>
-                  </li>
-                )}
-                <li className="nav-item">
-                  <button
-                    className={cn('nav-link', { active: tabs.globalfeed })}
-                    type="button"
-                    onClick={onGlobalfeedClick}
-                  >
-                    Global Feed
-                  </button>
-                </li>
-                {tabs.tagfeed && (
-                  <li className="nav-item">
-                    <button
-                      className={cn('nav-link', { active: tabs.tagfeed })}
-                      type="button"
-                    >
-                      #{tabs.tagfeed}
-                    </button>
-                  </li>
-                )}
-              </ul>
-            </div>
+            <Tabs keepUnmounted value={activeTab} onTabChange={handleTabChange}>
+              <div className="feed-toggle">
+                <Tabs.List>
+                  {auth && <Tabs.Tab value="userfeed">Your Feed</Tabs.Tab>}
+                  <Tabs.Tab value="globalfeed">Global Feed</Tabs.Tab>
+                  {tag && <Tabs.Tab value="tagfeed">#{tag}</Tabs.Tab>}
+                </Tabs.List>
+              </div>
 
-            {tabs.userfeed && (
-              <UserArticlesList query={{ limit: 10, offset: 0 }} />
-            )}
+              <Tabs.Panel value="userfeed">
+                <UserArticlesList query={{ limit: 10, offset: 0 }} />
+              </Tabs.Panel>
 
-            {tabs.globalfeed && (
-              <GlobalArticlesList query={{ limit: 10, offset: 0 }} />
-            )}
+              <Tabs.Panel value="globalfeed">
+                <GlobalArticlesList query={{ limit: 10, offset: 0 }} />
+              </Tabs.Panel>
 
-            {tabs.tagfeed && (
-              <GlobalArticlesList
-                query={{ limit: 10, offset: 0, tag: tabs.tagfeed }}
-              />
-            )}
+              <Tabs.Panel value="tagfeed">
+                <GlobalArticlesList
+                  query={{ limit: 10, offset: 0, tag: tag! }}
+                />
+              </Tabs.Panel>
+            </Tabs>
           </div>
 
           <div className="col-md-3">
-            <PopularTags onTagClick={onTabfeedClick} />
+            <PopularTags onTagClick={handleTagClick} />
           </div>
         </div>
       </div>

src/pages/profile/ProfilePage.tsx

@@ -1,32 +1,21 @@
 import { useState } from 'react';
-import cn from 'classnames';
 import { useParams } from 'react-router-dom';
+import { Tabs } from '~shared/ui/tabs';
 import { GlobalArticlesList } from '~widgets/global-articles-list';
 import { ProfileCard } from '~widgets/profile-card';
 
 type ProfilePageProps = {
   favorites?: boolean;
 };
 
-type TabsState = {
-  author?: string;
-  favorited?: string;
-};
-
 export function ProfilePage(props: ProfilePageProps) {
   const { favorites } = props;
 
   const { username } = useParams();
 
-  const initTabsState: TabsState = {
-    ...(favorites && { favorited: username }),
-    ...(!favorites && { author: username }),
-  };
-
-  const [tabs, setTabs] = useState<TabsState>(initTabsState);
-
-  const onAuthorfeedClick = () => setTabs({ author: username });
-  const onFavoritedfeedClick = () => setTabs({ favorited: username });
+  const [activeTab, setActiveTab] = useState(
+    favorites ? 'favoritedfeed' : 'authorfeed',
+  );
 
   return (
     <div className="profile-page">
@@ -35,40 +24,26 @@ export function ProfilePage(props: ProfilePageProps) {
       <div className="container">
         <div className="row">
           <div className="col-xs-12 col-md-10 offset-md-1">
-            <div className="articles-toggle">
-              <ul className="nav nav-pills outline-active">
-                <li className="nav-item">
-                  <button
-                    className={cn('nav-link', { active: tabs.author })}
-                    type="button"
-                    onClick={onAuthorfeedClick}
-                  >
-                    My Articles
-                  </button>
-                </li>
-                <li className="nav-item">
-                  <button
-                    className={cn('nav-link', { active: tabs.favorited })}
-                    type="button"
-                    onClick={onFavoritedfeedClick}
-                  >
-                    Favorited Articles
-                  </button>
-                </li>
-              </ul>
-            </div>
-
-            {tabs.author && (
-              <GlobalArticlesList
-                query={{ limit: 10, offset: 0, author: tabs.author }}
-              />
-            )}
-
-            {tabs.favorited && (
-              <GlobalArticlesList
-                query={{ limit: 10, offset: 0, favorited: tabs.favorited }}
-              />
-            )}
+            <Tabs keepUnmounted value={activeTab} onTabChange={setActiveTab}>
+              <div className="articles-toggle">
+                <Tabs.List>
+                  <Tabs.Tab value="authorfeed">My Articles</Tabs.Tab>
+                  <Tabs.Tab value="favoritedfeed">Favorited Articles</Tabs.Tab>
+                </Tabs.List>
+              </div>
+
+              <Tabs.Panel value="authorfeed">
+                <GlobalArticlesList
+                  query={{ limit: 10, offset: 0, author: username }}
+                />
+              </Tabs.Panel>
+
+              <Tabs.Panel value="favoritedfeed">
+                <GlobalArticlesList
+                  query={{ limit: 10, offset: 0, favorited: username }}
+                />
+              </Tabs.Panel>
+            </Tabs>
           </div>
         </div>
       </div>

src/shared/ui/tabs/Tab.tsx

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+import cn from 'classnames';
+import { useTabsContext } from './Tabs.context';
+
+type TabProps = {
+  value: string;
+  children?: ReactNode;
+};
+
+export function Tab(props: TabProps) {
+  const { value, children } = props;
+  const ctx = useTabsContext();
+
+  const isActive = value === ctx.value;
+
+  const activateTab = () => ctx.onTabChange(value);
+
+  return (
+    <li className="nav-item">
+      <button
+        className={cn('nav-link', { active: isActive })}
+        type="button"
+        onClick={activateTab}
+      >
+        {children}
+      </button>
+    </li>
+  );
+}

src/shared/ui/tabs/Tabs.context.ts

@@ -0,0 +1,20 @@
+import { createContext, useContext } from 'react';
+
+export type TabsContextProps = {
+  value: string;
+  onTabChange: (value: string) => void;
+  keepUnmounted: boolean;
+};
+
+export const TabsContext = createContext<TabsContextProps | null>(null);
+TabsContext.displayName = 'TabsContext';
+
+export function useTabsContext() {
+  const ctx = useContext(TabsContext);
+
+  if (!ctx) {
+    throw new Error('useTabsContext must be used within a <Tabs />');
+  }
+
+  return ctx;
+}

src/shared/ui/tabs/Tabs.tsx

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { Tab } from './Tab';
+import { TabsContextProps } from './Tabs.context';
+import { TabsList } from './TabsList';
+import { TabsPanel } from './TabsPanel';
+import { TabsProvider } from './TabsProvider';
+
+type TabsProps = TabsContextProps & {
+  children: ReactNode;
+};
+
+export function Tabs(props: TabsProps) {
+  const { value, onTabChange, keepUnmounted = false, children } = props;
+
+  return (
+    <TabsProvider
+      value={value}
+      onTabChange={onTabChange}
+      keepUnmounted={keepUnmounted}
+    >
+      {children}
+    </TabsProvider>
+  );
+}
+
+Tabs.List = TabsList;
+Tabs.Tab = Tab;
+Tabs.Panel = TabsPanel;

src/shared/ui/tabs/TabsList.tsx

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+
+type TabsListProps = {
+  children: ReactNode;
+};
+
+export function TabsList(props: TabsListProps) {
+  const { children } = props;
+
+  return <ul className="nav nav-pills outline-active">{children}</ul>;
+}

src/shared/ui/tabs/TabsPanel.tsx

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { useTabsContext } from './Tabs.context';
+
+type TabsPanelProps = {
+  value: string;
+  children: ReactNode;
+};
+
+export function TabsPanel(props: TabsPanelProps) {
+  const { value, children } = props;
+  const ctx = useTabsContext();
+
+  const active = ctx.value === value;
+
+  let content: ReactNode;
+
+  if (ctx.keepUnmounted) content = active ? children : null;
+  if (!ctx.keepUnmounted) content = children;
+
+  return <div style={{ display: !active ? 'none' : undefined }}>{content}</div>;
+}

src/shared/ui/tabs/TabsProvider.tsx

@@ -0,0 +1,21 @@
+import { ReactNode, useMemo } from 'react';
+import { TabsContext, TabsContextProps } from './Tabs.context';
+
+type TabsProviderProps = TabsContextProps & {
+  children: ReactNode;
+};
+
+export function TabsProvider(props: TabsProviderProps) {
+  const { value, onTabChange, keepUnmounted = false, children } = props;
+
+  const memoizedValue = useMemo(
+    () => ({ value, onTabChange, keepUnmounted }),
+    [keepUnmounted, onTabChange, value],
+  );
+
+  return (
+    <TabsContext.Provider value={memoizedValue}>
+      {children}
+    </TabsContext.Provider>
+  );
+}

src/shared/ui/tabs/index.ts

@@ -0,0 +1 @@
+export { Tabs } from './Tabs';