Merge pull request #61 from Team-Tukka/task/6/tmc

Task 6: Regex på elscooter beskrivelsen

src/App.js

@@ -58,7 +58,7 @@ function App() {
  <Router>
  <ApolloProvider client={client}>
  <Header />
- <AdminNav />
+ {localStorage.token && <AdminNav />}
  <Switch>
  {/* Routes til offentligt tilgængeligt indhold */}
  <Route path="/" exact component={Textarea} />

src/components/addNewScooter/AddNewScooter.js

@@ -435,10 +435,12 @@ function AddNewScooter() {
  name="description"
  id="scooterDescription"
  minLength="1"
- maxLength="200"
- value={description}
+ maxLength="500"
+ defaultValue={description}
  placeholder="Beskrivelse..."
- onChange={event => setDescription(event.target.value)}
+ onChange={event =>
+ setDescription(event.target.value.replace(/\r?\n/g, '<br>'))
+ }
  />
  <InputGroupAddon
  addonType="append"

src/components/adminNav/AdminNav.js

@@ -15,39 +15,46 @@ import {
  NavLink
 } from 'reactstrap';
 
-// ME query defineres
-export const ME = gql`
- {
- me {
- _id
- }
- }
-`;
-
 // AdminNav komponent
-function AdminNav(props) {
+function AdminNav() {
+ // ME2 query defineres
+ const ME2 = gql`
+ {
+ me2(token: ${localStorage.token}) {
+ _id
+ firstName
+ lastName
+ }
+ }
+ `;
+
+ // Client initialiseres til at være ME2 query
+ const { loading, error, data, client } = useQuery(ME2);
+
  // States med React Hooks
  const [isOpen, setIsOpen] = useState(false);
 
  // Toggle til at åbne og lukke AdminNav
  const toggle = () => setIsOpen(!isOpen);
 
- // Client initialiseres til at være ME query
- const { client } = useQuery(ME);
-
  // Funktion der smider token og redirecter til login-siden
  const Logout = () => {
  localStorage.clear();
  client.resetStore();
  window.location = '/login';
  };
 
+ if (loading) return <p className="text-center m-3">Loading...</p>;
+ if (error) return <p className="text-center m-3">Error!</p>;
+
  return (
  <React.Fragment>
  {localStorage.token && (
  <Navbar className="veryLightGreenBg adminNavStyles" light expand="md">
  <Container>
- <NavbarBrand></NavbarBrand>
+ <NavbarBrand href="/welcome">
+ {data.me2.firstName + ' ' + data.me2.lastName}
+ </NavbarBrand>
  <NavbarToggler onClick={toggle} />
  <Collapse isOpen={isOpen} navbar>
  <Nav className="ml-auto" navbar>

src/components/editScooter/EditScooter.js

@@ -206,23 +206,23 @@ function EditScooter(props) {
  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);
  }
  });
  }
+ 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);
  }
  };
 
@@ -261,7 +261,6 @@ function EditScooter(props) {
  </InputGroupText>
  </InputGroupAddon>
  <Input
- required
  className="inputStylesEditScooter"
  type="text"
  name="itemNo"
@@ -310,7 +309,6 @@ function EditScooter(props) {
  </InputGroupText>
  </InputGroupAddon>
  <Input
- required
  className="inputStylesEditScooter"
  type="text"
  name="name"
@@ -552,9 +550,11 @@ function EditScooter(props) {
  id="scooterDescription"
  minLength="1"
  maxLength="200"
- defaultValue={description}
+ defaultValue={description.replace(/<br ?\/?>/g, '\n')}
  placeholder="Beskrivelse..."
- onChange={event => setDescription(event.target.value)}
+ onChange={event =>
+ setDescription(event.target.value.replace(/\r?\n/g, '<br>'))
+ }
  />
  <InputGroupAddon
  addonType="append"
@@ -587,7 +587,6 @@ function EditScooter(props) {
  <FormGroup>
  <InputGroup>
  <Input
- required
  className="inputStyles p-2"
  type="file"
  id="scooterImagePath"

src/components/editSparepart/EditSparepart.js

@@ -168,7 +168,6 @@ function EditSparepart(props) {
  </InputGroupText>
  </InputGroupAddon>
  <Input
- required
  className="inputStylesEditSparepart"
  type="text"
  name="itemNo"
@@ -217,7 +216,6 @@ function EditSparepart(props) {
  </InputGroupText>
  </InputGroupAddon>
  <Input
- required
  className="inputStylesEditSparepart"
  type="text"
  name="name"