Merge pull request #49 from Team-Tukka/task/7-3/tmc

Task 7.3: ID i UI er nu blevet til navn

src/components/categories/AddNewSubCategory.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { useMutation } from '@apollo/react-hooks';
 import { gql } from 'apollo-boost';
 import client from '../../config/apolloClient';
+import GetCategories from './GetCategories';
 
 // Importér Reactstrap komponenter
 import { Form, InputGroup, FormGroup, Input, Button, Alert } from 'reactstrap';
@@ -12,7 +13,6 @@ function AddNewSubCategory() {
  client.cache.reset();
 
  const [name, setName] = useState('');
- const [categoryId, setCategoryId] = useState('');
  const [imagePath, setImagePath] = useState('');
  const [alertStatus, setAlertStatus] = useState(false);
 
@@ -46,15 +46,15 @@ function AddNewSubCategory() {
  addSubCategory({
  variables: {
  name: name,
- categoryId: categoryId,
+ categoryId: document.getElementById('chosenCategoryId').value,
  imagePath: imagePath
  }
  });
  // Sæt 'alertStatus' til at være true (så den vises)
  setAlertStatus(true);
  // Clear feltet, så der kan indtastes nye oplysninger
  setName('');
- setCategoryId('');
+ document.getElementById('chosenCategoryId').value = '';
  setImagePath('');
  }
  };
@@ -80,18 +80,7 @@ function AddNewSubCategory() {
  </FormGroup>
  <FormGroup>
  <InputGroup>
- <Input
- required
- className="inputStyles"
- type="text"
- name="categoryId"
- id="subCategoryCategoryId"
- minLength="1"
- maxLength="50"
- value={categoryId}
- placeholder="Kategori ID..."
- onChange={event => setCategoryId(event.target.value)}
- />
+ <GetCategories />
  </InputGroup>
  </FormGroup>
  <FormGroup>

src/components/categories/GetCategoryById.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useQuery } from '@apollo/react-hooks';
+import { gql } from 'apollo-boost';
+
+function GetCategoryById(props) {
+ const GET_SUB_CATEGORY_BY_ID = gql`
+ {
+ getCategoryById(_id: "${props.categoryId}") {
+ name
+ } 
+ }
+`;
+ // Anvend Query
+ const { loading, error, data } = useQuery(GET_SUB_CATEGORY_BY_ID);
+
+ if (loading) return <p>Loading...</p>;
+ if (error) return <p>Error!</p>;
+
+ return data.getCategoryById.name;
+}
+
+export default GetCategoryById;

src/components/categories/GetSubCategoryById.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useQuery } from '@apollo/react-hooks';
+import { gql } from 'apollo-boost';
+
+function GetSubCategoryById(props) {
+ const GET_SUB_CATEGORY_BY_ID = gql`
+ {
+ getSubCategoryById(_id: "${props.subCategoryId}") {
+ name
+ } 
+ }
+`;
+ // Anvend Query
+ const { loading, error, data } = useQuery(GET_SUB_CATEGORY_BY_ID);
+
+ if (loading) return <p>Loading...</p>;
+ if (error) return <p>Error!</p>;
+
+ return data.getSubCategoryById.name;
+}
+
+export default GetSubCategoryById;

src/components/editScooter/EditScooter.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import GetCategoryById from '../categories/GetCategoryById';
 import { useParams } from 'react-router';
 import { useMutation, useQuery } from '@apollo/react-hooks';
 import { gql } from 'apollo-boost';
