Remove unused code and add AOS animations for Learning Hub

Removed unused `SubscribeForm` components and simplified routing logic. Introduced AOS animations across the Learning Hub for enhanced UI interactions. Updated constants and sorting logic to improve usability and maintain consistency.
rarimo · Feb 21, 2025 · ffcc4a0 · ffcc4a0
1 parent ed822cf
commit ffcc4a0
Show file tree

Hide file tree

Showing 10 changed files with 60 additions and 36 deletions.
diff --git a/nginx.conf b/nginx.conf
@@ -30,10 +30,10 @@ http {
   client_body_timeout 10;
   reset_timedout_connection on;
   send_timeout 2;
-  # Задание буфера для заголовка и тела запроса
+  # Setting buffer size for request headers and body
   client_header_buffer_size       2k;
   client_body_buffer_size         256k;
-  # Ограничение на размер тела запроса
+  # Restriction on the size of the request body
   client_max_body_size            12m;
 
   sendfile       on;
@@ -99,8 +99,5 @@ http {
       try_files $uri $uri/ /index.html;
 
     }
-
-
-}
-
+  }
 }
diff --git a/src/common/HomeSidebar.tsx b/src/common/HomeSidebar.tsx
@@ -1,5 +1,4 @@
 import Link from 'next/link'
-import { usePathname } from 'next/navigation'
 import { AnchorHTMLAttributes, DetailedHTMLProps, HTMLAttributes } from 'react'
 
 import DiscordLineIcon from '@/assets/icons/discord-line-icon.svg'
