Making a base website’s layout and its design

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { IconButton, Box } from '@mui/material';
import TrendingUpIcon from '@mui/icons-material/TrendingUp';
import FeaturedPlayListIcon from '@mui/icons-material/FeaturedPlayList';
import SavedSearchIcon from '@mui/icons-material/SavedSearch';
import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
import UploadIcon from '@mui/icons-material/Upload';
import InfoIcon from '@mui/icons-material/Info';
import Drawer from '@mui/material/Drawer';
import Typography from '@mui/material/Typography';
import Modal from '@mui/material/Modal';
import Button from '@mui/material/Button';
import List from '@mui/material/List';
import ListItemText from '@mui/material/ListItemText';
import {Wait, StopWait} from './Waiter';
import DownloadIcon from '@mui/icons-material/Download';
import axios from "axios";

// To get info about preset
function onUtilsContentInfo(rec){
    // Make a GET request for a specific preset
    var uid = 0
    Wait()
    axios.get(`/api/presets/${uid}`)
    .then(response => {
        // Here recieve a file 
        StopWait('Successfully obtain info about preset.', 'success')
    })
    .catch(error => {
        StopWait('Cant obtain info about preset. ' + error , 'error')
    });
    // Apply a recieved data to a poped up modal window
    const utils_modal = document.getElementById('utils-modal')
    const utils_modal_root = createRoot(utils_modal);
    utils_modal_root.render( 
        <div className="flex flex-col gap-3  min-w-52">
            <Typography id="modal-modal-title" variant="h6" component="h3">
            Preset info
            </Typography>
            <hr></hr>
            <List sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
                <ListItemText primary="Export as:" />
                <List component="div" disablePadding>
                    <ListItemText sx={{ pl: 4 }} primary="JSON" />
                </List>
                <ListItemText primary="Save:" />
                <List component="div" disablePadding>
                    <ListItemText sx={{ pl: 4 }} primary="title" />
                    <ListItemText sx={{ pl: 4 }} primary="description" />
                    <ListItemText sx={{ pl: 4 }} primary="url" />
                </List>
                <ListItemText primary="Other:" />
                <List component="div" disablePadding>
                    <ListItemText sx={{ pl: 4 }} primary="verbose" />
                    <ListItemText sx={{ pl: 4 }} primary="send to email" />
                </List>
                <hr></hr>
                <ListItemText primary="Search engines:" />
                <List component="div" disablePadding>
                    <ListItemText sx={{ pl: 4 }} primary="Google" />
                    <List component="div" disablePadding>
                        <ListItemText sx={{ pl: 6 }} primary="'how to find a cats'" />
                        <ListItemText sx={{ pl: 6 }} primary="'how to find'" />
                    </List>
                    <ListItemText sx={{ pl: 4 }} primary="Yandex" />
                    <List component="div" disablePadding>
                        <ListItemText sx={{ pl: 6 }} primary="'how to get better'" />
                    </List>
                </List>
            </List>
        </div>
    );
}

// To apply preset for current user
function onUtilsContentUpload(rec){
    var uid = 0
    Wait()
    axios.get(`/api/presets/${uid}`)
    .then(response => {
        // Here recieve a file 
        StopWait('Successfully apply preset for user.', 'success')
    })
    .catch(error => {
        StopWait('Cant apply preset for user. ' + error , 'error')
    });
    // Make a GET request for a specific preset
    // Apply recieved preset for user 
}

