Merge pull request #57 from Team-Tukka/task/4-5/tmc

Task 4.5: Ændret billede-placeholders + mere.

src/components/editScooter/EditScooter.js

@@ -3,6 +3,7 @@ import GetCategoryById from '../categories/GetCategoryById';
 import { useParams } from 'react-router';
 import { useMutation, useQuery } from '@apollo/react-hooks';
 import { gql } from 'apollo-boost';
+import s3 from '../../config/spacesConfig';
 import './EditScooter.css';
 
 // Importér Reactstrap komponenter
@@ -106,6 +107,7 @@ function EditScooter(props) {
  const [description, setDescription] = useState(scoDescription);
  const [itemNo, setItemNo] = useState(scoItemNo);
  const [imagePath, setImagePath] = useState(scoImagePath);
+ const [imageFile, setImageFile] = useState('');
  const [alertStatus, setAlertStatus] = useState(false);
  const [modal, setModal] = useState(false);
 
@@ -131,6 +133,7 @@ function EditScooter(props) {
  brand: "${brand}"
  description: "${description}"
  itemNo: "${itemNo}"
+ imagePath: "${imagePath}"
  }
  ){
  name
@@ -140,6 +143,7 @@ function EditScooter(props) {
  brand
  description
  itemNo
+ imagePath
  }
  }
  `;
@@ -157,25 +161,68 @@ function EditScooter(props) {
  const [updateScooterById] = useMutation(UPDATE_SCOOTER_BY_ID);
  const [deleteScooterById] = useMutation(DELETE_SCOOTER_BY_ID);
 
+ // Håndter fejl ifm. billede
+ const handleImageError = () => {
+ console.log('Fejl!');
+ };
+
+ // Håndtér ændring af billede
+ const handleImageChange = event => {
+ if (event.target.files && event.target.files[0]) {
+ setImageFile(event.target.files);
+ const imageUrl =
+ 'https://tukka.fra1.digitaloceanspaces.com/' +
+ event.target.files[0].name;
+ setImagePath(imageUrl);
+ }
+ };
+
  // Håndtér indsendelse af redigerede elscooteroplysninger
  const handleSubmit = event => {
  event.preventDefault();
  if (name === '') {
  alert('Du skal som minimum udfylde et navn på elscooteren!');
  } else {
- updateScooterById({
- variables: {
- name: name,
- price: price,
- sku: sku,
- tags: tags,
- brand: brand,
- description: description,
- itemNo: itemNo
- }
- });
- // Sæt 'alertStatus' til at være true (så den vises)
- setAlertStatus(true);
+ // Håndtér ændring af billede
+ if (imageFile && imageFile[0]) {
+ const blob = imageFile[0];
+ const params = {
+ Body: blob,
+ Bucket: 'tukka',
+ Key: blob.name
+ };
+ // Uploader filen til DO Space
+ s3.putObject(params)
+ .on('build', request => {
+ request.httpRequest.headers.Host =
+ 'https://tukka.fra1.digitaloceanspaces.com/';
+ request.httpRequest.headers['Content-Length'] = blob.size;
+ request.httpRequest.headers['Content-Type'] = blob.type;
+ request.httpRequest.headers['x-amz-acl'] = 'public-read';
+ })
+ .send(err => {
+ if (err) handleImageError();
+ else {
+ const imageUrl =
+ 'https://tukka.fra1.digitaloceanspaces.com/' + blob.name;
+ setImagePath(imageUrl);
+ updateScooterById({
+ variables: {
+ name: name,
+ price: price,
+ sku: sku,
+ tags: tags,
+ brand: brand,
+ description: description,
+ itemNo: itemNo,
+ imagePath: imagePath
+ }
+ });
+ // Sæt 'alertStatus' til at være true (så den vises)
+ setAlertStatus(true);
+ }
+ });
+ }
  }
  };
 
@@ -489,6 +536,18 @@ function EditScooter(props) {
  </Tooltip>
  </InputGroup>
  </FormGroup>
+ <FormGroup>
+ <InputGroup>
+ <Input
+ required
+ className="inputStyles p-2"
+ type="file"
+ id="scooterImagePath"
+ accept="images/*"
+ onChange={handleImageChange}
+ />
+ </InputGroup>
+ </FormGroup>
  <img
  style={{ display: 'block' }}
  className="img-fluid"

src/components/scooters/ScooterCards.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { useQuery } from '@apollo/react-hooks';
 import { gql } from 'apollo-boost';
-import dummyImgScooter from '../../assets/images/dummyImgScooter.png';
 import GetCategoryById from '../categories/GetCategoryById';
 
 // Importér Reactstrap komponenter
@@ -31,6 +30,7 @@ function ScooterCards() {
  price
  priceVAT
  categoryId
+ imagePath
  }
  }
  `;
@@ -47,10 +47,11 @@ function ScooterCards() {
  _id,
  itemNo,
  name,
- description,
  price,
  priceVAT,
- categoryId
+ description,
+ categoryId,
+ imagePath
  } = scooter; // Destructuring
  return (
  <Col
@@ -63,7 +64,7 @@ function ScooterCards() {
  <CardImg
  width="100%"
  className="p-2"
- src={dummyImgScooter}
+ src={imagePath}
  alt={description}
  />
  </Link>

src/components/showScooter/ShowScooter.js

@@ -3,7 +3,6 @@ import GetCategoryById from '../categories/GetCategoryById';
 import { useParams } from 'react-router';
 import { useQuery } from '@apollo/react-hooks';
 import { gql } from 'apollo-boost';
-import dummyImgScooter from '../../assets/images/dummyImgScooter.png';
 import './ShowScooter.css';
 
 // Importér Reactstrap komponenter
@@ -26,6 +25,7 @@ function ShowScooter() {
  description
  itemNo
  categoryId
+ imagePath
  }
  }
  `;
@@ -46,6 +46,7 @@ function ShowScooter() {
  const scoDescription = data.getScooterById.description;
  const scoItemNo = data.getScooterById.itemNo;
  const scoCategoryId = data.getScooterById.categoryId;
+ const scoImagePath = data.getScooterById.imagePath;
 
  // Løber gennem alle tags og udskriver hvert enkelt som et list item
  const tagCloudItems = scoTagsArray.map(tag => (
@@ -61,8 +62,8 @@ function ShowScooter() {
  <Col lg="4" md="3" className="mb-4 mr-5">
  <img
  className="img-fluid"
- src={dummyImgScooter}
- alt={scoName}
+ src={scoImagePath}
+ alt={scoImagePath && scoImagePath.slice(42)}
  title={scoName}
  />
  </Col>

src/components/showSubCategory/ShowSubCategory.js

@@ -4,7 +4,6 @@ import { useParams } from 'react-router';
 import { useQuery } from '@apollo/react-hooks';
 import { gql } from 'apollo-boost';
 import './ShowSubCategory.css';
-import dummyImgDrawing from '../../assets/images/dummyImgDrawing.jpg';
 
 // Importér Reactstrap komponenter
 import { Container, Row, CardDeck } from 'reactstrap';
@@ -35,9 +34,12 @@ function ShowSubCategory() {
  <h3>{data.getSubCategoryById.name}</h3>
  <img
  className="fadeIn"
- src={dummyImgDrawing}
+ src={data.getSubCategoryById.imagePath}
  width="100%"
- alt="Splittegning"
+ alt={
+ data.getSubCategoryById.imagePath &&
+ data.getSubCategoryById.imagePath.slice(42)
+ }
  />
  <h3 className="mb-3">Reservedele</h3>
  <Row>