react_homepage/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="styles.css?" />
</head>
<body class="body">
    <div id="root"></div>
    
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    

    <script  type="text/babel">
        
        const {useState,useEffect} = React
        const  {axios} = axios;

        const api_link = "http://localhost/cb/CLIPBOARD-main/api/";
        //also include / at end


        const decodeHtmlEntity = function(text) {
            var entities = [
        ['amp', '&'],
        ['apos', '\''],
        ['#x27', '\''],
        ['#x2F', '/'],
        ['#39', '\''],
        ['#47', '/'],
        ['lt', '<'],
        ['gt', '>'],
        ['nbsp', ' '],
        ['quot', '"'],
        ['#039', "'"]
    ];

    for (var i = 0, max = entities.length; i < max; ++i) 
        text = text.replace(new RegExp('&'+entities[i][0]+';', 'g'), entities[i][1]);

    return text;
};


        function SaveClipComponent(){
            const [textvalue, setVal] = useState("");
            const [msg,setMsg] = useState("");

            const handleChange = (event) =>{
                setVal(event.target.value);
            }

            const close = () =>{
                setMsg("");
            }


            const handleSubmit = (event) => {
                event.preventDefault();
                
                fetch(api_link + "save.php", {
                    method: "POST",
                    mode: 'cors',
                    body: JSON.stringify({
                        "data": textvalue
                    }),
                    headers: {
                        "Content-type": "application/json; charset=UTF-8"
                    }
                })  
                .then((response) => response.json())
                .then((json) => setMsg(json["msg"]));
                
            }

            return (
                <div className="save">
                    <h2>Create New Clip.</h2>
                    <textarea onChange={handleChange} value={textvalue} className="textbox" placeholder="Enter Clip Here."/>
                    <div className="msg">{msg} {msg ? (<button onClick={close} style={{color:'red',backgroundColor:'transparent'}}>X</button>) : ""} </div>
                    <button onClick={handleSubmit} className="submit">SAVE</button>
                </div>
            );
        }

        function SelectOption(props){
            return(<option value={props.value}>{props.value}</option> );
        }

        function OneClipComponent(props){
            return (
                <div className="oneclip">
                    <p style={{margin:"5px"}}>
                        Created At: {props.c}
                    </p>
                    <p className="clip">
                        {decodeHtmlEntity(props.d)}
                    </p>
                </div>
            )
        }

        function AllClipsComponent(props){
            const [jsondata,setData] = useState([]);
            const [limit,setLimit] = useState("0");

            useEffect(() => {
                setLimit(props.limit);
                if(Number(limit) != Number(props.limit)){
                    fetch(api_link + 'get.php?limit=' + props.limit)
                    .then(res => res.json())
                    .then(json => setData((json.data)))
                }
            }, [props.limit,jsondata]);
 
            // console.log(jsondata)
            return(
                <div className="allclips">
                    {jsondata.map((member) => (
                        <OneClipComponent key={member.id} id={member.id} c={member.c} d={member.d}/>
                    ))}
                </div>
            )
        }       

        function ClipLimitSelect(props){
            return(
                <div className="slctdiv">
                        Clips to show : 
                        <select value={props.limit} onChange={props.handleChange}>
                            <SelectOption value="5"/>
                            <SelectOption value="10"/>
                            <SelectOption value="20"/>
                            <SelectOption value="50"/>
                            <SelectOption value="100"/>
                        </select>
                </div>
            )
        }


        function ShowClipComponent(){
            const [limit,setLimit] = useState("5");
            
            const handleChange = (event) => {
                setLimit(event.target.value);
            }

            return(
                <div>
                    <ClipLimitSelect limit={limit} handleChange={handleChange}/>
                    <AllClipsComponent limit={limit} />
                </div>
            );
        }

        function Main(){
            return (
                <div>
                    <SaveClipComponent />
                    <ShowClipComponent />
                </div>
            )
        }

        const root = ReactDOM.createRoot(document.getElementById("root"));
        root.render(<Main />);
    </script>
</body>
</html>