🚀 🚀 🚀 Initial commit. Created repo, installed necessary libraries. Created redux store, reducers and actions for charts and news.

urlDev · urlDev · commit 0c8bc1bd17bc · 2020-11-22T21:33:05.000+02:00
diff --git a/.gitignore b/.gitignore
@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,38 +1,49 @@
 {
-  "name": "react-reactmarkets.v2",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-scripts": "4.0.0",
-    "web-vitals": "^0.2.4"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
+    "name": "react-reactmarkets.v2",
+    "version": "0.1.0",
+    "author": "Can Ural",
+    "license": "MIT",
+    "private": true,
+    "dependencies": {
+        "@testing-library/jest-dom": "^5.11.4",
+        "@testing-library/react": "^11.1.0",
+        "@testing-library/user-event": "^12.1.10",
+        "axios": "^0.21.0",
+        "normalize.css": "^8.0.1",
+        "react": "^17.0.1",
+        "react-dom": "^17.0.1",
+        "react-redux": "^7.2.2",
+        "react-router": "^5.2.0",
+        "react-router-dom": "^5.2.0",
+        "react-scripts": "4.0.0",
+        "redux": "^4.0.5",
+        "redux-logger": "^3.0.6",
+        "redux-thunk": "^2.3.0",
+        "styled-components": "^5.2.1",
+        "web-vitals": "^0.2.4"
+    },
+    "scripts": {
+        "start": "react-scripts start",
+        "build": "react-scripts build",
+        "test": "react-scripts test",
+        "eject": "react-scripts eject"
+    },
+    "eslintConfig": {
+        "extends": [
+            "react-app",
+            "react-app/jest"
+        ]
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    }
 }
diff --git a/public/index.html b/public/index.html
@@ -1,14 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+
+<head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="Full stack finance app made with MERN stack." />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -24,20 +22,14 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
-  </head>
-  <body>
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&family=Oswald:wght@500&display=swap" rel="stylesheet" />
+    <title>ReactMarkets.v2</title>
+</head>
+
+<body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
+</body>
 
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>
+</html>
diff --git a/src/App.js b/src/App.js
diff --git a/src/App.jsx b/src/App.jsx
@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+
+import Nav from './components/nav/Nav';
+
+import { fetchChart } from './redux/actions/chart';
+import { fetchTopStories } from './redux/actions/news';
+
+import './App.css';
+
+const App = () => {
+  // const { chart } = useSelector((chart) => chart.chart);
+  // const { loading, news, error } = useSelector((news) => news.news);
+  // const dispatch = useDispatch();
+
+  // useEffect(() => {
+  //   dispatch(fetchChart());
+  //   dispatch(fetchTopStories('business'));
+  // }, [dispatch]);
+
+  return (
+    <div className="App">
+      <Nav />
+    </div>
+  );
+};
+
+export default App;
diff --git a/src/components/nav/Nav.jsx b/src/components/nav/Nav.jsx
@@ -0,0 +1,13 @@
+import Search from '../search/Search';
+
+import './Nav.styles';
+
+const Nav = () => {
+  return (
+    <>
+      <Search />
+    </> //
+  );
+};
+
+export default Nav;
diff --git a/src/components/nav/Nav.styles.js b/src/components/nav/Nav.styles.js
diff --git a/src/components/search/Search.jsx b/src/components/search/Search.jsx
@@ -0,0 +1,11 @@
+import './Search.styles';
+
+const Search = () => {
+  return (
+    <>
+      <h1>Search</h1>
+    </> //
+  );
+};
+
+export default Search;
diff --git a/src/components/search/Search.styles.js b/src/components/search/Search.styles.js
diff --git a/src/index.jsx b/src/index.jsx
@@ -1,14 +1,24 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import { Provider } from 'react-redux';
+import store from './redux/store';
+
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import 'normalize.css/normalize.css';
 
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  <Router>
+    <React.StrictMode>
+      <Provider store={store}>
+        <App />
+      </Provider>
+    </React.StrictMode>
+  </Router>,
+  document.getElementById('root'),
 );
 
 // If you want to start measuring performance in your app, pass a function
