added BarCrawlItem styles etc

src/reduxStore/bars/actions.js

@@ -2,12 +2,12 @@ import * as actionTypes from './actionTypes';
 import { barApi } from '../../service/api/bar';
 
 export const getBars = () => async dispatch => {
-    dispatch({ type: actionTypes.GET_ALL_BARS });
+	dispatch({ type: actionTypes.GET_ALL_BARS });
 
-    try {
-        const bars = await barApi.getBars();
-        dispatch({ type: actionTypes.GET_ALL_BARS_SUCCESS, payload: bars });
-    } catch(e) {
-        dispatch({ type: actionTypes.GET_ALL_BARS_ERROR, payload: e });
-    }
-}
+	try {
+		const bars = await barApi.getBars();
+		dispatch({ type: actionTypes.GET_ALL_BARS_SUCCESS, payload: bars });
+	} catch (e) {
+		dispatch({ type: actionTypes.GET_ALL_BARS_ERROR, payload: e });
+	}
+};

src/reduxStore/bars/reducer.js

@@ -1,31 +1,31 @@
 import * as actionTypes from './actionTypes';
 
 const initialState = {
-    allBars: [],
-    isBarListLoading: false,
-    barListLoadingError: {},
-}
+	allBars: [],
+	isBarListLoading: false,
+	barListLoadingError: {},
+};
 
 export function barsReducer(state = initialState, action) {
-    switch (action.type) {
-        case actionTypes.GET_ALL_BARS:
-            return {
-                ...state,
-                isBarListLoading: true,
-            };
-        case actionTypes.GET_ALL_BARS_SUCCESS:
-            return {
-                ...state,
-                allBars: action.payload,
-                isBarListLoading: false,
-            };
-        case actionTypes.GET_ALL_BARS_ERROR:
-            return {
-                ...state,
-                isBarListLoading: false,    
-                barListLoadingError: action.payload,
-            }
-        default:
-            return state;
-    }
+	switch (action.type) {
+		case actionTypes.GET_ALL_BARS:
+			return {
+				...state,
+				isBarListLoading: true,
+			};
+		case actionTypes.GET_ALL_BARS_SUCCESS:
+			return {
+				...state,
+				allBars: action.payload,
+				isBarListLoading: false,
+			};
+		case actionTypes.GET_ALL_BARS_ERROR:
+			return {
+				...state,
+				isBarListLoading: false,
+				barListLoadingError: action.payload,
+			};
+		default:
+			return state;
+	}
 }

src/routes/ProtectedRoutes.js

@@ -3,7 +3,7 @@ import { Switch } from 'react-router-dom';
 // eslint-disable-next-line import/no-named-as-default-member
 import PrivateRoute from '../ui/components/AuthHOC';
 import BarCrawlPage from '../ui/components/BarCrawlPage';
-import Bars from '../ui/components/Bars';
+import BarPage from '../ui/components/BarPage';
 
 const ProtectedRoutes = () => {
 	return (
@@ -15,7 +15,7 @@ const ProtectedRoutes = () => {
 				<BarCrawlPage />
 			</PrivateRoute>
 			<PrivateRoute exact path="/adminBars">
-				<Bars />
+				<BarPage />
 			</PrivateRoute>
 		</Switch>
 	);

src/ui/components/BarCrawlPage/BarCrawlItem/BarCrawlItem.scss

@@ -0,0 +1,7 @@
+.barCrawl {
+    border: 2px solid rgb(212, 36, 36);
+    margin-left: 10px;
+    padding-left: 3px;
+    margin-top: 40px;
+    width: 300px;
+}

src/ui/components/BarCrawlPage/BarCrawlItem/BarCrawlItemComponent.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { object, func, string } from 'prop-types';
+import './BarCrawlItem.scss';
+
+const propTypes = {
+	barCrawlItem: object,
+	onClickHandler: func,
+	bcName: string,
+	bcTime: string,
+	bcPrice: string,
+};
+
+const BarCrawlItemComponent = ({ barCrawlItem }) => {
+	const { bcName, bcTime, bcPrice } = barCrawlItem;
+	function onClickHandler() {
+		console.log(barCrawlItem._id);
+	}
+	return (
+		<div className="barCrawl">
+			<h2>{bcName}</h2>
+			<p>{bcTime}</p>
+			<p>{bcPrice}</p>
+			<button onClick={onClickHandler} type="button">
+				test
+			</button>
+		</div>
+	);
+};
+
+BarCrawlItemComponent.propTypes = propTypes;
+
+export { BarCrawlItemComponent };

src/ui/components/BarCrawlPage/BarCrawlPageComponent.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import BarItem from './BarItem';
+import BarCrawlItem from './BarCrawlItem';
 import { array } from 'prop-types';
 
 const propTypes = {
@@ -12,7 +12,7 @@ const BarCrawlPageComponent = ({ barCrawlFeed }) => {
 		<div>
 			{barCrawlFeed.length > 0 &&
 				barCrawlFeed.map(barCrawlItem => {
-					return <BarItem barCrawlItem={barCrawlItem} key={barCrawlItem._id} />;
+					return <BarCrawlItem barCrawlItem={barCrawlItem} key={barCrawlItem._id} />;
 				})}
 		</div>
 	);

src/ui/components/BarPage/BarItem/BarItemComponent.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import './BarItem.scss';
+import { object } from 'prop-types';
+
+const propTypes = {
+	barItem: object,
+};
+
+const BarItemComponent = ({ barItem }) => {
+	const { barName, address, barInfo } = barItem;
+	function onClickHandler() {
+		console.log(barItem._id);
+	}
+	return (
+		<div className="bar">
+			<h2>{barName}</h2>
+			<p>{address}</p>
+			<p>{barInfo}</p>
+			<button onClick={onClickHandler} type="button">
+				test
+			</button>
+		</div>
+	);
+};
+
+BarItemComponent.propTypes = propTypes;
+
+export { BarItemComponent };

src/ui/components/BarPage/BarPageComponent.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import BarItem from './BarItem';
+
+const BarPageComponent = ({ allBars }) => {
+	return (
+		<div>
+			{allBars.map(item => {
+				return <BarItem barItem={item} />;
+			})}
+		</div>
+	);
+};
+
+export default BarPageComponent;

src/ui/components/BarPage/BarPageContainer.js

@@ -0,0 +1,28 @@
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import BarPageComponent from './BarPageComponent';
+import { getBars } from '../../../reduxStore/bars/actions';
+import { func } from 'prop-types';
+
+const propTypes = {
+	getBars: func,
+};
+
+const BarPageContainer = () => {
+	const allBars = useSelector(state => state.barsReducer.allBars);
+	const dispatch = useDispatch();
+
+	const useBar = someFetchActionCreator => {
+		useEffect(() => {
+			dispatch(someFetchActionCreator());
+		}, [someFetchActionCreator]);
+	};
+
+	useBar(getBars);
+
+	return <BarPageComponent allBars={allBars} />;
+};
+
+BarPageContainer.propTypes = propTypes;
+
+export default BarPageContainer;

src/ui/components/BarPage/index.js

@@ -0,0 +1,3 @@
+import BarPageContainer from './BarPageContainer';
+
+export default BarPageContainer;