Draft: Create reusable error and loading components

client/.prettierrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+	semi: true,
+	trailingComma: "all",
+	singleQuote: false,
+	printWidth: 80,
+	tabWidth: 4,
+	useTabs: true,
+};

client/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@reduxjs/toolkit": "^1.7.1",
     "@testing-library/jest-dom": "^5.15.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
@@ -13,9 +14,6 @@
     "react-redux": "^7.2.6",
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
-    "redux": "^4.1.2",
-    "redux-devtools-extension": "^2.13.9",
-    "redux-thunk": "^2.4.1",
     "web-vitals": "^1.1.2"
   },
   "scripts": {

client/src/components/common/ReusableErrorAlert.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { Alert } from "antd";
+
+const ReusableErrorAlert = ({ error }) => {
+	return error ? (
+		<Alert
+			type="error"
+			message={error}
+			showIcon
+			className="alert-margin--top"
+		/>
+	) : null;
+};
+
+export default ReusableErrorAlert;

client/src/components/common/ReusableLoader.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { Spin } from "antd";
+
+const ReusableLoader = ({ loading }) => {
+	return loading ? (
+		<div className="spinner">
+			<Spin size="large" />
+		</div>
+	) : null;
+};
+
+export default ReusableLoader;

client/src/pages/PropertyListPage.js

@@ -1,7 +1,9 @@
-import { Alert, Col, Row, Spin } from "antd";
+import { Col, Row } from "antd";
 import React, { useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { listProperties } from "../actions/propertyActions";
+import { fetchPropertyList } from "../store/property/propertiesThunks";
+import ReusableLoader from "../components/common/ReusableLoader";
+import ReusableErrorAlert from "../components/common/ReusableErrorAlert";
 
 function PropertyListPage() {
 	const dispatch = useDispatch();
@@ -11,37 +13,22 @@ function PropertyListPage() {
 	const { loading, error, properties } = propertiesList;
 
 	useEffect(() => {
-		dispatch(listProperties());
+		dispatch(fetchPropertyList());
 	}, [dispatch]);
 	return (
 		<>
-			{loading ? (
-				<div className="spinner">
-					<Spin size="large" />
-				</div>
-			) : error ? (
-				<Alert
-					type="error"
-					message={error}
-					showIcon
-					className="alert-margin--top"
-				/>
-			) : (
-				<>
-					<Row>
-						<Col span={24}>
-							<h2 className="margin--top">
-								Our Catalog of Properties
-							</h2>
-						</Col>
-						{properties.map((property) => (
-							<Col key={property.id} sm={12} md={6} lg={4} xs={3}>
-								<p>{property.title}</p>
-							</Col>
-						))}
-					</Row>
-				</>
-			)}
+			<ReusableLoader loading={loading} />
+			<ReusableErrorAlert error={error} />
+			<Row>
+				<Col span={24}>
+					<h2 className="margin--top">Our Catalog of Properties</h2>
+				</Col>
+				{properties.map((property) => (
+					<Col key={property.id} sm={12} md={6} lg={4} xs={3}>
+						<p>{property.title}</p>
+					</Col>
+				))}
+			</Row>
 		</>
 	);
 }

client/src/store/index.js

@@ -0,0 +1,10 @@
+import { configureStore } from "@reduxjs/toolkit";
+import propertiesListReducer from "./property/propertiesSlice";
+
+const rootReducer = {
+	propertiesList: propertiesListReducer,
+};
+
+const store = configureStore({ reducer: rootReducer });
+
+export default store;

client/src/store/property/propertiesSlice.js

@@ -0,0 +1,32 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+	properties: [],
+	loading: false,
+	error: undefined, // Optionally could be set to null or empty string. I find that undefined works best when using TypeScript
+};
+
+const propertiesSlice = createSlice({
+	name: "properties",
+	initialState,
+	reducers: {
+		propertyListRequest: (state, action) => {
+			state.loading = true;
+			state.error = undefined;
+		},
+		propertyListSuccess: (state, action) => {
+			state.loading = false;
+			state.error = undefined;
+			state.properties = action.payload.results;
+		},
+		propertyListFail: (state, action) => {
+			state.loading = false;
+			state.error = action.payload;
+		},
+	},
+});
+
+export const { propertyListRequest, propertyListSuccess, propertyListFail } =
+	propertiesSlice.actions;
+
+export default propertiesSlice.reducer;

client/src/store/property/propertiesThunks.js

@@ -0,0 +1,22 @@
+import axios from "axios";
+
+import {
+	propertyListRequest,
+	propertyListSuccess,
+	propertyListFail,
+} from "./propertiesSlice";
+
+export const fetchPropertyList = () => async (dispatch) => {
+	try {
+		dispatch(propertyListRequest());
+		const { data } = await axios.get("/api/v1/properties/all/");
+
+		dispatch(propertyListSuccess(data));
+	} catch (error) {
+		const errorMessage =
+			error.response && error.response.data.message
+				? error.response.data.message
+				: error.message;
+		dispatch(propertyListFail(errorMessage));
+	}
+};