ماهو React Design Patterns?

 // app/_components/Card.tsx
export default function Card({ children }: { children: React.ReactNode }) {
  return <div className='card rounded-md'>{children}</div>;
}
Card.Title = function Title() {
  return (
    <div>
      <h3>Card Title</h3>
    </div>
  );
};
Card.Content = function Content({ children }: { children: React.ReactNode }) {
  return (
    <div>
      <p>{children}</p>
    </div>
  );
};
Card.Action = function Action() {
  return (
    <div>
      <button>Action</button>
    </div>
  );
};
Card.Footer = function Footer() {
  return (
    <div>
      <p>Card footer</p>
    </div>
  );
};

 // app/page.tsx
<Card>
  <Card.Title />
  <Card.Content>123</Card.Content>
  <Card.Action />
  <Card.Footer />
</Card>;

 // app/_Articles/_components/ArticlesState.tsx
import React from 'react';
const ArticlesState = ({ children }: { children: React.ReactNode }) => {
  return <div>{children}</div>;
};
ArticlesState.loading = function Loading() {
  return (
    <div>
      <h2> جار تحميل المقالات</h2>
    </div>
  );
};
ArticlesState.error = function Error() {
  return (
    <div>
      <h2>حدث خطأ في تحميل المقالات</h2>
    </div>
  );
};
ArticlesState.empty = function empty() {
  return (
    <section>
      <h2>لا يوجد مقالات بعد...</h2>
    </section>
  );
};
export default ArticlesState;

 // app/page.tsx
const Articles = dynamic(() => import('./_Articles/Articles'), {
  loading: () => (
    <ArticlesState>
      <ArticlesState.loading />
    </ArticlesState>
  ),
});

 // app/_Articles/Articles.tsx
'use client';
import axios from 'axios';
import { useInfiniteQuery } from '@tanstack/react-query';
import { useEffect } from 'react';
import { useInView } from 'react-intersection-observer';
import PresentationalArticles from './PresentationalArticles';
import { ArticlesResponse } from '@/types/Articles';
export default function Articles({
  initialArticles,
  tag,
}: {
  initialArticles: ArticlesResponse;
  tag?: string;
}) {
  const {
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    isLoading,
    isError,
  } = useInfiniteQuery({
    queryKey: ['articles', tag],
    queryFn: ({ pageParam = 1 }) =>
      axios
        .get(
          !tag
            ? `/api/articles?page=${pageParam}&limit=6`
            : `/api/tags/${tag}?page=${pageParam}&limit=6`
        )
        .then((res) => res.data as ArticlesResponse),
    getNextPageParam: (lastPage) =>
      lastPage.pagination?.hasMore ? lastPage.pagination.page + 1 : undefined,
    initialData: {
      pages: [initialArticles!],
      pageParams: [1],
    },
    initialPageParam: 1,
  });
  const { ref, inView } = useInView({
    threshold: 0,
    rootMargin: '1000px',
  });
  useEffect(() => {
    if (inView && hasNextPage && !isFetchingNextPage) {
      fetchNextPage();
    }
  }, [inView, hasNextPage, isFetchingNextPage, fetchNextPage]);
  const articles =
    data?.pages
      .flatMap((page) => page.articles)
      .filter((article) => article?._id && article?.slug)
      .filter(
        (article, index, self) =>
          index === self.findIndex((a) => a?._id === article?._id)
      ) || [];
  return (
    <PresentationalArticles
      isLoading={isLoading}
      isError={isError}
      articles={articles}
      hasNextPage={hasNextPage}
      inViewRef={ref}
    />
  );
}

 // app/_Articles/PresentationalArticles.tsx
import { PresentationalArticlesProps } from '@/types/Articles';
import dynamic from 'next/dynamic';
import Link from 'next/link';
import React from 'react';
import ArticlesState from './_components/ArticlesState';
const ArticleImage = dynamic(() => import('./_components/ArticleImage'), {
  ssr: false,
  loading: () => (
    <div className=' w-full h-[300px] rounded-2xl aspect-[16/9] bg-gray-600 animate-pulse' />
  ),
});
const PresentationalArticles: React.FC<PresentationalArticlesProps> = ({
  isError,
  isLoading,
  articles,
  hasNextPage,
  inViewRef,
}) => {
  return (
    <>
      {isLoading && (
        <ArticlesState>
          <ArticlesState.loading />
        </ArticlesState>
      )}
      {isError && (
        <ArticlesState>
          <ArticlesState.error />
        </ArticlesState>
      )}
      {articles.length === 0 && !isLoading && (
        <ArticlesState>
          <ArticlesState.empty />
        </ArticlesState>
      )}
      <section className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 px-0 py-5 sm:p-5 gap-x-10 gap-y-16'>
        {articles.map((article, i: number) => (
          <div key={article._id} className='space-y-4'>
            <Link href={`/article/${article.slug}`} className='block'>
              <ArticleImage banner={article.banner} i={i} />
            </Link>
            <p className='flex justify-center items-center gap-5'>
              <span className='text-secondary/75'>
                {new Date(article.createdAt).toLocaleDateString('en-GB')}
              </span>
              <Link
                href={`/tags/${article.tag}`}
                className='capitalize truncate max-w-32 text-secondary bg-[#1e293999] hover:bg-[#1e2939] py-1 px-4 rounded-2xl transition-all'
              >
                {article.tag}
              </Link>
            </p>
            <Link href={`/article/${article.slug}`}>
              <h2 className='text-xl font-bold mt-2 mb-4 truncate max-w-full'>
                {article.title}
              </h2>
              <p className='line-clamp-3 text-secondary max-w-full'>
                {article.description}
              </p>
            </Link>
          </div>
        ))}
      </section>
      {hasNextPage && (
        <div ref={inViewRef} className='w-full h-40'>
          {/* {isFetchingNextPage ? (
            <div className='flex items-center gap-2'>
              <div className='animate-spin rounded-full h-6 w-6 border-b-2 border-primary'></div>
              <span className='text-secondary'>جاري تحميل المزيد...</span>
            </div>
          ) : (
            <div className='text-secondary'>اسحب لأسفل لتحميل المزيد</div>
          )} */}
        </div>
      )}
    </>
  );
};
export default PresentationalArticles;