// To delete preset of current user
function onUtilsContentDelete(rec){
    var uid = 0
    // Make a DEL request to remove a specific preset
    axios.delete(`/api/presets/${uid}`)
    .then(data => {
        // Here recieve a file 
        StopWait('Successfully delete a preset.', 'success')
        Wait()
        axios.get('/api/presets/')
        .then(response => {
            // Here recieve a file 
            StopWait('Successfully refreshed all users presets.', 'success')
        })
        .catch(error => {
            StopWait('Cant refresh user presets. ' + error , 'error')
        });
    })
    .catch(error => {
        StopWait('Cant delete a data. ' + error , 'error')
    });
    
    const utils_modal = document.getElementById('utils-modal')
    const utils_modal_root = createRoot(utils_modal);
    utils_modal_root.render( 
        <div className="flex flex-col gap-3  min-w-52">
            <Typography id="modal-modal-title" variant="h6" component="h3">
            Deleting preset
            </Typography>
            <hr></hr>
            <div className="p-1">
            Are you sure ?
            </div>
            <div className='flex flex-row justify-between items-center'>
                <Button className='p-2' variant="outlined" onClick={()=>{
                    // DEL request
                    rec.setModal(false)
                }}>Yes</Button>
                <Button className='p-2' variant="outlined" onClick={()=>{
                    rec.setModal(false)
                }}>No</Button>
            </div>
        </div>
    );
}

// Wait till modal is present and ready to be interactable
// Then launch callback with args
function waitTillModalIsUp(func, args){
    const observer = new MutationObserver((mutationList, observer) => {
        for (const mutation of mutationList) {
            if (mutation.addedNodes.length > 0){ 
                const utils_modal = mutation.target.querySelector("#utils-modal");
                if(utils_modal){
                    func(args)
                    observer.disconnect()
                }
            }
        }
    });
    observer.observe(document, {subtree: true, childList: true});
}

// Popular presets, I will create them by myself
function TrendingContent( props ){
    const [isModal, setModal] = React.useState(false);
    // Make a POST request to collect most popular presets
    Wait()
    axios.get('/api/popular-presets/')
    .then(response => {
        // Here recieve a file 
        StopWait('Successfully obtain popular presets.', 'success')
    })
    .catch(error => {
        StopWait('Cant get popular presets. ' + error , 'error')
    });
    const rec = {'setModal': setModal}
    return (
        <Box className="w-full min-h-32 max-h-96 flex flex-nowrap flex-col justify-between p-2">
            <Modal
                open={isModal}
                onClose={()=>{setModal(false)}}
                >
                <Box id='utils-modal' className="absolute top-1/2 left-1/2 -translate-x-2/4 -translate-y-2/4 shadow-md p-4 bg-white">
                </Box>
            </Modal>
            <Typography variant="h5" component='h2' gutterBottom className="p-2">Trending presets</Typography>
            <hr className='w-full'></hr>
            <Box className='w-full h-full'>
                {/* Template to be rendered by Django*/}
                <div>
                    <div className='flex justify-between items-center'>
                        <div className='flex flex-row gap-2 '>
                            <div>export_as_exel_save-title-description-verbose-show-final-result</div>
                        </div>
                        <div>
                            <IconButton onClick={()=>{setModal(true); waitTillModalIsUp(onUtilsContentInfo,rec)}}  className='w-fit'><InfoIcon/></IconButton>
                            <IconButton onClick={()=>onUtilsContentUpload(rec)} className='w-fit'><UploadIcon/></IconButton>
                        </div>
                    </div>
                    <hr className='w-full'></hr>
                </div>
            </Box>
        </Box>
    )
}