diff --git a/src/logo.svg b/src/logo.svg
diff --git a/src/redux/actions/chart.js b/src/redux/actions/chart.js
@@ -0,0 +1,26 @@
+import axios from 'axios';
+
+export const FETCH_CHART_SUCCESS = 'FETCH_CHART_SUCCESS';
+export const FETCH_CHART_ERROR = 'FETCH_CHART_ERROR';
+
+export const fetchChartSuccess = (chart) => ({
+    type: FETCH_CHART_SUCCESS,
+    payload: chart,
+});
+
+export const fetchChartError = (error) => ({
+    type: FETCH_CHART_ERROR,
+    payload: error,
+});
+
+export const fetchChart = () => async(dispatch) => {
+    try {
+        const response = await axios.get(
+            `https://financialmodelingprep.com/api/v3/quotes/index?apikey=${process.env.REACT_APP_CHART_KEY}`,
+        );
+        const data = await response.data;
+        return dispatch(fetchChartSuccess(data));
+    } catch (error) {
+        return dispatch(fetchChartError(error));
+    }
+};
diff --git a/src/redux/actions/news.js b/src/redux/actions/news.js
@@ -0,0 +1,38 @@
+import axios from 'axios';
+
+export const FETCH_NEWS_SUCCESS = 'FETCH_NEWS_SUCCESS';
+export const FETCH_NEWS_ERROR = 'FETCH_NEWS_ERROR';
+
+export const fetchNewsSuccess = (news) => ({
+    type: FETCH_NEWS_SUCCESS,
+    payload: news,
+});
+
+export const fetchNewsError = (error) => ({
+    type: FETCH_NEWS_ERROR,
+    payload: error,
+});
+
+export const fetchTopStories = (topStories) => async(dispatch) => {
+    try {
+        const response = await axios.get(
+            `https://api.nytimes.com/svc/topstories/v2/${topStories}.json?api-key=${process.env.REACT_APP_NEWS_API_KEY}`,
+        );
+        const data = await response.data;
+        return dispatch(fetchNewsSuccess(data));
+    } catch (error) {
+        return dispatch(fetchNewsError(error));
+    }
+};
+
+export const fetchMostPopular = () => async(dispatch) => {
+    try {
+        const response = await axios.get(
+            `https://api.nytimes.com/svc/mostpopular/v2/viewed/7.json?api-key=${process.env.REACT_APP_NEWS_API_KEY}`,
+        );
+        const data = await response.data;
+        return dispatch(fetchNewsSuccess(data));
+    } catch (error) {
+        return dispatch(fetchNewsError(error));
+    }
+};
diff --git a/src/redux/reducers/chart.js b/src/redux/reducers/chart.js
@@ -0,0 +1,27 @@
+import { FETCH_CHART_SUCCESS, FETCH_CHART_ERROR } from '../actions/chart';
+
+const initialState = {
+    loading: true,
+    chart: [],
+    error: null,
+};
+
+const chartReducer = (state = initialState, action) => {
+    switch (action.type) {
+        case FETCH_CHART_SUCCESS:
+            return {
+                ...state,
+                chart: action.payload,
+                loading: false,
+            };
+        case FETCH_CHART_ERROR:
+            return {
+                ...state,
+                error: action.payload,
+            };
+        default:
+            return state;
+    }
+};
+
+export default chartReducer;
diff --git a/src/redux/reducers/news.js b/src/redux/reducers/news.js
@@ -0,0 +1,28 @@
+import { FETCH_NEWS_SUCCESS, FETCH_NEWS_ERROR } from '../actions/news';
+
+const initialState = {
+    loading: true,
+    news: [],
+    error: null,
+};
+
+const newsReducer = (state = initialState, action) => {
+    switch (action.type) {
+        case FETCH_NEWS_SUCCESS:
+            return {
+                ...state,
+                loading: false,
+                news: action.payload.results,
+            };
+        case FETCH_NEWS_ERROR:
+            return {
+                ...state,
+                news: [],
+                error: action.payload,
+            };
+        default:
+            return state;
+    }
+};
+
+export default newsReducer;
diff --git a/src/redux/rootReducer.js b/src/redux/rootReducer.js
@@ -0,0 +1,11 @@
+import { combineReducers } from 'redux';
+
+import chartReducer from './reducers/chart';
+import newsReducer from './reducers/news';
+
+const rootReducer = combineReducers({
+    chart: chartReducer,
+    news: newsReducer,
+});
+
+export default rootReducer;
diff --git a/src/redux/store.js b/src/redux/store.js
