Merge pull request #59 from psantos10/56_page_for_single_help_request

56 - Page for single help request

app/javascript/client/AppRouter.js

@@ -8,6 +8,7 @@ import Footer from './components/Footer';
 import HomePage from './components/HomePage';
 import RequestHelpPage from './components/RequestHelpPage';
 import HelpsPage from './components/HelpsPage';
+import HelpPage from './components/HelpPage';
 import HowItWorks from './components/HowItWorks';
 
 const AppRouter = () => (
@@ -20,9 +21,12 @@ const AppRouter = () => (
       <Route path="/preciso-de-ajuda">
         <RequestHelpPage />
       </Route>
-      <Route path="/quero-ajudar">
+      <Route exact path="/quero-ajudar">
         <HelpsPage />
       </Route>
+      <Route path="/quero-ajudar/:id">
+        <HelpPage />
+      </Route>
       <Route path="/como-funciona">
         <HowItWorks />
       </Route>

app/javascript/client/components/HelpPage/HelpPage.js

@@ -0,0 +1,61 @@
+import React, { useEffect } from 'react';
+import { connect } from 'react-redux';
+import { useParams } from 'react-router-dom';
+import PropTypes from 'prop-types';
+
+import { loadHelp } from '../../store/helps/actions';
+
+const HelpPage = (props) => {
+  const { id } = useParams();
+
+  useEffect(() => {
+    props.loadHelp(id);
+  }, []);
+
+  return (
+    <div className="container">
+      <br />
+      <h2 className="title" style={{ marginBottom: '0px' }}>
+        {props.help.title}
+      </h2>
+      <p style={{ marginBottom: '15px' }}>{props.help.type}</p>
+
+      <div>{props.help.description}</div>
+      <br />
+      <button className="button">Oferecer Ajuda</button>
+      <br />
+      <br />
+      <div className="tabs">
+        <ul>
+          <li className="is-active">
+            <a>Ofertas de Ajuda Concluídas</a>
+          </li>
+          <li>
+            <a>Ajudas Pendentes</a>
+          </li>
+        </ul>
+      </div>
+      <div>Em Desenvolvimento...</div>
+      <br />
+      <br />
+    </div>
+  );
+};
+
+HelpPage.propTypes = {};
+
+const mapStateToProps = (state) => {
+  return {
+    isLoading: state.helps.loading,
+    errors: state.helps.errors,
+    help: state.helps.currentHelp,
+  };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    loadHelp: (id) => dispatch(loadHelp(id)),
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(HelpPage);

app/javascript/client/components/HelpPage/index.js

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

app/javascript/client/store/helps/actions.js

@@ -5,6 +5,23 @@ import helpsSlice from './slice';
 
 const { actions } = helpsSlice;
 
+const loadHelp = (id) => {
+  return (dispatch, getState) => {
+    const state = getState();
+
+    dispatch(actions.loadHelpInit());
+
+    axios
+      .get(`/api/helps/${id}`)
+      .then((response) => {
+        dispatch(actions.loadHelpSuccess(response.data));
+      })
+      .catch((error) => {
+        dispatch(actions.loadHelpFailure(error.response.data));
+      });
+  };
+};
+
 const loadHelps = (currentPage, totalPerPage) => {
   return (dispatch, getState) => {
     const state = getState();
@@ -60,4 +77,4 @@ const createHelp = (payload) => {
   };
 };
 
-export { loadHelps, createHelp };
+export { loadHelp, loadHelps, createHelp };

app/javascript/client/store/helps/slice.js

@@ -4,6 +4,7 @@ import { createSlice } from '@reduxjs/toolkit';
 const initialState = {
   loading: false,
   errors: [],
+  currentHelp: {},
   collection: [],
   meta: {},
 };
@@ -13,6 +14,36 @@ const helpsSlice = createSlice({
   initialState,
 
   reducers: {
+    loadHelpInit: (state) => {
+      return produce(state, (draft) => {
+        draft.loading = true;
+        draft.errors = [];
+        draft.currentHelp = {};
+        draft.collection = [];
+        draft.meta = {};
+      });
+    },
+
+    loadHelpSuccess: (state, action) => {
+      return produce(state, (draft) => {
+        draft.loading = false;
+        draft.errors = [];
+        draft.currentHelp = action.payload.help;
+        draft.collection = [];
+        draft.meta = {};
+      });
+    },
+
+    loadHelpFailure: (state, action) => {
+      return produce(state, (draft) => {
+        draft.loading = false;
+        draft.errors = action.payload;
+        draft.currentHelp = {};
+        draft.collection = [];
+        draft.meta = {};
+      });
+    },
+
     loadHelpsInit: (state) => {
       return produce(state, (draft) => {
         draft.loading = true;