// Saved presets of user
function OwnSavesContent(props){
    const [isModal, setModal] = React.useState(false);
    // Make GET firts request to obtain all presets by user
    Wait()
    axios.get('/api/presets/')
    .then(response => {
        // Here recieve a file 
        StopWait('Successfully obtain all users presets.', 'success')
    })
    .catch(error => {
        StopWait('Cant get presets. ' + error , 'error')
    });
    const rec = {'setModal': setModal}
    return (
        <Box className="w-full min-h-32  max-h-96 flex flex-nowrap flex-col justify-between p-2">
            <Modal
                open={isModal}
                onClose={()=>{setModal(false)}}
                >
                <Box id='utils-modal' className="absolute top-1/2 left-1/2 -translate-x-2/4 -translate-y-2/4 shadow-md p-4 bg-white">
                </Box>
            </Modal>
            <Typography variant="h5" component='h2' gutterBottom className="p-2">Your presets</Typography>
            <hr className='w-full'></hr>
            <Box className='w-full h-full'>
            {/* Template to be rendered by Django */}
            <div>
                <div className='flex justify-between  items-center'>
                    <div className='flex flex-row gap-2 '>
                        <div>01.01.2000</div>
                        <div>Save name</div>
                    </div>
                    <div>
                        <IconButton onClick={()=>{setModal(true); waitTillModalIsUp(onUtilsContentInfo,rec)}}  className='w-fit'><InfoIcon/></IconButton>
                        <IconButton onClick={()=>{onUtilsContentUpload(rec); }} className='w-fit'><UploadIcon/></IconButton>
                        <IconButton onClick={()=>{setModal(true); waitTillModalIsUp(onUtilsContentDelete,rec)}} className='w-fit'><DeleteForeverIcon/></IconButton>
                    </div>
                </div>
                <hr className='w-full'></hr>
            </div>
            </Box>
        </Box>
    )
}

// Console for curious ones
function ConsoleContent(props){
    /* Make requests here */
    return (
        <Box className="w-full min-h-32  max-h-96 flex flex-nowrap flex-col justify-between p-2">
            <Typography variant="h5" component='h2' gutterBottom className="p-2">Console</Typography>
            <hr className='w-full'></hr>
            <Box className='w-full h-full '>
                {/* Paste response here */}
                <Box>user@localhost $: npm run test</Box>
            </Box>
        </Box>
    )
}

export default function AppUtils(){
    const [isTrending, setTrending] = React.useState(false);
    const [isOwnSaves, setOwnSaves] = React.useState(false);
    const [isConsole, setConsole] = React.useState(false);

    // To show or hide sticked to bottom side of screen the "Drawer"
    const ToggleTrending = (value) => (event) => {
        setTrending(value);
    }
    const ToggleOwnSaves = (value) => (event) => {
        setOwnSaves(value);
    }
    const ToggleConsole = (value) => (event) => {
        setConsole(value);
    }

    return (
        <Box className="flex flex-col">
            <Box className="flex gap-1">
                <IconButton onClick={ToggleTrending(true)} className='w-fit  border'><TrendingUpIcon className=" border-2 rounded-md"/></IconButton>
                <IconButton onClick={ToggleOwnSaves(true)} className='w-fit'><SavedSearchIcon className=" border-2 rounded-md"/></IconButton>
                <div id="console-button" className='hidden'><IconButton onClick={ToggleConsole(true)} className='w-fit'><FeaturedPlayListIcon  className=" border-2 rounded-md"/></IconButton></div>
                <div id="results-button" className='hidden'><IconButton id="results-button-ref" href='#' onClick={()=>{}} className='w-fit'><DownloadIcon color='warning' className=" border-2 rounded-md"></DownloadIcon></IconButton></div>
            </Box>
            <Drawer open={isTrending} anchor='bottom' onClose={ToggleTrending(false)}>
                <TrendingContent isActive={isTrending}/>
            </Drawer>
            <Drawer open={isOwnSaves} anchor='bottom' onClose={ToggleOwnSaves(false)}>
                <OwnSavesContent isActive={isOwnSaves}/>
            </Drawer>
            <Drawer open={isConsole} anchor='bottom' onClose={ToggleConsole(false)}>
                <ConsoleContent isActive={isConsole}/>
            </Drawer>
        </Box>
    )
}

const utils_container = document.getElementById('app_utils');
const utils_root = createRoot(utils_container);
utils_root.render(<AppUtils></AppUtils>);

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { IconButton, Box } from '@mui/material';
import SaveIcon from '@mui/icons-material/Save';
import NotStartedIcon from '@mui/icons-material/NotStarted';
import Typography from '@mui/material/Typography';
import Modal from '@mui/material/Modal';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import { Wait, StopWait, Msg } from './Waiter';
import axios from "axios";