@@ -484,7 +485,7 @@ function EditScooter(props) {
  </InputGroup>
  </FormGroup>
  <FormText color="muted" className="mb-3">
- Oprettet i kategorien: {scoCategoryId}
+ Oprettet i kategorien: <GetCategoryById categoryId={scoCategoryId} />
  </FormText>
  {/* Vis alert, hvis elscooteren opdateres korrekt */}
  {alertStatus === true && (

src/components/editSparepart/EditSparepart.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import GetSubCategoryById from '../categories/GetSubCategoryById';
 import { useParams } from 'react-router';
 import { useMutation, useQuery } from '@apollo/react-hooks';
 import { gql } from 'apollo-boost';
@@ -285,7 +286,8 @@ function EditSparepart(props) {
  )}
  </FormGroup>
  <FormText color="muted" className="mb-3">
- Oprettet under splittegningen: {spaSubCategoryId}
+ Oprettet under splittegningen:{' '}
+ <GetSubCategoryById subCategoryId={spaSubCategoryId} />
  </FormText>
  {/* Vis alert, hvis reservedelen opdateres korrekt */}
  {alertStatus === true && (

src/components/products/ScooterRows.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { useQuery } from '@apollo/react-hooks';
 import { gql } from 'apollo-boost';
+import GetCategoryById from '../categories/GetCategoryById';
 
 function ScooterRows() {
  // Definér først query til at hente array med alle elscootere
@@ -61,7 +62,7 @@ function ScooterRows() {
  </td>
  <td>
  <Link to={`/editScooter/${_id}`} className="linkStyles">
- {categoryId}
+ <GetCategoryById categoryId={categoryId} />
  </Link>
  </td>
  </tr>

src/components/products/SparepartRows.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { useQuery } from '@apollo/react-hooks';
 import { gql } from 'apollo-boost';
+import GetSubCategoryById from '../categories/GetSubCategoryById';
 
 function SparepartRows() {
  // Definér først query til at hente array med alle reservedele
@@ -13,7 +14,7 @@ function SparepartRows() {
  name
  price
  priceVAT
- categoryId
+ subCategoryId
  }
  }
  `;
@@ -36,7 +37,7 @@ function SparepartRows() {
 
  // Returnér nu alle props for hvert enkel reservedel som en tabel-række
  return data.getSpareparts.map((sparepart, index) => {
- const { _id, itemNo, name, price, priceVAT, categoryId } = sparepart; // Destructuring
+ const { _id, itemNo, name, price, priceVAT, subCategoryId } = sparepart; // Destructuring
  return (
  <tr key={_id} className="tableRowStyles">
  <td>
@@ -61,7 +62,7 @@ function SparepartRows() {
  </td>
  <td>
  <Link to={`/editSparepart/${_id}`} className="linkStyles">
- {categoryId}
+ <GetSubCategoryById subCategoryId={subCategoryId} />
  </Link>
  </td>
  </tr>

src/components/scooters/ScooterCards.js

@@ -3,6 +3,7 @@ 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
 import {
@@ -83,7 +84,7 @@ function ScooterCards() {
  <CardFooter className="veryLightGreenBg">
  Kategori:{' '}
  <Link to="#" className="linkStyles">
- {categoryId}
+ <GetCategoryById categoryId={categoryId} />
  </Link>
  </CardFooter>
  </Card>

src/components/showScooter/ShowScooter.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import GetCategoryById from '../categories/GetCategoryById';
 import { useParams } from 'react-router';
 import { useQuery } from '@apollo/react-hooks';
 import { gql } from 'apollo-boost';
@@ -77,7 +78,7 @@ function ShowScooter() {
  <b>SKU:</b> {scoSku}
  </li>
  <li>
- <b>Kategori:</b> {scoCategoryId}
+ <b>Kategori:</b> <GetCategoryById categoryId={scoCategoryId} />
  </li>
  <li className="my-4">{scoDescription}</li>
  <li className="priceGlow">{scoPrice} DKK</li>

src/components/showSparepart/ShowSparepart.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import GetSubCategoryById from '../categories/GetSubCategoryById';
 import { useParams } from 'react-router';
 import { useQuery } from '@apollo/react-hooks';
 import { gql } from 'apollo-boost';
@@ -19,7 +20,6 @@ function ShowSparepart() {
  name,
  price,
  priceVAT,
- categoryId,
  subCategoryId
  }
  }
@@ -36,7 +36,6 @@ function ShowSparepart() {
  const spaPrice = data.getSparepartById.price;
  const spaPriceVAT = data.getSparepartById.priceVAT;
  const spaItemNo = data.getSparepartById.itemNo;
- const spaCategoryId = data.getSparepartById.categoryId;
  const spaSubCategoryId = data.getSparepartById.subCategoryId;
 
  return (
@@ -48,11 +47,9 @@ function ShowSparepart() {
  <li>
  <b>Enhedsnummer:</b> {spaItemNo}
  </li>
- <li>
- <b>Kategori/model:</b> {spaCategoryId}
- </li>
  <li className="mb-4">
- <b>Underkategori/splittegning:</b> {spaSubCategoryId}
+ <b>Underkategori/splittegning:</b>{' '}
+ <GetSubCategoryById subCategoryId={spaSubCategoryId} />
  </li>
  <li className="priceGlow">{spaPrice} DKK</li>
  <li className="priceVAT">{spaPriceVAT} DKK inkl. moms</li>