REFACTORING: Frontend source files should be split in several folders (…

…closes #139).

frontend/src/CroppedImage.js → frontend/src/components/CroppedImage.js

@@ -1,4 +1,4 @@
-import './CroppedImage.css';
+import '../styles/CroppedImage.css';
 
 import ReactCrop from 'react-image-crop';
 import 'react-image-crop/dist/ReactCrop.css';

frontend/src/EditableText.js → frontend/src/components/EditableText.js

@@ -1,4 +1,4 @@
-import './EditableText.css';
+import '../styles/EditableText.css';
 
 import { useState, useEffect } from 'react';
 import FormattedText from './FormattedText';

frontend/src/FutureDocument.js → frontend/src/components/FutureDocument.js

@@ -1,4 +1,4 @@
-import './FutureDocument.css';
+import '../styles/FutureDocument.css';
 
 import { useNavigate } from 'react-router-dom';
 import Card from 'react-bootstrap/Card';

frontend/src/Menu.js → frontend/src/components/Menu.js

@@ -1,4 +1,4 @@
-import './Menu.css';
+import '../styles/Menu.css';
 
 import Navbar from 'react-bootstrap/Navbar';
 import Container from 'react-bootstrap/Container';

frontend/src/Metadata.js → frontend/src/components/Metadata.js

@@ -1,4 +1,4 @@
-import './Metadata.css';
+import '../styles/Metadata.css';
 
 import { useEffect, useState } from 'react';
 import yaml from 'yaml';

frontend/src/Type.js → frontend/src/components/Type.js

@@ -1,5 +1,5 @@
-import './Metadata.css';
-import './Type.css';
+import '../styles/Metadata.css';
+import '../styles/Type.css';
 
 import { TagFill } from 'react-bootstrap-icons';
 import { useState, useContext } from 'react';

frontend/src/VideoComment.js → frontend/src/components/VideoComment.js

@@ -1,4 +1,4 @@
-import './VideoComment.css';
+import '../styles/VideoComment.css';
 
 function VideoComment({ children }) {
   const timecodeRegex = /(\d{2}:\d{2}:\d{2}\.\d{3}\s*-->\s*\d{2}:\d{2}:\d{2}\.\d{3})/;
@@ -31,4 +31,4 @@ function VideoComment({ children }) {
   }
 }
 
-export default VideoComment;
+export default VideoComment;

frontend/src/index.js

@@ -1,16 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
-import Menu from './Menu';
-import Page from './Page';
-import Bookshelf from './Bookshelf';
+import './styles/index.css';
+import Menu from './components/Menu';
+import Page from './routes/Page';
+import Bookshelf from './routes/Bookshelf';
 import Hyperglosae from './hyperglosae';
 import reportWebVitals from './reportWebVitals';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { NotificationContainer, NotificationManager } from 'react-notifications';
 import 'react-notifications/lib/notifications.css';
-import { TypesContext } from './TypesContext.js';
+import { TypesContext } from './components/TypesContext.js';
 
 const backend = new Hyperglosae(
   x => NotificationManager.warning(x, '', 2000)

frontend/src/Bookshelf.js → frontend/src/routes/Bookshelf.js

@@ -1,8 +1,8 @@
-import './Bookshelf.css';
+import '../styles/Bookshelf.css';
 
 import { useState, useEffect } from 'react';
 import Container from 'react-bootstrap/Container';
-import DocumentsCards from './DocumentsCards';
+import DocumentsCards from '../components/DocumentsCards';
 
 function Bookshelf({backend}) {
   const [documents, setDocuments] = useState([]);

frontend/src/Page.js → frontend/src/routes/Page.js

@@ -1,17 +1,17 @@
-import './Page.css';
+import '../styles/Page.css';
 
 import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import { useState, useEffect } from 'react';
 import { useParams, useLocation } from 'react-router-dom';
 import { BookmarkFill } from 'react-bootstrap-icons';
-import Metadata from './Metadata';
-import DocumentsCards from './DocumentsCards';
-import BrowseTools from './BrowseTools';
-import EditableText from './EditableText';
-import DocumentSources from './DocumentSources';
-import Type, { TypeBadge } from './Type';
+import Metadata from '../components/Metadata';
+import DocumentsCards from '../components/DocumentsCards';
+import BrowseTools from '../components/BrowseTools';
+import EditableText from '../components/EditableText';
+import DocumentSources from '../components/DocumentSources';
+import Type, { TypeBadge } from '../components/Type';
 
 function Page({backend}) {