Ft/fetch data

package.json

@@ -13,10 +13,12 @@
     "react-redux": "^7.2.6",
     "react-router-dom": "^6.2.2",
     "react-scripts": "5.0.0",
+    "react-select": "^5.2.2",
     "redux": "^4.1.2",
     "redux-devtools-extension": "^2.13.9",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.4.1",
+    "uuid": "^8.3.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/components/Company.css

@@ -1,4 +1,9 @@
-* {
-  padding: 0;
-  margin: 0;
+.info {
+  display: flex;
+  justify-content: space-between;
+}
+
+.info:last-child,
+.info:nth-child(22) {
+  display: none;
 }

src/components/Company.js

@@ -1,7 +1,29 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
+import { v4 as uuidv4 } from 'uuid';
+import './Company.css';
 
-const Company = () => (
-  <h1>Company</h1>
-);
+const Company = () => {
+  const company = useSelector((state) => state.companyReducer);
+  return (
+    <>
+      <section className="logo">
+        <img src={company[0].image} alt="company logo" />
+      </section>
+      <section>
+        {Object.entries(company[0]).map(([key, value]) => (
+          <div className="info" key={uuidv4()}>
+            <div className="keys">
+              {key}
+            </div>
+            <div className="Value">
+              {value}
+            </div>
+          </div>
+        ))}
+      </section>
+    </>
+  );
+};
 
 export default Company;

src/components/Home.css

@@ -1,4 +1,5 @@
-* {
-  padding: 0;
-  margin: 0;
+.cards {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
 }

src/components/Home.js

@@ -1,13 +1,57 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { NavLink } from 'react-router-dom';
+import { fetchData } from '../redux/company/company';
 import './Home.css';
 
-const Home = () => (
-  <div>
-    <section className="home">Section1</section>
-    <section className="search-bar">Section2</section>
-    <NavLink to="/Company">Section3</NavLink>
-  </div>
-);
+const Home = () => {
+  const home = useSelector((state) => state.homeReducer);
+  const [selected, setSelected] = useState('Choose a company');
+  const dispatch = useDispatch();
+  const select = (e) => {
+    const str = e.target.value;
+    setSelected(str);
+    const mySubString = str.substring(
+      str.indexOf('(') + 1,
+      str.lastIndexOf(')'),
+    );
+    dispatch(fetchData(mySubString));
+  };
+  return (
+    <div>
+      <section className="home">Section1</section>
+      <section className="search-bar">
+        <select id="company" name="company" value={selected} onChange={select}>
+          <option value="Choose a company" disabled>Choose a company</option>
+          {Object.entries(home).map(([key, value]) => (
+            <option key={key} value={`${value.name} (${value.symbol})`}>
+              {`${value.name} (${value.symbol})`}
+            </option>
+          ))}
+        </select>
+      </section>
+      <NavLink to="/Company">{selected}</NavLink>
+      <section className="cards">
+        {Object.entries(home).map(([key, value]) => (
+          <NavLink key={key} to="/Company">
+            <div
+              role="button"
+              tabIndex={0}
+              onKeyDown={() => dispatch(fetchData(value.symbol))}
+              onClick={() => dispatch(fetchData(value.symbol))}
+            >
+              {value.name}
+              <br />
+              {value.symbol}
+              <br />
+              {value.exchange}
+              <br />
+            </div>
+          </NavLink>
+        ))}
+      </section>
+    </div>
+  );
+};
 
 export default Home;

src/index.js

@@ -1,10 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
 import App from './components/App';
+import store from './redux/configureStore';
 
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+  <Provider store={store}>
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  </Provider>,
   document.getElementById('root'),
 );

src/redux/company/company.js

@@ -0,0 +1,51 @@
+const FETCH_SUCCESS = 'company-profile/company/FETCH_SUCCESS';
+
+const initialState = [];
+
+const reducer = (state = initialState, action) => {
+  switch (action.type) {
+    case FETCH_SUCCESS:
+      return ([...action.payload]);
+    default:
+      return state;
+  }
+};
+
+export default reducer;
+
+export const fetchDataSuccess = (payload) => ({
+  type: FETCH_SUCCESS,
+  payload,
+});
+
+export const fetchData = (company) => async (dispatch) => {
+  const response = await fetch(`https://financialmodelingprep.com/api/v3/profile/${company}?apikey=c0ea38db29a1ee3da5d66580c8949d28`);
+  const data = await response.json();
+  const info = Object.entries(data).map(([key, item]) => ({
+    companyName: item.companyName,
+    symbol: item.symbol,
+    industry: item.industry,
+    ceo: item.ceo,
+    country: item.country,
+    address: item.address,
+    fullTimeEmployees: item.fullTimeEmployees,
+    phone: item.phone,
+    website: item.website,
+    currency: item.currency,
+    exchange: item.exchange,
+    exchangeShortName: item.exchangeShortName,
+    sector: item.sector,
+    ipoDate: item.ipoDate,
+    mktCap: item.mktCap,
+    lastDiv: item.lastDiv,
+    price: item.price,
+    isin: item.isin,
+    changes: item.changes,
+    cik: item.cik,
+    range: item.range,
+    image: item.image,
+    id: key,
+  }));
+
+  dispatch(fetchDataSuccess(info));
+};

src/redux/configureStore.js

@@ -2,8 +2,8 @@ import { combineReducers, createStore, applyMiddleware } from 'redux';
 import logger from 'redux-logger';
 import thunk from 'redux-thunk';
 import { composeWithDevTools } from 'redux-devtools-extension';
-import companyReducer, { fetchData } from './company/company';
-import homeReducer from './homePage/home';
+import companyReducer from './company/company';
+import homeReducer, { fetchCompanies } from './homePage/home';
 
 const reducer = combineReducers({
   companyReducer, homeReducer,
@@ -13,5 +13,5 @@ const store = createStore(
   reducer,
   composeWithDevTools(applyMiddleware(thunk, logger)),
 );
-store.dispatch(fetchData());
+store.dispatch(fetchCompanies());
 export default store;

src/redux/homePage/home.js

@@ -0,0 +1,51 @@
+const FETCH_COMPANIES_SUCCESS = 'company-profile/company/FETCH_COMPANIES_SUCCESS';
+
+const initialState = [];
+
+const reducer = (state = initialState, action) => {
+  switch (action.type) {
+    case FETCH_COMPANIES_SUCCESS:
+      return [...action.payload];
+    default:
+      return state;
+  }
+};
+
+export default reducer;
+
+export const fetchCompaniesSuccess = (payload) => ({
+  type: FETCH_COMPANIES_SUCCESS,
+  payload,
+});
+
+export const fetchCompaniesOnNasdaq100 = () => async (dispatch) => {
+  const response = await fetch('https://financialmodelingprep.com/api/v3/nasdaq_constituent?apikey=c0ea38db29a1ee3da5d66580c8949d28');
+  const data = await response.json();
+  const info = data.map((item) => ({ symbol: item.symbol, name: item.name }));
+  dispatch(fetchCompaniesSuccess(info));
+};
+
+export const fetchComp = () => async (dispatch) => {
+  const responseDowjones = await fetch('https://financialmodelingprep.com/api/v3/dowjones_constituent?apikey=c0ea38db29a1ee3da5d66580c8949d28');
+  const dataDowjones = await responseDowjones.json();
+  const infoDowjones = dataDowjones.map((item) => ({
+    symbol: item.symbol,
+    name: item.name,
+    sectore: item.sector,
+    exchange: 'New York Stock Exchange NYSE',
+  }));
+  const responseNasdaq100 = await fetch('https://financialmodelingprep.com/api/v3/nasdaq_constituent?apikey=c0ea38db29a1ee3da5d66580c8949d28');
+  const dataNasdaq100 = await responseNasdaq100.json();
+  const infoNasdaq100 = dataNasdaq100.map((item) => ({
+    symbol: item.symbol,
+    name: item.name,
+    sectore: item.sector,
+    exchange: 'Nasdaq Global Select NASDAQ',
+  }));
+  const info = [...infoDowjones, ...infoNasdaq100];
+  dispatch(fetchCompaniesSuccess(info));
+};
+
+export const fetchCompanies = () => (dispatch) => {
+  dispatch(fetchComp());
+};