without styles

package.json

@@ -4,12 +4,19 @@
   "private": true,
   "homepage": "https://Nikolaus-B.github.io/article-gallery/",
   "dependencies": {
+    "@reduxjs/toolkit": "^2.2.1",
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.6.7",
+    "modern-normalize": "^2.0.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-modal": "^3.16.1",
+    "react-redux": "^9.1.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.8",
+    "uid": "^2.0.2",
     "web-vitals": "^2.1.3"
   },
   "scripts": {

src/api.js

@@ -0,0 +1,12 @@
+import axios from 'axios';
+
+const ApiKey = '0a1f54de98a94593b203abe9891393f7';
+axios.defaults.baseURL = `
+ https://newsapi.org/`;
+
+export const fetchArticles = async (page = 1, pageSize = 10) => {
+  const response = await axios.get(
+    `v2/top-headlines?country=us&apiKey=${ApiKey}&page=${page}&pageSize=${pageSize}`
+  );
+  return response.data.articles;
+};

src/components/App.jsx

@@ -1,16 +1,13 @@
+import { ArticleList } from './ArticleList/ArticleList';
+import { Container, GlobalStyle } from './GlobalStyle';
+import { Searchbar } from './Searchbar/Searchbar';
+
 export const App = () => {
   return (
-    <div
-      style={{
-        height: '100vh',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        fontSize: 40,
-        color: '#010101'
-      }}
-    >
-      React homework template
-    </div>
+    <Container>
+      <Searchbar />
+      <ArticleList />
+      <GlobalStyle />
+    </Container>
   );
 };

src/components/ArticleItem/ArticleItem.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Image, Item } from './ArticleItem.styled';
+
+export const ArticleItem = ({ article }) => {
+  return (
+    <Item>
+      <Image src={article.urlToImage} alt="article title" />
+      <h1>{article.author || 'No author'} </h1>
+      <h2>{article.title || 'No title'} </h2>
+      <p>{article.description || 'No description avalable'} </p>
+    </Item>
+  );
+};

src/components/ArticleItem/ArticleItem.styled.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+export const Item = styled.li`
+  border: 2px solid black;
+  border-radius: 20px;
+
+  padding: 10px 20px;
+`;
+
+export const Image = styled.img`
+  width: 350px;
+`;

src/components/ArticleList/ArticleList.jsx

@@ -0,0 +1,66 @@
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  selectArticles,
+  selectArticlesToLoad,
+  selectFilter,
+  selectPage,
+  selectTotal,
+} from '../../redux/acrticles/ariclesSelectors';
+import { fetchArticles } from '../../redux/acrticles/operations';
+import { ArticleItem } from 'components/ArticleItem/ArticleItem';
+import { List } from './ArticleList.styled';
+import { morePage } from '../../redux/acrticles/articlesSlice';
+import { uid } from 'uid';
+
+export const ArticleList = () => {
+  const dispatch = useDispatch();
+  const articles = useSelector(selectArticles);
+  const page = useSelector(selectPage);
+  const articlesToLoad = useSelector(selectArticlesToLoad);
+  const total = useSelector(selectTotal);
+  const filter = useSelector(selectFilter);
+
+  const articlesToLoadHandler = () => {
+    return total - page * 10 < 10 ? total % 10 : 10;
+  };
+
+  useEffect(() => {
+    dispatch(fetchArticles({ page, articlesToLoad }));
+  }, [dispatch, page, articlesToLoad]);
+
+  const filterArticles = () => {
+    return articles.filter(article => {
+      if (article.source.name === null || article.description === null) {
+        return article;
+      }
+      const articleName = article.source?.name.toLowerCase();
+      const articleDescription = article?.description.toLowerCase();
+
+      return (
+        articleName.includes(filter.toLowerCase()) ||
+        articleDescription.includes(filter)
+      );
+    });
+  };
+
+  const filteredArticles = filterArticles();
+
+  return (
+    <>
+      <List>
+        {filteredArticles.map(item => {
+          return <ArticleItem key={uid()} article={item} />;
+        })}
+      </List>
+      <button
+        disabled={articlesToLoad < 10}
+        onClick={() => {
+          dispatch(morePage(articlesToLoadHandler()));
+        }}
+      >
+        More Articles({articlesToLoad < 10 ? 0 : articlesToLoadHandler()})
+      </button>
+    </>
+  );
+};

src/components/ArticleList/ArticleList.styled.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+export const List = styled.ul`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+
+  width: 500px;
+
+  margin-top: 20px;
+`;

src/components/GlobalStyle.jsx