// Wait till modal is present and ready to be interactable
// Then launch callback with args
function waitTillModalIsUp(func, args){
    const observer = new MutationObserver((mutationList, observer) => {
        for (const mutation of mutationList) {
            if (mutation.addedNodes.length > 0){ 
                const utils_modal = mutation.target.querySelector("#utils-modal");
                if(utils_modal){
                    func(args)
                    observer.disconnect()
                }
            }
        }
    });
    observer.observe(document, {subtree: true, childList: true});
}

// A set of checks to be checked if user make everything is in a right way
function checkIfValidPreset(){
    // Collect data
    var exportAs = document.getElementById('export-as').dataset.export
    var isTitle = document.getElementById('dataTitle').querySelector('input').checked
    var isUrl = document.getElementById('dataUrl').querySelector('input').checked
    var isDescription = document.getElementById('dataDescription').querySelector('input').checked
    if (!isTitle && !isUrl && !isDescription){
        Msg('You must "check" one of these: title, url, description','error')
        return false
    }
    var queries = []
    var queries_raw = document.querySelectorAll('.query')
    queries_raw.forEach((que) => {
        var engine = que.dataset.engine
        var query = que.querySelector('input').value
        queries.push({
            engine: engine,
            query: query
        })
    })
    if (queries.length >= 1){
        var isValid = true
        queries.forEach((que) => {
            if (que.query == ""){
                Msg('Query string cant be empty.','error')
                isValid = false
            }
        })
        return isValid
    }
    else{
        Msg('At least 1 query must be.','error')
        return false
    }
}

// Make a PUT request to save preset
function SaveRequest(req){
    // Collect data
    var exportAs = document.getElementById('export-as').dataset.export
    var isTitle = document.getElementById('dataTitle').querySelector('input').checked
    var isUrl = document.getElementById('dataUrl').querySelector('input').checked
    var isDescription = document.getElementById('dataDescription').querySelector('input').checked
    var queries = []
    var queries_raw = document.querySelectorAll('.query')
    queries_raw.forEach((que) => {
        var engine = que.dataset.engine
        var query = que.querySelector('input').value
        queries.push({
            engine: engine,
            query: query
        })
    })
    if (checkIfValidPreset()){
        const actions_modal = document.getElementById('utils-modal')
        const actions_modal_root = createRoot(actions_modal);
        actions_modal_root.render( 
            <div className="flex flex-col gap-3  min-w-72 ">
                <Typography variant="h6" component="h3">
                    Saving preset
                </Typography>
                <hr></hr>
                <Box className="flex flex-row gap-4 items-center justify-between">
                    <TextField id="preset-name" label="Preset name" variant="outlined" />
                    <Button onClick={()=>{
                        var preset_name = document.getElementById('preset-name').value
                        if (preset_name.length >= 3){
                            Wait()
                            var form_data = new FormData();
                            form_data.append("exportAs", exportAs)
                            form_data.append("isTitle", isTitle)
                            form_data.append("isUrl", isUrl)
                            form_data.append("isDescription", isDescription)
                            form_data.append("queries", JSON.stringify(queries))
                            axios.put(`/api/presets/${preset_name}`, form_data)
                            .then(data => {
                                // Here recieve a file 
                                StopWait('Successfully saved preset', 'success')
                            })
                            .catch(error => {
                                StopWait('Cant save a preset. ' + error , 'error')
                            });
                        }
                        else{
                            Msg('At least 3 character long.', 'error')
                            req.setModal(false)
                        }
                    }} variant='text'>Save</Button>
                </Box>
            </div>
        )
    }
    
}

