ماهو 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.2)" },
    two: { boxShadow: "0 8px 16px 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>