@@ -0,0 +1,37 @@
+import styled, { createGlobalStyle } from 'styled-components';
+import 'modern-normalize';
+
+export const GlobalStyle = createGlobalStyle`
+body {
+  margin: 0;
+
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+}
+
+ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+img {
+  display: block;
+}
+
+button {
+  cursor: pointer;
+}
+`;
+
+export const Container = styled.div`
+  width: 1200px;
+`;

src/components/ModalBtn/ModalBtn.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const ModalBtn = () => {
+  return (
+    <>
+      <button type="button"></button>
+    </>
+  );
+};

src/components/Searchbar/Searchbar.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { changeFilter } from '../../redux/acrticles/articlesSlice';
+
+export const Searchbar = () => {
+  const dispatch = useDispatch();
+
+  //   const onFormSubmit = e => {
+  //     e.preventDefault();
+  //     dispatch(changeFilter(e.target.input.value));
+  //     e.target.input.value = '';
+  //   };
+
+  return (
+    <div>
+      <input
+        id="input"
+        type="text"
+        onChange={e => {
+          dispatch(changeFilter(e.target.value));
+        }}
+      />
+    </div>
+  );
+};

src/index.css

@@ -1,5 +1,3 @@
-@import-normalize; /* bring in normalize.css styles */
-
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

src/index.js

@@ -2,9 +2,11 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { App } from 'components/App';
 import './index.css';
+import { Provider } from 'react-redux';
+import { store } from '../src/redux/store';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
+  <Provider store={store}>
     <App />
-  </React.StrictMode>
+  </Provider>
 );

src/redux/acrticles/ariclesSelectors.js

@@ -0,0 +1,7 @@
+export const selectArticles = state => state.articles.articles;
+export const selectArticlesToLoad = state => state.articles.articlesToLoad;
+export const selectPage = state => state.articles.page;
+export const selectFilter = state => state.articles.filter;
+export const selectTotal = state => state.articles.total;
+export const selectIsLoading = state => state.articles.isLoading;
+export const selectError = state => state.articles.error;

src/redux/acrticles/articlesSlice.js

@@ -0,0 +1,47 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { fetchArticles } from './operations';
+
+const handlePending = state => {
+  state.isLoading = true;
+};
+
+const handleRejected = (state, action) => {
+  state.isLoading = false;
+  state.error = action.payload;
+};
+
+const articlesSlice = createSlice({
+  name: 'articles',
+  initialState: {
+    articles: [],
+    articlesToLoad: 10,
+    total: 0,
+    page: 1,
+    filter: '',
+    isLoading: false,
+    error: null,
+  },
+  reducers: {
+    morePage: (state, action) => {
+      state.page += 1;
+      state.articlesToLoad = action.payload;
+    },
+    changeFilter: (state, action) => {
+      state.filter = action.payload;
+    },
+  },
+  extraReducers: builder => {
+    builder
+      .addCase(fetchArticles.pending, handlePending)
+      .addCase(fetchArticles.fulfilled, (state, action) => {
+        state.total = action.payload.totalResults;
+        state.articles = [...state.articles, ...action.payload.articles];
+        state.isLoading = false;
+        state.error = null;
+      })
+      .addCase(fetchArticles.rejected, handleRejected);
+  },
+});
+
+export const { morePage, changeFilter } = articlesSlice.actions;
+export const articlesReducer = articlesSlice.reducer;

src/redux/acrticles/operations.js

@@ -0,0 +1,20 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+
+const ApiKey = '0a1f54de98a94593b203abe9891393f7';
+axios.defaults.baseURL = `
+ https://newsapi.org/`;
+
+export const fetchArticles = createAsyncThunk(
+  'articles/fetchAll',
+  async ({ page, articlesToLoad }, thunkAPI) => {
+    try {
+      const response = await axios.get(
+        `v2/top-headlines?country=us&apiKey=${ApiKey}&page=${page}&pageSize=${articlesToLoad}`
+      );
+      return response.data;
+    } catch (e) {
+      return thunkAPI.rejectWithValue(e.message);
+    }
+  }
+);

src/redux/modal/modalSelectors.js

@@ -0,0 +1 @@
+export const selectIsOpen = state => state.modal.isOpen;

src/redux/modal/modalSlice.js

@@ -0,0 +1,15 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const modalSlice = createSlice({
+  name: 'modal',
+  initialState: {
+    isOpen: false,
+  },
+  reducers: {
+    isOpen: state => {
+      state.isOpen = !state.isOpen;
+    },
+  },
+});
+
+export const modalReducer = modalSlice.reducer;

src/redux/store.js

@@ -0,0 +1,10 @@
+import { configureStore } from '@reduxjs/toolkit';
+import { articlesReducer } from './acrticles/articlesSlice';
+import { modalReducer } from './modal/modalSlice';
+
+export const store = configureStore({
+  reducer: {
+    articles: articlesReducer,
+    modal: modalReducer,
+  },
+});