-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #26 from christianstubbe/feature-purpose-tree
Feature: Purpose tree
- Loading branch information
Showing
39 changed files
with
2,400 additions
and
890 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,29 +1,30 @@ | ||
| import * as React from "react"; | ||
|
|
||
| import CssBaseline from '@mui/material/CssBaseline'; | ||
| import { Grid, Container } from "@mui/material"; | ||
|
|
||
| import UploadData from "./components/UploadData"; | ||
| import RetrieveData from "./components/RetrieveData"; | ||
| import Navbar from "./components/Navbar.js"; | ||
| import {BrowserRouter, Routes, Route} from 'react-router-dom'; | ||
| import Home from "./components/Home"; | ||
| import Settings from "./components/Settings"; | ||
|
|
||
|
|
||
| function App() { | ||
| return ( | ||
| <> | ||
| <CssBaseline /> | ||
| <Navbar /> | ||
| <Container maxWidth="lg"> | ||
| <Grid container spacing={6}> | ||
| <Grid item xs={6}> | ||
| <UploadData/> | ||
| </Grid> | ||
| <Grid item xs={6}> | ||
| <RetrieveData /> | ||
| </Grid> | ||
| </Grid> | ||
| </Container> | ||
| </> | ||
| ); | ||
|
|
||
| return ( | ||
| <> | ||
| <CssBaseline/> | ||
| <BrowserRouter> | ||
| <Navbar/> | ||
| <Routes> | ||
| <Route path='/' element={<Home/>}/> | ||
| <Route path='/retrieve' element={<RetrieveData/>}/> | ||
| <Route path='/upload' element={<UploadData/>}/> | ||
| <Route path='/settings' element={<Settings/>}/> | ||
| </Routes> | ||
| </BrowserRouter> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,183 @@ | ||
| import React, {createContext, useReducer, useEffect} from "react"; | ||
| import {CircularProgress} from "@mui/material"; | ||
| import axios from "axios"; | ||
|
|
||
| const reducer = (state, action) => { | ||
| switch (action.type) { | ||
| case "FETCH_SUCCESS": | ||
| return { | ||
| isLoading: false, | ||
| treeData: action.payload, | ||
| error: null, | ||
| }; | ||
| case "FETCH_ERROR": | ||
| return { | ||
| isLoading: false, | ||
| treeData: [], | ||
| error: "Something went wrong!", | ||
| }; | ||
| case "UPDATE_TREE": | ||
| return { | ||
| ...state, | ||
| treeData: action.payload | ||
| }; | ||
| case "TOGGLE_CHECKBOX": | ||
| return { | ||
| ...state, | ||
| treeData: toggleNodeAndChildren(state.treeData, action.payload) | ||
| }; | ||
|
|
||
| case "ADD_NODE": | ||
| return { | ||
| ...state, | ||
| treeData: addNodeToTree(state.treeData, action.payload), | ||
| }; | ||
| case "DELETE_NODE": | ||
| return { | ||
| ...state, | ||
| treeData: deleteNodeFromTree(state.treeData, action.payload), | ||
| }; | ||
| default: | ||
| return state; | ||
| } | ||
| }; | ||
|
|
||
| const initialState = { | ||
| treeData: [], | ||
| isLoading: true, | ||
| error: null, | ||
| }; | ||
|
|
||
| const deleteNodeFromTree = (treeData, nodeId) => { | ||
| return treeData.filter(node => { | ||
| if (node.id === nodeId) { | ||
| return false; | ||
| } | ||
|
|
||
| if (node.children) { | ||
| node.children = deleteNodeFromTree(node.children, nodeId); | ||
| } | ||
|
|
||
| return true; | ||
| }); | ||
| }; | ||
|
|
||
|
|
||
| const addNodeToTree = (treeData, newNode) => { | ||
| return treeData.map((node) => { | ||
| if (node.id === newNode.parent_id) { | ||
| return {...node, children: [...(node.children || []), newNode]}; | ||
| } else if (node.children && node.children.length > 0) { | ||
| return { | ||
| ...node, | ||
| children: addNodeToTree(node.children, newNode), | ||
| }; | ||
| } else { | ||
| return node; | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
|
|
||
| const toggleNodeAndChildren = (treeData, id, selected) => { | ||
| return treeData.map((node) => { | ||
| if (node.id === id) { | ||
| const newNode = {...node, selected}; | ||
| if (node.children) { | ||
| newNode.children = toggleNodeAndChildren(node.children, id, selected); | ||
| } | ||
| return newNode; | ||
| } else if (node.children) { | ||
| return {...node, children: toggleNodeAndChildren(node.children, id, selected)}; | ||
| } else { | ||
| return node; | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
|
|
||
| const getSelectedNodeIds = (treeData) => { | ||
| let selectedIds = []; | ||
|
|
||
| const traverseTree = (node) => { | ||
| if (node.selected) { | ||
| selectedIds.push(node.id); | ||
| } | ||
|
|
||
| if (node.children) { | ||
| node.children.forEach(childNode => traverseTree(childNode)); | ||
| } | ||
| } | ||
|
|
||
| treeData.forEach(rootNode => traverseTree(rootNode)); | ||
|
|
||
| return selectedIds; | ||
| } | ||
|
|
||
|
|
||
| export const TreeContext = createContext(); | ||
|
|
||
| const TreeContextProvider = ({children}) => { | ||
| const [state, dispatch] = useReducer(reducer, initialState); | ||
|
|
||
| useEffect(() => { | ||
| axios | ||
| .get("http://localhost:8000/api/v1/pap/purposes") | ||
| .then((response) => { | ||
| dispatch({type: "FETCH_SUCCESS", payload: response.data}); | ||
| }) | ||
| .catch(() => { | ||
| dispatch({type: "FETCH_ERROR"}); | ||
| }); | ||
| }, []); | ||
|
|
||
| const handleCheckboxChange = (nodeId) => { | ||
| const findNode = (treeData, id) => { | ||
| for (const node of treeData) { | ||
| if (node.id === id) return node; | ||
| if (node.children) { | ||
| const result = findNode(node.children, id); | ||
| if (result) return result; | ||
| } | ||
| } | ||
| return null; | ||
| } | ||
|
|
||
| const nodeToChange = findNode(state.treeData, nodeId); | ||
|
|
||
| if (!nodeToChange) { | ||
| console.error(`Node with id ${nodeId} not found`); | ||
| return; | ||
| } | ||
|
|
||
| const newTreeData = toggleNodeAndChildren(state.treeData, nodeId, !nodeToChange.selected); | ||
| dispatch({type: "UPDATE_TREE", payload: newTreeData}); | ||
| }; | ||
|
|
||
|
|
||
| const handleAddNodeContext = (newNode) => { | ||
| dispatch({type: "ADD_NODE", payload: newNode}); | ||
| }; | ||
|
|
||
| const handleDeleteNodeContext = (nodeId) => { | ||
| dispatch({type: "DELETE_NODE", payload: nodeId}); | ||
| }; | ||
|
|
||
|
|
||
| return ( | ||
| <TreeContext.Provider | ||
| value={{ | ||
| treeData: state.treeData, | ||
| isLoading: state.isLoading, | ||
| handleCheckboxChange, | ||
| getSelectedNodeIds, | ||
| handleAddNodeContext, | ||
| handleDeleteNodeContext | ||
| }} | ||
| > | ||
| {state.isLoading ? <CircularProgress/> : children} | ||
| </TreeContext.Provider> | ||
| ); | ||
| }; | ||
|
|
||
| export default TreeContextProvider; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import React from 'react'; | ||
| import { Container, Typography, Box } from '@mui/material'; | ||
|
|
||
| function Home() { | ||
| return ( | ||
| <Container> | ||
| <Box | ||
| display="flex" | ||
| flexDirection="column" | ||
| justifyContent="center" | ||
| alignItems="center" | ||
| minHeight="100vh" | ||
| textAlign="center" | ||
| > | ||
| <Typography variant="h2" gutterBottom> | ||
| Welcome to Our Company | ||
| </Typography> | ||
| <Typography variant="h5"> | ||
| We're committed to providing our customers with the best services. | ||
| </Typography> | ||
| <Box mt={4}> | ||
| <Typography variant="body1"> | ||
| Our company was founded with a mission to make life better. We're dedicated to providing | ||
| innovative solutions that improve the quality of life. Our team is passionate about | ||
| creating products that make a difference. We believe in putting our customers first | ||
| and are proud of the work we do each day. | ||
| </Typography> | ||
| </Box> | ||
| </Box> | ||
| </Container> | ||
| ); | ||
| } | ||
|
|
||
| export default Home; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.