-
+
navigate(-1)}
+ className="mt-3 flex items-center gap-5"
+ >
+
{isLoading ? (
("");
return (
+
) : (
data.map((article, index) => {
return
@@ -17,7 +18,7 @@ export default function Navigation() {
- {publishers?.sources.map((item) => (
+ {publishers?.sources.map((item: Publisher) => (
{
- return (
-
-
- );
- });
-}
diff --git a/src/components/ui/Card/Skeleton.tsx b/src/components/ui/Card/Skeleton.tsx
new file mode 100644
index 0000000..d0b761f
--- /dev/null
+++ b/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 (
+
-
-
+
+ );
+ })}
+
+ );
+}
diff --git a/src/components/ui/Card/index.jsx b/src/components/ui/Card/index.tsx
similarity index 81%
rename from src/components/ui/Card/index.jsx
rename to src/components/ui/Card/index.tsx
index 04a7034..3521737 100644
--- a/src/components/ui/Card/index.jsx
+++ b/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 (
+
+
@@ -13,7 +15,7 @@ export default function Card({ article }) {
alt={title}
/>
- {getDateTime(date.getMonth(), date.getDay())}
+ {getDateTime(date.getMonth(), date.getDate())}
{date.getMinutes()} min
diff --git a/src/components/ui/ErrorFound.jsx b/src/components/ui/ErrorFound.tsx
similarity index 89%
rename from src/components/ui/ErrorFound.jsx
rename to src/components/ui/ErrorFound.tsx
index 494bab4..56ca81a 100644
--- a/src/components/ui/ErrorFound.jsx
+++ b/src/components/ui/ErrorFound.tsx
@@ -1,4 +1,4 @@
-export default function ErrorFound() {
+export default function ErrorFound(): React.ReactElement {
return (
diff --git a/src/components/ui/NotFound.jsx b/src/components/ui/NotFound.tsx
similarity index 87%
rename from src/components/ui/NotFound.jsx
rename to src/components/ui/NotFound.tsx
index c8992c1..34a8d1e 100644
--- a/src/components/ui/NotFound.jsx
+++ b/src/components/ui/NotFound.tsx
@@ -1,6 +1,6 @@
-export default function NotFound() {
+export default function NotFound(): React.ReactElement {
return (
-
+
- ("");
+ const [keyword, setKeyword] = useState();
+ const { data: article } = useSearchArticlesQuery(keyword);
+ const { data: headlines } = useGetArticlesQuery("headlines");
+ const [loading, setLoading] = useState(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): void {
+ setLoading(true);
+ setSearch(event.target.value);
+ debounce(() => {
+ if (event.target.value.length > 0) {
+ setLoading(false);
+ setKeyword(event.target.value);
+ }
+ });
+ }
+
+ return (
+
+ );
+}
diff --git a/src/components/wrappers/PageWrapper.jsx b/src/components/wrappers/PageWrapper.jsx
deleted file mode 100644
index fa45839..0000000
--- a/src/components/wrappers/PageWrapper.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import Header from "../layout/Header";
-
-const PageWrapper = ({ children }) => {
- return (
-
-
- );
-};
-
-export default PageWrapper;
diff --git a/src/components/wrappers/PageWrapper.tsx b/src/components/wrappers/PageWrapper.tsx
new file mode 100644
index 0000000..1e4ad73
--- /dev/null
+++ b/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 (
+
+
+ );
+};
+
+export default PageWrapper;
diff --git a/src/config/reactSlickSetting.js b/src/config/reactSlickSetting.ts
similarity index 100%
rename from src/config/reactSlickSetting.js
rename to src/config/reactSlickSetting.ts
diff --git a/src/features/articles.js b/src/features/articles.ts
similarity index 55%
rename from src/features/articles.js
rename to src/features/articles.ts
index 30e24bc..d99439d 100644
--- a/src/features/articles.js
+++ b/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, action: PayloadAction) => {
return (state = action.payload);
},
},
diff --git a/src/index.js b/src/index.tsx
similarity index 60%
rename from src/index.js
rename to src/index.tsx
index 510a87d..7e21238 100644
--- a/src/index.js
+++ b/src/index.tsx
@@ -1,25 +1,27 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
+import { createRoot } from "react-dom/client";
import "react-loading-skeleton/dist/skeleton.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { Provider } from "react-redux";
import store from "./store";
-import PageWrapper from "./components/wrappers/PageWrapper";
+import Wrapper from "./components/wrappers/PageWrapper";
import "./index.css";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import { BrowserRouter } from "react-router-dom";
-const root = ReactDOM.createRoot(document.getElementById("root"));
+import { StrictMode } from "react";
+
+const root = createRoot(document.getElementById("root"));
+
root.render(
-
+
-
+
+
-
+
);
-reportWebVitals();
+reportWebVitals(undefined);
diff --git a/src/interfaces/articles.ts b/src/interfaces/articles.ts
new file mode 100644
index 0000000..54df7ff
--- /dev/null
+++ b/src/interfaces/articles.ts
@@ -0,0 +1,18 @@
+export interface Article {
+ source: Source;
+ author: string;
+ title: string;
+ description: string;
+ url: string;
+ urlToImage: string;
+ publishedAt: string;
+ content: string;
+}
+export interface Source {
+ id: any;
+ name: string;
+}
+
+export interface Articles {
+ articles: Article[];
+}
diff --git a/src/interfaces/publisher.ts b/src/interfaces/publisher.ts
new file mode 100644
index 0000000..8917e7a
--- /dev/null
+++ b/src/interfaces/publisher.ts
@@ -0,0 +1,9 @@
+export interface Publisher {
+ id: string;
+ name: string;
+ description: string;
+ url: URL;
+ category: string;
+ language: string;
+ country: string;
+}
diff --git a/src/pages/Article.jsx b/src/pages/Article.tsx
similarity index 87%
rename from src/pages/Article.jsx
rename to src/pages/Article.tsx
index 96d5ca3..183f5cf 100644
--- a/src/pages/Article.jsx
+++ b/src/pages/Article.tsx
@@ -1,16 +1,20 @@
-import { Link, useLocation } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
import getDateTime from "../utils/getDateTime";
import { ArrowLeft } from "react-feather";
export default function Article() {
const { state } = useLocation();
+ const navigate = useNavigate();
const date = new Date(state.publishedAt);
return (
-
-
- setSearch("")}
- />
-
- )}
-
- );
-}
diff --git a/src/components/ui/SearchInput.tsx b/src/components/ui/SearchInput.tsx
new file mode 100644
index 0000000..75a025a
--- /dev/null
+++ b/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