feat: adding typscript

package.json

@@ -8,6 +8,8 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^29.5.1",
+    "@types/node": "^18.16.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-feather": "^2.0.10",
@@ -18,6 +20,7 @@
     "react-slick": "^0.29.0",
     "redux": "^4.2.1",
     "slick-carousel": "^1.8.1",
+    "typescript": "^5.0.4",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -45,6 +48,8 @@
     ]
   },
   "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.1",
     "tailwindcss": "^3.2.7"
   }
 }

src/App.test.js → src/App.test.tsx

@@ -1,7 +1,7 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
+import { render, screen } from "@testing-library/react";
+import App from "./App";
 
-test('renders learn react link', () => {
+test("renders learn react link", () => {
   render(<App />);
   const linkElement = screen.getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();

src/components/layout/Header.jsx → src/components/layout/Header.tsx

@@ -1,6 +1,7 @@
+import { ReactElement } from "react";
 import { Link } from "react-router-dom";
 
-export default function Header() {
+export default function Header(): ReactElement {
   return (
     <div className="flex justify-between items-center py-3 border-b-[3px] border-gray-900">
       <Link className="flex cursor-pointer" to="/">

src/components/sections/articlespage/Blog.jsx → src/components/sections/articlespage/Blog.tsx

@@ -4,7 +4,11 @@ import CardSkeleton from "../../ui/Card/Skeleton";
 import ErrorFound from "../../ui/ErrorFound";
 import NotFound from "../../ui/NotFound";
 
-export default function Blog({ whichTab }) {
+export default function Blog({
+  whichTab,
+}: {
+  whichTab: string;
+}): React.ReactElement {
   const { data, isError, isLoading } = useGetArticlesQuery(whichTab);
 
   return (

src/components/sections/homepage/Blog.jsx → src/components/sections/homepage/Blog.tsx

@@ -1,20 +1,22 @@
-import { useEffect } from "react";
+import { Dispatch, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { setArticles } from "../../../features/articles";
 import { useGetArticlesQuery } from "../../../services/articlesApi";
 import Card from "../../ui/Card";
 import CardSkeleton from "../../ui/Card/Skeleton";
 import ErrorFound from "../../ui/ErrorFound";
 import NotFound from "../../ui/NotFound";
+import { Articles } from "interfaces/articles";
+import { AnyAction } from "redux";
 
-export default function Blog() {
+export default function Blog(): React.ReactElement {
   const {
     data: headlines,
     isLoading,
     isError,
   } = useGetArticlesQuery("headlines");
-  const dispatch = useDispatch();
-  const data = useSelector((state) => state.articles);
+  const dispatch: Dispatch<AnyAction> = useDispatch();
+  const data = useSelector((state: Articles) => state.articles);
   useEffect(() => {
     if (headlines) {
       dispatch(setArticles(headlines));
@@ -24,11 +26,13 @@ export default function Blog() {
   return (
     <>
       {isError && <ErrorFound />}
-      <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4 mt-5">
+      <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4 mt-5 relative">
         {isLoading ? (
           <CardSkeleton count={10} />
         ) : data?.length === 0 ? (
-          <NotFound />
+          <div className="w-full h-full m-auto absolute">
+            <NotFound />
+          </div>
         ) : (
           data.map((article, index) => {
             return <Card key={`card-index-${index}`} article={article} />;

src/components/sections/homepage/NavSkeleton.tsx

@@ -0,0 +1,13 @@
+import Skeleton from "react-loading-skeleton";
+
+export default function NavSkeleton({ count }: { count: number }) {
+  return (
+    <>
+      {Array(count)
+        .fill("")
+        .map((_, index) => (
+          <Skeleton key={`tab-skeleton-${index}`} width={100} />
+        ))}
+    </>
+  );
+}

src/components/sections/homepage/Navigation.jsx → src/components/sections/homepage/Navigation.tsx

@@ -5,10 +5,11 @@ import Slider from "react-slick";
 import settings from "../../../config/reactSlickSetting";
 import { Link } from "react-router-dom";
 import NavSkeleton from "./NavSkeleton";
+import { Publisher } from "interfaces/publisher";
 
-export default function Navigation() {
-  const { data: publishers, isLoading } = useGetPublisherQuery();
-  const [whichTab, setWhichTab] = useState("");
+export default function Navigation(): React.ReactElement {
+  const { data: publishers, isLoading } = useGetPublisherQuery(undefined);
+  const [whichTab, setWhichTab] = useState<string>("");
 
   return (
     <div className="border-b-2 border-gray-900 py-3">
@@ -17,7 +18,7 @@ export default function Navigation() {
           <NavSkeleton count={5} />
         ) : (
           <Slider {...settings} className="w-11/12 md:w-1/2 mx-6">
-            {publishers?.sources.map((item) => (
+            {publishers?.sources.map((item: Publisher) => (
               <Link
                 to={`/:${item.name}/article`}
                 state={{ whichTab: item.id }}

src/components/ui/Card/Skeleton.tsx

@@ -0,0 +1,22 @@
+import Skeleton from "react-loading-skeleton";
+
+export default function CardSkeleton({ count }: { count?: number }) {
+  return (
+    <>
+      {Array(count)
+        .fill("")
+        .map((_, index) => {
+          return (
+            <div key={`skeleton-list-${index}`}>
+              <Skeleton height={176} />
+              <div className="flex gap-4 mt-4 mb-2">
+                <Skeleton width={50} />
+                <Skeleton width={50} />
+              </div>
+              <Skeleton count={2} />
+            </div>
+          );
+        })}
+    </>
+  );
+}

src/components/ui/Card/index.jsx → src/components/ui/Card/index.tsx

@@ -1,9 +1,11 @@
 import { Link } from "react-router-dom";
 import getDateTime from "../../../utils/getDateTime";
+import { Article } from "interfaces/articles";
 
-export default function Card({ article }) {
+export default function Card({ article }: { article: Article }) {
   const { title, urlToImage, publishedAt } = article;
   const date = new Date(publishedAt);
+
   return (
     <Link to={`/article/:${title}`} state={article}>
       <div className="cursor-pointer group">
@@ -13,7 +15,7 @@ export default function Card({ article }) {
           alt={title}
         />
         <div className="flex gap-2 items-center text-gray-500 text-sm font-light mt-4 mb-2">
-          <span>{getDateTime(date.getMonth(), date.getDay())}</span>
+          <span>{getDateTime(date.getMonth(), date.getDate())}</span>
           <span className="block w-1 h-1 rounded-full bg-gray-700" />
           <span>{date.getMinutes()} min</span>
         </div>

src/components/ui/ErrorFound.jsx → src/components/ui/ErrorFound.tsx

@@ -1,4 +1,4 @@
-export default function ErrorFound() {
+export default function ErrorFound(): React.ReactElement {
   return (
     <div className="flex justify-center items-center flex-col h-[80svh] w-full">
       <div className="flex w-72 h-72 justify-center bg-[#EEF0F4] items-center rounded-full">

src/components/ui/NotFound.jsx → src/components/ui/NotFound.tsx

@@ -1,6 +1,6 @@
-export default function NotFound() {
+export default function NotFound(): React.ReactElement {
   return (
-    <div className="flex justify-center items-center flex-col h-[80svh] w-full">
+    <div className="flex justify-center items-center flex-col h-[80svh] m-auto w-fit">
       <div className="flex w-72 h-72 justify-center bg-[#EEF0F4] items-center rounded-full">
         <img
           src="/assets/empty-folder.svg"

src/components/ui/SearchInput.tsx

@@ -0,0 +1,71 @@
+import { ChangeEvent, useEffect, useState } from "react";
+import { Search, X, Circle } from "react-feather";
+import { useDispatch } from "react-redux";
+import { setArticles } from "../../features/articles";
+import {
+  useGetArticlesQuery,
+  useSearchArticlesQuery,
+} from "../../services/articlesApi";
+
+export default function SearchInput(): React.ReactElement {
+  const [search, setSearch] = useState<string>("");
+  const [keyword, setKeyword] = useState<string | undefined>();
+  const { data: article } = useSearchArticlesQuery(keyword);
+  const { data: headlines } = useGetArticlesQuery("headlines");
+  const [loading, setLoading] = useState<boolean>(false);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (keyword) {
+      dispatch(setArticles(article));
+    }
+  }, [article, dispatch, keyword]);
+
+  const debounce = (cb: Function) => {
+    let timeout;
+    if (timeout) clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      cb();
+    }, 1000);
+  };
+  function onChangleText(event: ChangeEvent<HTMLInputElement>): void {
+    setLoading(true);
+    setSearch(event.target.value);
+    debounce(() => {
+      if (event.target.value.length > 0) {
+        setLoading(false);
+        setKeyword(event.target.value);
+      }
+    });
+  }
+
+  return (
+    <form className="flex gap-2 items-center w-full">
+      <Search size={17} />
+      <input
+        type="text"
+        onChange={onChangleText}
+        value={search}
+        className="outline-none placeholder:text-black"
+        placeholder="Search..."
+      />
+      {search.length > 0 && (
+        <div className="flex items-center gap-1">
+          {loading ? (
+            <Circle size={16} className="animate-spin p-0.5 cursor-pointer" />
+          ) : (
+            <X
+              size={16}
+              className="bg-gray-300 bg-opacity-60 rounded-full p-0.5 cursor-pointer"
+              onClick={(): void => {
+                setSearch("");
+                setKeyword(undefined);
+                dispatch(setArticles(headlines));
+              }}
+            />
+          )}
+        </div>
+      )}
+    </form>
+  );
+}

src/components/wrappers/PageWrapper.tsx

@@ -0,0 +1,18 @@
+import Header from "../layout/Header";
+type Props = React.PropsWithChildren<{
+  as: "div" | "section" | "aside";
+}>;
+
+const PageWrapper = ({
+  as: Component = "section",
+  children,
+}: Props): React.ReactElement => {
+  return (
+    <Component className="max-w-screen-2xl w-11/12 mx-auto">
+      <Header />
+      {children}
+    </Component>
+  );
+};
+
+export default PageWrapper;

src/features/articles.js → src/features/articles.ts

@@ -1,9 +1,10 @@
-import { createSlice } from "@reduxjs/toolkit";
+import { PayloadAction, createSlice } from "@reduxjs/toolkit";
+import { Article } from "interfaces/articles";
 const articlesSlice = createSlice({
   name: "articles",
   initialState: [],
   reducers: {
-    setArticles: (state, action) => {
+    setArticles: (state: Array<Article>, action: PayloadAction<Article[]>) => {
       return (state = action.payload);
     },
   },