// app/_Articles/_components/initialArticlesHook.tsx
import { ArticlesResponse } from '@/types/Articles';
import ArticlesState from './ArticlesState';
const initialArticlesHook = async ({ tag }: { tag?: string } = {}) => {
  const res = await fetch(
    !tag
      ? `${process.env.url}/api/articles?page=1&limit=6`
      : `${process.env.url}/api/tags/${tag}?page=1&limit=6`,
    {
      next: { revalidate: !tag ? 1000 * 60 * 5 : 0 },
    }
  );
  if (!res.ok) {
    <ArticlesState>
      <ArticlesState.error />
    </ArticlesState>;
  }
  const initialArticles: ArticlesResponse = await res.json();
  if (initialArticles.articles?.length === 0) {
    <ArticlesState>
      <ArticlesState.empty />
    </ArticlesState>;
  }
  return { initialArticles };
};
export default initialArticlesHook;

 // app/page.tsx
import React from 'react';
import ArticlesState from './_Articles/_components/ArticlesState';
import dynamic from 'next/dynamic';
import initialArticlesHook from './_Articles/_components/initialArticlesHook';
const Articles = dynamic(() => import('./_Articles/Articles'), {
  loading: () => (
    <ArticlesState>
      <ArticlesState.loading />
    </ArticlesState>
  ),
});
const page = async () => {
  const { initialArticles } = await initialArticlesHook();
  return (
    <div className='p-5 space-y-4'>
      <h1 className='text-3xl md:text-4xl text-center font-bold'>مُركَّز</h1>
      <p className='text-center text-xl md:text-2xl text-secondary max-w-4xl m-auto'>
        مُركَّز منصة اجمع فيها مقالاتي التي تكون عبارة عن ملخص لمعلومة برمجية
        بدون كثرة مقدمات او تمطيط للكلام....
      </p>
      <Articles initialArticles={initialArticles} />
    </div>
  );
};
export default page;

import React from 'react';
export default function WithStyles(Component: React.ComponentType<any>) {
  return (props: {[key: string]: any }) => {
    const style = { padding: 10, margin: 10 };
    return <Component style={style} {...props} />;
};
}
 // الاستخدام
import { ButtonHTMLAttributes } from 'react';
import WithStyles from './WithStyles';
export default function Button(props: {
  props: ButtonHTMLAttributes<HTMLButtonElement>;
}) {
  return <button {...props}>Click Me!</button>;
}
export const StyledButton = WithStyles(Button);

'use client'
import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { ComponentType } from 'react';
function withAuth<P>(WrappedComponent: ComponentType<P>) {
  const ComponentWithAuth = (props: P) => {
    const router = useRouter();
    const [isAuthorized, setIsAuthorized] = useState<boolean | null>(null);
    useEffect(() => {
      const token = localStorage.getItem('token');
      if (token) setIsAuthorized(true);
},[router]);
    if (isAuthorized === null) return null;
    return <WrappedComponent {...props} />;
};
  return ComponentWithAuth;
}

const DeleteItem = () => <div>🗑️ حذف العنصر</div>;
const ProtectedDeleteItem = withAuth(DeleteItem);
export default function Page() {
  return <ProtectedDeleteItem />;
}

const A = withLogger(Button);
const B = withAuth(Button);

import React from 'react';
import { createPortal } from 'react-dom';
interface ModalProps {
  isOpen: boolean;
  handleClose: () => void;
  children: React.ReactNode;
}
export default function Modal({ isOpen, handleClose, children }: ModalProps) {
  if (isOpen === false) return null;
  return createPortal(
    <div
      style={{
        position: 'fixed',
        inset: 0,
        background: 'aqua',
        display: 'flex',
        flexDirection: 'column',
        placeItems: 'center',
        justifyContent: 'center',
}}
    >
      <div>{children}</div>
      <div>
        <button onClick={handleClose}>close modal</button>
      </div>
    </div>,
    document.body
  );
}

 // app/_components/Button.tsx
interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'danger' | 'success' | 'warning';
  shadow?: 'one' | 'two';
  style?: React.CSSProperties;
  children: React.ReactNode;
}
const Button = ({
  variant = 'primary',
  shadow = 'one',
  style,
  children,
}: ButtonProps) => {
  return (
    <button
      style={{
        ...styles.variants[variant],
        ...styles.boxShadow[shadow],
        ...style,
      }}
    >
      {children}
    </button>
  );
};
const styles = {
  variants: {
    primary: { backgroundColor: 'blue', color: 'white' },
    secondary: { backgroundColor: '#fff', color: '#000' },
    danger: { backgroundColor: '#f00', color: '#fff' },
    warning: { backgroundColor: 'yellow', color: '#000' },
    success: { backgroundColor: 'green', color: '#fff' },
  },
  boxShadow: {
    one: { boxShadow: '0 4px 8px rgba(0, 0, 0, 0.3)' },
  },
};
export default Button;

<Button shadow='two' variant='secondary'>انقر هنا</Button>
<Button variant='danger' style={{ padding: '10px' }}>حذف</Button>
<Button variant={dark ? 'danger': 'primary'}>حذف</Button>