//Make a POST request to server to get results
function StartParsingRequest(req){
    // Collect data
    var exportAs = document.getElementById('export-as').dataset.export
    var isTitle = document.getElementById('dataTitle').querySelector('input').checked
    var isUrl = document.getElementById('dataUrl').querySelector('input').checked
    var isDescription = document.getElementById('dataDescription').querySelector('input').checked
    var queries = []
    var queries_raw = document.querySelectorAll('.query')
    queries_raw.forEach((que) => {
        var engine = que.dataset.engine
        var query = que.querySelector('input').value
        queries.push({
            engine: engine,
            query: query
        })
    })
    if (checkIfValidPreset()){
        Wait()
        var form_data = new FormData();
        form_data.append("exportAs", exportAs)
        form_data.append("isTitle", isTitle)
        form_data.append("isUrl", isUrl)
        form_data.append("isDescription", isDescription)
        form_data.append("queries", JSON.stringify(queries))
        axios.post('/api/parse/', form_data)
        .then(data => {
            // Here recieve a file 
            StopWait('Successfully parsed a data.', 'success')
        })
        .catch(error => {
            StopWait('Cant parse data. ' + error , 'error')
        });
    }
}

export default function AppActions(){
    const [isModal, setModal] = React.useState(false);
    const req = {'setModal': setModal}
    return (
        <Box className="flex gap-1">
            <IconButton id='onSaveRequest'  onClick={()=>{setModal(true); waitTillModalIsUp(SaveRequest, req)}} className='w-fit'><SaveIcon className=" border-2 rounded-md"/></IconButton>
            <Modal
                open={isModal}
                onClose={()=>{setModal(false)}}
                >
                <Box id='utils-modal' className="absolute top-1/2 left-1/2 -translate-x-2/4 -translate-y-2/4 shadow-md p-4 bg-white">
                </Box>
            </Modal>
            <IconButton id='onStartParsing'  onClick={()=>{StartParsingRequest(req)}} className='w-fit'><NotStartedIcon className=" border-2 rounded-md"/></IconButton>
        </Box>
    )
}

const actions_container = document.getElementById('app_actions');
const actions_root = createRoot(actions_container);
actions_root.render(<AppActions></AppActions>);

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import AddBoxIcon from '@mui/icons-material/AddBox';
import { IconButton, Box } from '@mui/material';
import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
import TextField from '@mui/material/TextField';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import {Wait, StopWait} from './Waiter';
import Popover from '@mui/material/Popover';
import Divider from '@mui/material/Divider';

// Remove a line of query from UI
function onDeleteQuery(event){
    var id = event.currentTarget.dataset.id
    var elsToDelete = document.querySelectorAll('#'+id)
    elsToDelete.forEach((el)=>{
        el.remove()
    })
}