@@ -94,10 +93,6 @@ export function AnchorsList({
   className,
   ...rest
 }: AnchorsListProps) {
-  const pathname = usePathname()
-
-  const isHomepage = pathname === '/'
-
   const sectionAnchors = [
     { title: 'Home', anchor: Anchors.Home },
     { title: 'Ecosystem', anchor: Anchors.Ecosystem },
@@ -111,7 +106,7 @@ export function AnchorsList({
         <AnchorNavItem
           key={anchor}
           title={title}
-          href={`${isHomepage ? '' : '/'}#${anchor}`}
+          href={`/#${anchor}`}
           isActive={activeLink === anchor}
           onClick={() => setActiveLink?.(anchor)}
         />

diff --git a/src/components/LearningHub/components/HeroSection.tsx b/src/components/LearningHub/components/HeroSection.tsx
@@ -1,6 +1,5 @@
 import type { HTMLAttributes } from 'react'
 
-import SubscribeForm from '@/common/SubscribeForm'
 import { cn } from '@/theme/utils'
 import { UiContainer } from '@/ui'
 
@@ -34,8 +33,6 @@ export default function HeroSection({ className, ...rest }: Props) {
       <h2 className='mt-1 text-center text-textPrimary typography-h1'>
         Learn about <br /> Rarimo
       </h2>
-
-      <SubscribeForm />
     </UiContainer>
   )
 }
diff --git a/src/components/LearningHub/components/LearningHubNavbar.tsx b/src/components/LearningHub/components/LearningHubNavbar.tsx
@@ -38,7 +38,7 @@ export default function LearningHubNavbar({ className, ...rest }: Props) {
       )}
     >
       <Link href={'/'} className={cn('hidden', 'sm:flex')}>
-        <LogoIcon />
+        <LogoIcon data-aos='fade-down' />
       </Link>
       <div className={cn('flex w-full', 'sm:hidden')}>
         <HomeHeader />
@@ -98,7 +98,9 @@ export default function LearningHubNavbar({ className, ...rest }: Props) {
           </div>
         </div>
 
-        <ThemeSwitcher />
+        <div data-aos='fade-down'>
+          <ThemeSwitcher />
+        </div>
       </div>
     </div>
   )

diff --git a/src/components/LearningHub/components/LearningHubPosts/components/LearningHubFilters.tsx b/src/components/LearningHub/components/LearningHubPosts/components/LearningHubFilters.tsx
@@ -24,17 +24,17 @@ const localizeCategory = (category: Categories): string => {
   return (
     {
       [Categories.All]: 'All',
-      [Categories.Blog]: 'Blog',
       [Categories.Videos]: 'Videos',
+      [Categories.Blog]: 'Blog',
     }[category] ?? ''
   )
 }
 
 const localizeSortBy = (sortBy: SortOptions): string => {
   return (
     {
-      [SortOptions.Date]: 'Date',
       [SortOptions.Newest]: 'Newest',
+      [SortOptions.Oldest]: 'Oldest',
     }[sortBy] ?? ''
   )
 }
@@ -49,7 +49,7 @@ export default function LearningHubFilters({ className, ...rest }: Props) {
   )
 
   const [sortedBy, setSortedBy] = useState(
-    searchParams.get(QueryFilters.Sort) || SortOptions.Date,
+    searchParams.get(QueryFilters.Sort) || SortOptions.Newest,
   )
 
   const navigateWithSanitizedSearchParams = useCallback(
@@ -64,7 +64,7 @@ export default function LearningHubFilters({ className, ...rest }: Props) {
       }
 
       setSortedBy(sort)
-      if (sort !== SortOptions.Date) {
+      if (sort !== SortOptions.Oldest) {
         params.set(QueryFilters.Sort, sort)
       } else {
         params.delete(QueryFilters.Sort)
@@ -89,8 +89,8 @@ export default function LearningHubFilters({ className, ...rest }: Props) {
           <button
             key={idx}
             className={cn(
-              'rounded-full px-4 py-2 text-textPrimary transition-colors typography-buttonLarge',
-              activeCategory === el && 'bg-componentPrimary',
+              'rounded-full px-4 py-2 text-textSecondary transition-colors typography-buttonLarge',
+              activeCategory === el && 'bg-componentPrimary text-textPrimary',
             )}
             onClick={() => navigateWithSanitizedSearchParams(el, sortedBy)}
           >

diff --git a/src/components/LearningHub/components/LearningHubPosts/index.tsx b/src/components/LearningHub/components/LearningHubPosts/index.tsx
@@ -55,6 +55,7 @@ export default async function LearningHubPosts({
 
     const response = await fetch(
       `${config.learningHubApiUrl}/posts?${queryFilters.toString()}`,
+      { next: { revalidate: config.learningHubApiCacheInvalidateDur } },
     )
 
     return response.json()
@@ -64,12 +65,21 @@ export default async function LearningHubPosts({
 
   return (
     <div className='flex flex-col'>
-      <LearningHubFilters className='mt-10' />
+      <LearningHubFilters
+        className='mt-10'
+        data-aos='fade-up'
+        data-aos-delay='700'
+      />
 
       {posts?.length ? (
-        <List className='mt-10' posts={posts} />
+        <List
+          className='mt-10'
+          posts={posts}
+          data-aos='fade-up'
+          data-aos-delay='900'
+        />
       ) : (
-        <div className='my-14 flex'>
+        <div className='my-14 flex' data-aos='fade-up' data-aos-delay='900'>
           <span className='mx-auto text-center text-textPrimary typography-h4'>
             No posts found
           </span>

diff --git a/src/components/LearningHub/constants.ts b/src/components/LearningHub/constants.ts
@@ -5,7 +5,7 @@ export enum Categories {
 }
 
 export enum SortOptions {
-  Date = 'date:asc',
+  Oldest = 'date:asc',
   Newest = 'date:desc',
 }
 

diff --git a/src/components/LearningHub/index.tsx b/src/components/LearningHub/index.tsx
@@ -25,7 +25,11 @@ export default function LearningHub({
           'px-4 md:px-6 lg:px-0',
         )}
       >
-        <HeroSection className='mt-6 px-0 py-0 md:px-0 md:py-0' />
+        <HeroSection
+          className='mt-6 px-0 py-0 md:px-0 md:py-0'
+          data-aos='fade-in'
+          data-aos-delay='500'
+        />
 
         <Suspense>
           <LearningHubPosts searchParams={searchParams} />

diff --git a/src/components/LearningHubPost/index.tsx b/src/components/LearningHubPost/index.tsx
@@ -3,7 +3,6 @@ import DOMPurify from 'isomorphic-dompurify'
 import { ArrowLeft, Calendar } from 'lucide-react'
 import Link from 'next/link'
 
-import SubscribeForm from '@/common/SubscribeForm'
 import LearningHubFooter from '@/components/LearningHub/components/LearningHubFooter'
 import LearningHubNavbar from '@/components/LearningHub/components/LearningHubNavbar'
 import { LearningHubPost } from '@/components/LearningHub/types'
@@ -22,7 +21,10 @@ export default async function LearningHubPostPage({
 }: {
   params: { id: string }
 }) {
-  const response = await fetch(`${config.learningHubApiUrl}/posts/${params.id}`)
+  const response = await fetch(
+    `${config.learningHubApiUrl}/posts/${params.id}`,
+    { next: { revalidate: config.learningHubApiCacheInvalidateDur } },
+  )
 
   if (!response.ok) {
     return <div>Error</div>
@@ -48,6 +50,7 @@ export default async function LearningHubPostPage({
           <Link
             href={'/learning-hub'}
             className={cn('p-4', 'md:absolute md:left-0 md:top-0 md:p-0')}
+            data-aos='fade-right'
           >
             <ArrowLeft className='size-4 text-textSecondary' />
           </Link>
@@ -63,6 +66,8 @@ export default async function LearningHubPostPage({
                     src={`https://www.youtube.com/embed/${new URL(post.attributes.videoUrl).searchParams.get('v') || post.attributes.videoUrl.split('/').pop()}`}
                     allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
                     allowFullScreen
+                    data-aos='fade-up'
+                    data-aos-delay='600'
                   />
                 ) : (
                   <video
@@ -81,13 +86,23 @@ export default async function LearningHubPostPage({
                 src={post.attributes.coverImage}
                 alt={post.attributes.title}
                 className='aspect-[671/336] rounded-2xl'
+                data-aos='fade-up'
+                data-aos-delay='600'
               />
             )}
 
-            <h2 className='mt-6 text-textPrimary typography-h2'>
+            <h2
+              className='mt-6 text-textPrimary typography-h2'
+              data-aos='fade-up'
+              data-aos-delay='800'
+            >
               {post.attributes.title}
             </h2>
-            <div className='mb-3 mt-4 flex items-center gap-2'>
+            <div
+              className='mb-3 mt-4 flex items-center gap-2'
+              data-aos='fade-up'
+              data-aos-delay='1000'
+            >
               <Calendar className={'size-4 text-textSecondary'} />
               <span className='text-textSecondary typography-subtitle5'>
                 {time(post.attributes.date).format('MMM DD, YYYY')}
@@ -98,16 +113,21 @@ export default async function LearningHubPostPage({
               id='post-content'
               className='mt-5 w-full max-w-full overflow-hidden'
               dangerouslySetInnerHTML={createMarkup(post.attributes.content)}
+              data-aos='fade-up'
+              data-aos-delay='1200'
             />
 
-            <div className='mt-10 flex items-center gap-4 rounded-xl bg-componentPrimary p-4'>
+            <div
+              className='mt-10 flex items-center gap-4 rounded-xl bg-componentPrimary p-4'
+              data-aos='fade-up'
+            >
               <img
                 className='aspect-square size-12 rounded-full object-cover object-center'
                 src={post.attributes.author.data.attributes.avatar}
                 alt={post.attributes.author.data.attributes.name}
               />
 
-              <div className='flex flex-col'>
+              <div className='flex flex-col' data-aos='fade-up'>
                 <span className='text-textPrimary typography-subtitle3'>
                   {post.attributes.author.data.attributes.name}
                 </span>
@@ -120,8 +140,6 @@ export default async function LearningHubPostPage({
 
           <UiHorizontalDivider className='my-12' />
 
-          <SubscribeForm className='mx-auto mb-12' />
-
           <LearningHubFooter />
         </div>
       </div>

diff --git a/src/config.ts b/src/config.ts
@@ -17,4 +17,5 @@ export const config = {
     'https://play.google.com/store/apps/details?id=com.rarilabs.rarime',
 
   learningHubApiUrl: 'https://hub.rarimo.com/api',
+  learningHubApiCacheInvalidateDur: 60 * 60,
 }