A minimum viable product (#4)

* Lagt till prop-types i komponenter, lagt in buttons.jsx (reuseable komponent), lagt in adeditform.jsx, ändrat api.js för postBid och getBids till mockapi istället för sessionStorage, lagt in errorboundry.jsx och lagt in contextAPI.js. Uppdaterat index.jsx för errorboundary och context + ändrat app.jsx

* Utökad felhantering REST apier. Uppdaterat api.js,contextAPI.js, proposalboard.jsx, proposalform.jsx, biform.jsx & viewbid.jsx

* Fixat CSS så knapparna i header+footer ser bra ut på mobila enheter - widht, height och font-size

* Lagt till kommentar i errorboundry.jsx som beskriver error boundry komponenten

* Lagt till kommentar i button.jsx som beskriver reuseable komponenten. Tog även bort kommentar från errorboundry.jsx som var ej nödvändig.

* Fixade bugg i viewbids och bidform, råkade skicka currentUserData.author istället för currentUser. Så satte fel användare i komponenten. Nu åtgärdat

* Ändra om kommentartexten i button.jsx, konstigt formulerad.

* La till kommentarer i api.js för förtydligande + uppdaterade adboard.jsx med Redigera istället för texten Edit.

* Uppdatera texten i adeditform till Redigera annons istället för Edit ad

* Uppdatera readme - tjänster

* Uppdaterat faq.jsx med lite vanliga frågor och svar

* Lagt in lite dummy knappar och profilbild i profile.jsx inför presentation

* Uppdaterat viewbids.jsx med en Välj testare knapp när man är inloggad som företag. Förberedelse inför presentation.

* Uppdaterade från class till className i viewbids och profile

* Uppdaterade från class till className i viewbids och profile

* Uppdaterat lite texter i adeditform, addelconfirm och viewbids

* Uppdaterat README med förtydligande på hur man ladda ner/klonar projektet

README.md

@@ -1,6 +1,6 @@
 # CrowdTest
 
-1. Klona ner repot från GitHub (https://github.com/niborium/CrowdTest)
+1. Uppe till höger i repot (https://github.com/niborium/CrowdTest) så kan du trycka på Code. Här kan du välja att ladda ner (Download ZIP) eller välja att klona ner repot med git clone.
 2. Öppna projektet i din valda kodeditor.
 3. Kör därefter `npm ci ` i terminalen.
 4. Kör därefter `npm start` följande meddelande visas:
@@ -36,11 +36,17 @@ Installerad som paket (npm)
 
 ## Tjänster
 
-### [Mockapi](https://6268f190f2c0cdabac06d6a5.mockapi.io/ImprovementProposals)
+### [Mockapi](https://mockapi.io/)
 
 https://6268f190f2c0cdabac06d6a5.mockapi.io/ImprovementProposals (Endpoints: GET + POST)\
 Jag har skapat ett mockapi för att skicka och visa förbättringsförslag som inloggad användare eller företag.
 
 proposalform.jsx - Formuläret som skickar data via POST. (src/app/components)\
 proposalboard.jsx - Läser in samtliga förbättringsförslag via GET. (src/app/components)\
 api.js - Har funktioner för ovan två (för att separera UI från API funktionerna). (src/app/api)
+
+https://628a11e15da6ddfd5d5f66fa.mockapi.io/bids (Endpoints: GET + POST)\
+Jag har skapat ett mockapi för att skicka bud (som testare) och visa bud (som testare och företag).\
+bidform.jsx - Formuläret som skickar data via POST. (src/app/components)\
+viewbids.jsx - Läser in alla bud via GET. (src/app/components)\
+api.js - Har funktioner för ovan två (för att separera UI från API funktionerna). (src/app/api)

package.json

@@ -25,6 +25,7 @@
   "dependencies": {
     "axios": "^0.27.2",
     "parcel": "^2.5.0",
+    "prop-types": "^15.8.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   }

src/app/ErrorBoundry/errorboundry.jsx

@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+
+export class Errorboundry extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      hasError: false,
+      error: '',
+      errorInfo: '',
+    };
+  }
+
+  static getDerivedStateFromError(error) {
+    return {
+      hasError: true,
+    };
+  }
+  componentDidCatch(error, info) {
+    return {
+      error: error,
+      errorInfo: info,
+    };
+  }
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div>
+          <div className='error-boundry-container'>
+            <h1 className='error-header'>Something went wrong</h1>
+            <p className='error-message '>Error Message : {this.state.error}</p>
+            <p className='error-info'>
+              Error Information : {this.state.errorInfo}
+            </p>
+          </div>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+export default Errorboundry;

src/app/api/api.js

@@ -1,7 +1,6 @@
 import 'regenerator-runtime/runtime';
 import axios from 'axios';
 const lskey = 'ct-list';
-const bidkey = 'bid-data';
 
 //POST (Sends new post for adboard)
 export function postNewadd(
@@ -59,35 +58,58 @@ export function getAllpost() {
   var posts = JSON.parse(localStorage.getItem(lskey) || '[]');
   return posts;
 }
+//POST (Post proposal to mockapi from  proposalform)
 export const postProposal = async (description) => {
   await axios
-    .post('ImprovementProposals', { Description: description })
+    .post('https://6268f190f2c0cdabac06d6a5.mockapi.io/ImprovementProposals', {
+      Description: description,
+    })
     .then((res) => console.log(res))
-    .catch((err) => console.log(err));
+    .catch((err) => {
+      throw err;
+    });
 };
-
+//GET (Get all proposal from mockapi for proposalboard)
 export const getAllProposal = async () => {
   return await axios
-    .get('ImprovementProposals')
+    .get('https://6268f190f2c0cdabac06d6a5.mockapi.io/ImprovementProposals')
     .then((res) => res.data)
-    .catch((err) => console.log(err));
+    .catch((err) => {
+      throw err;
+    });
 };
-
-export function postBid(id, author, totalAmount) {
-  var existingBids = JSON.parse(sessionStorage.getItem(bidkey) || '[]');
-  var newBid = { id: id, author: author, totalAmount: totalAmount.toString() };
-  existingBids.push(newBid);
-  sessionStorage.setItem(bidkey, JSON.stringify(existingBids));
-}
-
-export function getBids(id) {
-  var bids = JSON.parse(sessionStorage.getItem(bidkey) || '[]');
-  return bids.filter((bid) => bid.id === id);
-}
-
+//POST (Post bid to mockapi from  bidform)
+export const postBid = async (id, author, totalAmount) => {
+  await axios
+    .post('https://628a11e15da6ddfd5d5f66fa.mockapi.io/bids', {
+      user: id,
+      author: author,
+      totalAmount: totalAmount.toString(),
+    })
+    .then((res) => res.data)
+    .catch((err) => {
+      throw err;
+    });
+};
+//GET (Get bids from mockapi for viewbids)
+export const getBids = async (id) => {
+  return await axios
+    .get('https://628a11e15da6ddfd5d5f66fa.mockapi.io/bids')
+    .then((res) => res.data)
+    .catch((err) => {
+      throw err;
+    });
+};
+//DELETE (Delete ad from localStorage - addelconfirm)
 export function deleteAd(id) {
   const bids = JSON.parse(localStorage.getItem(lskey) || '[]');
   const newAds = bids.filter((bid) => bid.id !== id);
 
   localStorage.setItem(lskey, JSON.stringify(newAds));
 }
+//PUT (Edit ad from localStorage - adeditform)
+export function editAd(data) {
+  const posts = JSON.parse(localStorage.getItem(lskey) || '[]');
+  const newPosts = posts.map((post) => (post.id === data.id ? data : post));
+  localStorage.setItem(lskey, JSON.stringify(newPosts));
+}

src/app/app.css

@@ -37,3 +37,69 @@ form {
   float: right;
   margin-left: 1rem;
 }
+
+.error-boundry-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.error-header {
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin-bottom: 1rem;
+}
+.error-message {
+  font-size: 1rem;
+  margin-top: 1rem;
+}
+.error-info {
+  font-size: 1rem;
+}
+
+.error-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  color: rgb(111, 4, 4);
+}
+.error-detail {
+  font-size: 1.2rem;
+  margin-top: 1rem;
+  color: rgb(255, 0, 0);
+}
+@media screen and (max-width: 480px) {
+#btnProfile {
+  width: 50px;
+  height: 30px;
+  font-size: 10px;
+}
+#btnLo{
+  width: 120px;
+  height: 40px;
+  font-size: 9px;
+}
+#btnAf{
+  width: 80px;
+  height: 50px;
+  font-size: 10px;
+}
+#btnProposal1{
+  width: 100px;
+  height: 40px;
+  font-size: 10px;
+}
+#btnProposal2{
+  width: 100px;
+  height: 40px;
+  font-size: 10px;
+}
+#btnFaq{
+  width: 100px;
+  height: 40px;
+  font-size: 10px;
+}
+} 

src/app/components/Error.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useIndexContext } from '../context/contextAPI';
+
+const Error = () => {
+  const { error, setError } = useIndexContext();
+
+  return (
+    <div className='error-container'>
+      <h1 className='error-header'>Something went wrong</h1>
+      <p className='error-detail'>Error message : {error}</p>
+    </div>
+  );
+};
+
+export default Error;