// Compiling and inserting a choosen engine with text field
function onAddQuery(event){

    var uid = 'uid_'+Math.random().toString(16).slice(2)
    // Inserting engine before + button and showing up all activity buttons
    var child = event.currentTarget.children[0].cloneNode(true)
    child.id = uid
    child.querySelectorAll('#toRemoveEngineStuff').forEach( (el) => {
        el.classList.remove('hidden')
    })

    var deleteButton = child.querySelector('#onDeleteQuery')
    deleteButton.dataset.id = uid
    deleteButton.addEventListener('click', onDeleteQuery)

    var parent = document.getElementById('engines_list')
    parent.insertBefore(child, parent.lastChild);
    var engine_name = event.currentTarget.dataset.engine_name
    // Activate 'save' and 'parse' buttons

    // Inserting query text field
    var querCont = document.getElementById('queries_list');
    var query = document.createElement("div");
    query.id = uid
    querCont.insertBefore(query, querCont.lastChild);
    const querRoot = createRoot(query);

    querRoot.render(
        <div className='flex flex-col gap-2'>
            <div className='flex flex-row items-center'>
                <TextField required data-engine={engine_name} id="outlined-basic" label="query" variant="outlined"  className="query items-center"/>
            </div>
            <Divider className="w-full self-center" component='div' variant="middle"/>
        </div>
    )
            
}
export default function AppQueries(){
    const [anchorEngine, setAnchoreEngine] = React.useState(null)
    var engine_list = []
    const list = document.getElementById('meata-engines').children
    for (var i = 0; i < list.length; i++){
        // Find name of engine
        var end = list[i].dataset.src.indexOf('.')
        var start = list[i].dataset.src.lastIndexOf('/') + 1
        var name = String(list[i].dataset.src).substring(start, end)
        // Push engines to pop up window, for to be selected later
        engine_list.push(
            <ListItem>
            <ListItemButton data-engine_name={name} onClick={(event)=>{
                onAddQuery(event)
            }}>
                <div className="flex flex-col gap-6">
                    <div className="flex flex-row gap-2 items-center justify-between" >
                        <div className='flex flex-row gap-1 items-center'>
                            <img className='w-4 h-4' src={list[i].dataset.src}></img>
                            <div>{name}</div>
                        </div>
                        <div id='toRemoveEngineStuff' className='hidden flex flex-row gap-1 items-center w-fit'>
                            <IconButton id='onDeleteQuery' className='w-fit'><DeleteForeverIcon/></IconButton>
                        </div>
                    </div>
                    <Divider id='toRemoveEngineStuff' className="hidden w-full self-center" component='div' variant="middle"/>
                </div>
            </ListItemButton>
            </ListItem>
        )
    }
    
    const handleClick = (event, engine_list) => {
        setAnchoreEngine(event.currentTarget);    
    };

    const handleClose = () => {
        setAnchoreEngine(null);
    };

    const open = Boolean(anchorEngine);
    const id = open ? 'simple-popover_addengine' : undefined;
    return (
        <div>
            <Popover
                id={id}
                open={open}
                anchorEl={anchorEngine}
                onClose={handleClose}
                anchorOrigin={{
                    vertical: 'bottom',
                    horizontal: 'left',
                }}
                >
                <List sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
                    {engine_list}
                </List>
            </Popover>
            <IconButton onClick={(ev)=>handleClick(ev,engine_list)} className='w-fit'><AddBoxIcon/></IconButton>
        </div>
    )
}

const engines_container = document.getElementById('engines_list');
const engines_root = createRoot(engines_container);
engines_root.render(<AppQueries></AppQueries>);

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import CircularProgress from '@mui/material/CircularProgress';
import Backdrop from '@mui/material/Backdrop';

export function Msg(msg, status){
    const msg_container = document.getElementById('msg');
    msg_container.classList.remove('hidden')
    const msgText_container = document.getElementById('msg-text');
    msgText_container.querySelector('.MuiAlert-message').innerText = msg
}

export function CloseMsg(){
    const msg_container = document.getElementById('msg');
    msg_container.classList.add('hidden')
    const msgText_container = document.getElementById('msg-text');
    msgText_container.querySelector('.MuiAlert-message').innerText = ''
}

// Show up a waiter
export function Wait(){
    const waiter_container = document.getElementById('waiter');
    waiter_container.classList.remove('hidden')
    const header = document.getElementById('header');
    header.style.zIndex = 0
}

// Hide waiter and shop up a status message
export function StopWait(msg, status){
    const waiter_container = document.getElementById('waiter');
    waiter_container.classList.add('hidden')
    const header = document.getElementById('header');
    header.style.zIndex = 1100

    Msg(msg, status)
}

export default function Waiter(){
    return (
        <Backdrop
        sx={{ color: '#fff', zIndex: 2000 }}
        open={true}
        >
            <CircularProgress color='inherit' />
        </Backdrop>
    )
}

const waiter_container = document.getElementById('waiter');
const waiter_root = createRoot(waiter_container);
waiter_root.render(<Waiter></Waiter>)

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import Alert from '@mui/material/Alert';
import { CloseMsg } from './Waiter';

export default function Msg(){
    return (
        <Alert
        id="msg-text"
        onClose={CloseMsg}
        severity='error'
        variant="outlined"
        sx={{ width: '100%' }}
        >
        </Alert>
    )
}

const msg_container = document.getElementById('msg');
const msg_root = createRoot(msg_container);
msg_root.render(<Msg/>)