Api route protection & Item editing

Added
- ability to edit items including ability to add images to items
- corresponding api routes to complete aforementioned actions

Updated:
- Api route protection to follow workflow recommended by the 'NextAuth'-library
- Multiple links across app to avoid react hydration errors

+ some minor changes and updated libraries

.babelrc

@@ -1,4 +1,4 @@
 {
-    "presets": ["next/babel"],
-    "plugins": ["superjson-next"]
+	"presets": ["next/babel"],
+	"plugins": ["superjson-next"]
 }

components/NotAuthenticated.js

@@ -1,13 +1,13 @@
-import { Heading, Button } from '@chakra-ui/react';
-import Link from '../components/Link';
+import { Heading, Button, Link } from '@chakra-ui/react';
+import NextLink from 'next/link';
 
 export default function NotAuthenticated() {
-    return (
-        <>
-            <Heading>Ei käyttöoikeutta</Heading>
-            <Link href='/'>
-                <Button>Palaa etusivulle</Button>
-            </Link>
-        </>
-    );
+	return (
+		<>
+			<Heading>Ei käyttöoikeutta</Heading>
+			<Link as={NextLink} href='/'>
+				<Button>Palaa etusivulle</Button>
+			</Link>
+		</>
+	);
 }

components/ReservationTable.js

@@ -1,36 +1,47 @@
 import React from 'react';
 
-import { Table, Thead, Tbody, Tr, Th, Td, TableContainer } from '@chakra-ui/react';
+import { Table, Thead, Tbody, Tr, Th, Td, TableContainer, Link } from '@chakra-ui/react';
 
-import Link from './Link';
+import NextLink from 'next/link';
+import { useSession } from 'next-auth/react';
 
 const DateTimeToString = (date) => {
-    return date.toLocaleString('fi-FI');
+	return date.toLocaleString('fi-FI');
 };
 
 export default function ReservationTable({ reservations }) {
-    return (
-        <TableContainer>
-            <Table>
-                <Thead>
-                    <Tr>
-                        <Th>Alku</Th>
-                        <Th>Loppu</Th>
-                        <Th>Määrä</Th>
-                    </Tr>
-                </Thead>
-                <Tbody>
-                    {reservations.map((reservation) => {
-                        return (
-                            <Tr key={reservation.id}>
-                                <Td>{DateTimeToString(reservation.loan.startTime)}</Td>
-                                <Td>{DateTimeToString(reservation.loan.endTime)}</Td>
-                                <Td>{reservation.amount}</Td>
-                            </Tr>
-                        );
-                    })}
-                </Tbody>
-            </Table>
-        </TableContainer>
-    );
+	const { data: session } = useSession();
+
+	return (
+		<TableContainer>
+			<Table>
+				<Thead>
+					<Tr>
+						{session?.user?.group === 'ADMIN' ? <Th>Varaaja</Th> : null}
+						<Th>Alku</Th>
+						<Th>Loppu</Th>
+						<Th>Määrä</Th>
+					</Tr>
+				</Thead>
+				<Tbody>
+					{reservations.map((reservation) => {
+						return (
+							<Tr key={reservation.id}>
+								{session?.user?.group === 'ADMIN' ? (
+									<Td>
+										<Link as={NextLink} href={`/loan/${reservation.loan.id}`}>
+											{reservation.loan.user.name}
+										</Link>
+									</Td>
+								) : null}
+								<Td>{DateTimeToString(reservation.loan.startTime)}</Td>
+								<Td>{DateTimeToString(reservation.loan.endTime)}</Td>
+								<Td>{reservation.amount}</Td>
+							</Tr>
+						);
+					})}
+				</Tbody>
+			</Table>
+		</TableContainer>
+	);
 }

components/ReservationTableLoanView.js

@@ -1,51 +1,43 @@
 import React from 'react';
 
-import {
-    Table,
-    Thead,
-    Tbody,
-    Tr,
-    Th,
-    Td,
-    TableContainer,
-} from '@chakra-ui/react';
+import { Table, Thead, Tbody, Tr, Th, Td, TableContainer, Link } from '@chakra-ui/react';
 
-import Link from './Link';
+import NextLink from 'next/link';
 
 const DateTimeToString = (date) => {
-    return date.toLocaleString('fi-FI');
+	return date.toLocaleString('fi-FI');
 };
 
 export default function ReservationTableLoanView({ loan }) {
-    return (
-        <TableContainer>
-            <Table>
-                <Thead>
-                    <Tr>
-                        <Th>Nimi</Th>
-                        <Th>Alku</Th>
-                        <Th>Loppu</Th>
-                        <Th>Määrä</Th>
-                        <Th></Th>
-                    </Tr>
-                </Thead>
-                <Tbody>
-                    {loan.reservations.map((reservation) => {
-                        return (
-                            <Tr key={reservation.id}>
-                                <Td>
-                                    <Link href={`/item/${reservation.item.id}`}>
-                                        {reservation.item.name}
-                                    </Link>
-                                </Td>
-                                <Td>{DateTimeToString(loan.startTime)}</Td>
-                                <Td>{DateTimeToString(loan.endTime)}</Td>
-                                <Td>{reservation.amount}</Td>
-                            </Tr>
-                        );
-                    })}
-                </Tbody>
-            </Table>
-        </TableContainer>
-    );
+	return (
+		<TableContainer>
+			<Table>
+				<Thead>
+					<Tr>
+						<Th>Nimi</Th>
+						<Th>Alku</Th>
+						<Th>Loppu</Th>
+						<Th>Määrä</Th>
+						<Th></Th>
+					</Tr>
+				</Thead>
+				<Tbody>
+					{loan.reservations.map((reservation) => {
+						return (
+							<Tr key={reservation.id}>
+								<Td>
+									<Link as={NextLink} href={`/item/${reservation.item.id}`}>
+										{reservation.item.name}
+									</Link>
+								</Td>
+								<Td>{DateTimeToString(loan.startTime)}</Td>
+								<Td>{DateTimeToString(loan.endTime)}</Td>
+								<Td>{reservation.amount}</Td>
+							</Tr>
+						);
+					})}
+				</Tbody>
+			</Table>
+		</TableContainer>
+	);
 }