diff --git a/src/App.jsx b/src/App.jsx deleted file mode 100644 index ccd7e39..0000000 --- a/src/App.jsx +++ /dev/null @@ -1,37 +0,0 @@ -import { React, useEffect } from 'react'; -import { useDispatch } from 'react-redux'; -import { Routes, Route } from 'react-router-dom'; - -import fetchCompanies from './services/FMPAPI/FMPAPI.js'; -import Header from './components/Header'; -import Home from './pages/Home'; -import CompanyPage from './pages/CompanyPage'; - -const App = () => { - const dispatch = useDispatch(); - - useEffect(() => { - dispatch(fetchCompanies()); - }, [dispatch]); - - return ( -
-
- - - } /> - } /> - -

Not Found

- - )} - /> - -
- ); -}; - -export default App; diff --git a/src/components/CompaniesList.jsx b/src/components/CompaniesList.jsx deleted file mode 100644 index 6b0331d..0000000 --- a/src/components/CompaniesList.jsx +++ /dev/null @@ -1,41 +0,0 @@ -import PropTypes from 'prop-types'; -import { useSelector } from 'react-redux'; -import Spinner from 'react-bootstrap/Spinner'; -import CompanyCard from './CompanyCard'; - -const CompaniesList = ({ companies }) => { - const { loading, error } = useSelector((state) => state.companies); - - if (loading) { - return ( -
- - Loading... - -
- ); - } - - if (error) { - return ( -
-

Something went wrong...

-

{error}

-
- ); - } - - return ( -
- {companies.map((company, index) => ( - - ))} -
- ); -}; - -CompaniesList.propTypes = { - companies: PropTypes.arrayOf(PropTypes.shape({})).isRequired, -}; - -export default CompaniesList; diff --git a/src/components/CompanyCard.jsx b/src/components/CompanyCard.jsx deleted file mode 100644 index 6c7a536..0000000 --- a/src/components/CompanyCard.jsx +++ /dev/null @@ -1,47 +0,0 @@ -import PropTypes from 'prop-types'; -import { FaArrowRight } from 'react-icons/fa'; -import Card from 'react-bootstrap/Card'; -import { Link } from 'react-router-dom'; - -const CompanyCard = ({ company, index }) => { - const cardBgColor = index % 4 === 0 || index % 4 === 3 ? 'var(--bright-pink-2)' : 'var(--bright-pink)'; - // * the above will give us an alternate shade of pink on a 2 layout grid - - return ( - - - - - - - {company.symbol} - - {company.price} - - - - ); -}; - -CompanyCard.propTypes = { - company: PropTypes.shape({ - image: PropTypes.string.isRequired, - companyName: PropTypes.string.isRequired, - symbol: PropTypes.string.isRequired, - price: PropTypes.string.isRequired, - }).isRequired, - index: PropTypes.number.isRequired, -}; - -export default CompanyCard; diff --git a/src/components/Header.jsx b/src/components/Header.jsx deleted file mode 100644 index 2a7ec65..0000000 --- a/src/components/Header.jsx +++ /dev/null @@ -1,20 +0,0 @@ -import { Container, Navbar } from 'react-bootstrap'; -import { NavLink } from 'react-router-dom'; -import { FaAngleLeft, FaMicrophone, FaCog } from 'react-icons/fa'; - -const Header = () => ( - - - - - -

finance

-
- - -
- - -); - -export default Header; diff --git a/src/components/SearchBar.jsx b/src/components/SearchBar.jsx deleted file mode 100644 index 9851e3e..0000000 --- a/src/components/SearchBar.jsx +++ /dev/null @@ -1,44 +0,0 @@ -import { useDispatch } from 'react-redux'; -import { useState, useEffect } from 'react'; -import { FaSearch } from 'react-icons/fa'; -import { searchCompanies } from '../redux/companies/companiesSlice.js'; - -const SearchBar = () => { - const [searchValue, setSearchValue] = useState(''); - const [showSearchBar, setShowSearchBar] = useState(true); - const dispatch = useDispatch(); - - const onHandleChange = (e) => { - setSearchValue(e.target.value); - }; - - useEffect(() => { - dispatch(searchCompanies(searchValue)); - }, [searchValue, dispatch]); - - return ( - <> - {showSearchBar ? ( - - ) : ( - - )} - - ); -}; - -export default SearchBar; diff --git a/src/index.jsx b/src/index.jsx deleted file mode 100644 index 6295360..0000000 --- a/src/index.jsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import { BrowserRouter } from 'react-router-dom'; -import { Provider } from 'react-redux'; - -import 'bootstrap/dist/css/bootstrap.min.css'; -import './styles/index.scss'; -import App from './App'; -import store from './redux/config-store.js'; - -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render( - - - - - - - , -); diff --git a/src/pages/CompanyPage.jsx b/src/pages/CompanyPage.jsx deleted file mode 100644 index f0c24d9..0000000 --- a/src/pages/CompanyPage.jsx +++ /dev/null @@ -1,65 +0,0 @@ -import { useLocation } from 'react-router-dom'; -import { useSelector } from 'react-redux'; -import { FaArrowRight } from 'react-icons/fa'; -import ListGroup from 'react-bootstrap/ListGroup'; - -const CompanyPage = () => { - const location = useLocation(); - const queryParams = new URLSearchParams(location.search); - const companySymbol = queryParams.get('symbol'); - - const companies = useSelector((state) => state.companies.companies); - - const company = companies.filter( - (company) => company.symbol === companySymbol, - )[0]; - - return ( - <> -
- {company.companyName} -
-

{company.symbol}

- {company.price} -
-
-
- {company.companyName} -  info -
-
- - {Object.keys(company) - .filter((value) => value !== 'image') - .map((value) => ( - -
- {value} -
- {company[value]} - -
-
- - ))} - -
- - ); -}; - -export default CompanyPage; diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx deleted file mode 100644 index f6b0af9..0000000 --- a/src/pages/Home.jsx +++ /dev/null @@ -1,41 +0,0 @@ -import { useSelector } from 'react-redux'; -import CompaniesList from '../components/CompaniesList'; -import logo from '../assets/images/finance-chart.png'; -import SearchBar from '../components/SearchBar'; - -const Home = () => { - let companies = useSelector((state) => state.companies); - - if (companies.filteredCompanies.length === 0) { - companies = companies.companies; - } else { - companies = companies.filteredCompanies; - } - - return ( - <> -
- finance app logo -
-

Stocks

- - {companies.length} -  companies - -
-
-
-
Stats by Company
- -
-
- -
- - ); -}; - -export default Home; diff --git a/src/services/FMPAPI/FMPAPI.js b/src/services/FMPAPI/FMPAPI.js deleted file mode 100644 index 1706ec3..0000000 --- a/src/services/FMPAPI/FMPAPI.js +++ /dev/null @@ -1,30 +0,0 @@ -import { createAsyncThunk } from '@reduxjs/toolkit'; -import axios from 'axios'; -import companiesData from '../../db/companiesData.json'; -import filterCompaniesData from '../../utils/filterCompaniesData.js'; - -const fetchCompanies = createAsyncThunk( - 'companies/fetchCompanies', - async (thunkAPI) => { - const apiKey = process.env.REACT_APP_FMP_API_KEY; - - if (localStorage.getItem('companies')) { - return JSON.parse(localStorage.getItem('companies')); - } - - try { - const companies = await axios.get( - `https://financialmodelingprep.com/api/v3/profile/${companiesData.symbols.toString()}?apikey=${apiKey}`, - ); - - const filteredCompaniesData = companies.data.map((company) => filterCompaniesData(company)); - - localStorage.setItem('companies', JSON.stringify(filteredCompaniesData)); - return filteredCompaniesData; - } catch (error) { - return thunkAPI.rejectWithValue({ error: error.message }); - } - }, -); - -export default fetchCompanies; diff --git a/src/utils/filterCompaniesData.js b/src/utils/filterCompaniesData.js deleted file mode 100644 index f41bc3f..0000000 --- a/src/utils/filterCompaniesData.js +++ /dev/null @@ -1,16 +0,0 @@ -const filterCompaniesData = (company) => ({ - symbol: company.symbol, - price: `USD ${company.price}`, - beta: company.beta, - volAvg: company.volAvg, - mktCap: company.mktCap, - lastDiv: company.lastDiv, - range: company.range, - changes: company.changes, - companyName: company.companyName, - sector: company.sector, - website: company.website, - image: company.image, -}); - -export default filterCompaniesData;