feat: Initialize edit entry page

taxonomy-editor-frontend/src/App.js

@@ -2,6 +2,7 @@ import { createTheme, CssBaseline, ThemeProvider } from "@mui/material";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import ResponsiveAppBar from "./components/ResponsiveAppBar";
 import Entry from "./pages/allentries";
+import EditEntry from "./pages/editentry";
 import Home from './pages/home';
 
 const theme = createTheme({
@@ -20,6 +21,7 @@ function App() {
           <Routes>
             <Route path="/" element={<Home />} />
             <Route path="/entry" element={<Entry />} />
+            <Route path="/entry/:id" element={<EditEntry />} />
           </Routes>
         </div>
     </Router>

taxonomy-editor-frontend/src/pages/editentry/AccumulateAllComponents.jsx

@@ -0,0 +1,47 @@
+import { useEffect, useState } from "react";
+import useFetch from "../../components/useFetch";
+import { API_URL } from "../../constants";
+import ListAllEntryProperties from "./ListAllEntryProperties";
+import ListAllOtherProperties from "./ListAllOtherProperties";
+
+// Used for rendering node information
+// If node is an "entry": Relations, translations, comments and properties are rendered
+// If node is an "stopword/synonym": Stopwords/synonyms, language and comments are rendered
+// If node is "header/footer": Comments are rendered
+
+const AccumulateAllComponents = ({ id }) => {
+
+    // Finding URL to send requests
+    let url = API_URL;
+    let isEntry = false;
+    if (id.startsWith('__header__')) { url += 'header/' }
+    else if (id.startsWith('__footer__')) { url += 'footer/' }
+    else if (id.startsWith('synonym')) { url += `synonym/${id}/` }
+    else if (id.startsWith('stopword')) { url += `stopword/${id}/` }
+    else { url += `entry/${id}/`; isEntry = true; }
+
+    const [nodeObject, setNodeObject] = useState(null); // Storing node information
+    const { data: node, error, isPending } = useFetch(url);
+
+    // Setting state of node after fetch
+    useEffect(() => {
+        setNodeObject(node?.[0]);
+    }, [node])
+
+    // Displaying errors if any
+    if (error) {
+        return (<div>{error}</div>)
+    }
+
+    return ( 
+        <div className="node-attributes">
+            {/* Based on isEntry, respective components are rendered */}
+            { isEntry ? 
+                <>  <ListAllEntryProperties nodeObject={nodeObject} setNodeObject={setNodeObject} /> </> :
+                <>  <ListAllOtherProperties nodeObject={nodeObject} id={id} setNodeObject={setNodeObject} /> </>
+            }
+        </div>
+     );
+}
+
+export default AccumulateAllComponents;

taxonomy-editor-frontend/src/pages/editentry/ListAllEntryProperties.jsx

@@ -0,0 +1,21 @@
+import { Typography } from "@mui/material";
+import ListAllProperties from "./ListAllProperties";
+import ListTranslations from "./ListTranslations";
+
+// Parent component used for rendering sub-components
+// Sub-components are used to render info for an "entry"
+
+const ListAllEntryProperties = ({ nodeObject, setNodeObject }) => {
+
+    let languageNames = new Intl.DisplayNames(['en'], {type: 'language'});
+    return (
+        <div className="allEntryProperties">
+            <Typography sx={{ml: 4}} variant='h6'>
+                { nodeObject && <ListTranslations nodeObject={nodeObject} languageNames={languageNames} setNodeObject={setNodeObject} /> }
+            </Typography>
+            { nodeObject && <ListAllProperties nodeObject={nodeObject} setNodeObject={setNodeObject} /> }
+        </div>
+    );
+}
+
+export default ListAllEntryProperties;

taxonomy-editor-frontend/src/pages/editentry/ListAllOtherProperties.jsx

@@ -0,0 +1,27 @@
+import { Box, Typography } from "@mui/material";
+
+// Parent component used for rendering info
+// on a stopword, synonym, header or footer
+
+const ListAllOtherProperties = ({ nodeObject, id, setNodeObject }) => {
+
+    return ( 
+        <Box className="all-node-properties">
+            {/* Comments */}
+            <Typography sx={{ml: 4, mt: 2, mb: 1}} variant='h5'>Comments</Typography>
+
+            {/* Stopwords or Synonyms */}
+            <div className="tags">
+                {id.startsWith('stopword') ?
+                    <Typography sx={{ml: 4, mt: 1, mb: 1}} variant='h5'>
+                        Stopwords
+                    </Typography> :
+                    <Typography sx={{ml: 4, mt: 1, mb: 1}} variant='h5'>
+                        Synonyms
+                    </Typography>}
+            </div>
+        </Box>
+     );
+}
+
+export default ListAllOtherProperties;

taxonomy-editor-frontend/src/pages/editentry/ListAllProperties.jsx

@@ -0,0 +1,17 @@
+import { Typography } from "@mui/material";
+
+// Sub-component used for rendering comments and properties of an "entry"
+
+const ListAllProperties = ({ nodeObject, setNodeObject }) => {
+    return (
+        <div className="all-properties">
+            {/* Comments */}
+            <Typography sx={{ml: 4, mt: 2, mb: 1}} variant='h5'>Comments</Typography>
+
+            {/* Properties */}
+            <Typography sx={{ml: 4, mt: 2, mb: 1}} variant='h5'>Properties</Typography>
+        </div>
+    );
+}
+
+export default ListAllProperties;

taxonomy-editor-frontend/src/pages/editentry/ListTranslations.jsx

@@ -0,0 +1,93 @@
+import { Typography, Paper, TextField, Stack } from "@mui/material";
+
+// Sub-component for rendering translation of an "entry"
+
+const ListTranslations = ({ nodeObject, languageNames, setNodeObject }) => {
+    let toBeRendered = {}
+
+    Object.keys(nodeObject).forEach((key) => {
+
+        // Get all tags and its corresponding language code
+        // Tagids need to be recomputed, so shouldn't be rendered
+        // Main language isn't considered, since it's rendered separately
+
+        if (key.startsWith('tags') && 
+            !key.endsWith(nodeObject.main_language) && 
+            !key.includes('ids')) {
+
+                // Slice the language code
+                let lc = key.slice(-2);
+                toBeRendered[lc] = nodeObject[key]
+            }
+    })
+
+    // Helper function used for changing state
+    function changeData(key, index, value) {
+        key = 'tags_' + key;
+        const duplicateData = {...nodeObject};
+        duplicateData[key][index] = value;
+        setNodeObject(duplicateData);
+    }
+
+    return ( 
+        <div className="translations">
+            {/* Title */}
+            <Typography sx={{mt: 4, mb: 1}} variant='h5' component={'div'}>Translations</Typography>
+            {/* Main Language */}
+            <Typography variant='h6'>
+                { nodeObject && languageNames.of(nodeObject.main_language) }
+            </Typography>
+            {/* Render main language tags */}
+            <Typography variant='h6'> 
+                { nodeObject && 
+                    nodeObject["tags_"+nodeObject['main_language']].map((tag, index) => {
+                        return (
+                            <Paper key={index} component={Stack} direction="column" sx={{ml: 4, width: 200}}>
+                                <TextField 
+                                    size="small" 
+                                    sx={{mt: 1}} 
+                                    onChange = {event => {
+                                        changeData(nodeObject['main_language'], index, event.target.value)
+                                    }}
+                                    defaultValue={tag} 
+                                    variant="outlined" />
+                            </Paper>
+                        )
+                    })
+                }
+            </Typography>
+
+            {/* All other languages */}
+            {
+                Object.entries(toBeRendered).map( ([lang, value]) => {
+                    return (
+                        <div key={lang} className="translation-component">
+                            <Typography sx={{mt:1}} variant="h6">
+                                {languageNames.of(lang)}
+                            </Typography>
+                            {/* Render all related tags */}
+                            {
+                                value.map((tag, index) => {
+                                    return (
+                                        <Paper key={index} component={Stack} direction="column" sx={{ml: 4, width: 200}}>
+                                            <TextField 
+                                                size="small" 
+                                                sx={{mt: 1}} 
+                                                onChange = {event => {
+                                                    changeData(lang, index, event.target.value)
+                                                }}
+                                                defaultValue={tag} 
+                                                variant="outlined" />
+                                        </Paper>
+                                    )
+                                })
+                            }
+                        </div>
+                    )
+                } )
+            }
+        </div>
+     );
+}
+
+export default ListTranslations;

taxonomy-editor-frontend/src/pages/editentry/index.jsx

@@ -0,0 +1,21 @@
+import { Typography } from "@mui/material";
+import { useParams } from "react-router-dom";
+import AccumulateAllComponents from "./AccumulateAllComponents";
+
+const EditEntry = () => {
+    const { id } = useParams();
+    return (
+        <div className="main-content">
+            {/* Renders id of current node */}
+            <div className="node-title">
+                <Typography sx={{mb: 2, mt:2, ml: 2}} variant="h4">
+                    You are now editing "{id}" 
+                </Typography>
+            </div>
+            {/* Renders node info based on id */}
+            <AccumulateAllComponents id={id} />
+        </div>
+    );
+}
+
+export default EditEntry;