@oasisomniverse/react 1.0.0

package/src/components/popups/seeds/components/RewardSeeds.jsx

@@ -0,0 +1,178 @@
+import React from 'react';
+
+import { Modal } from 'react-bootstrap';
+import axios from "axios";
+import { toast } from "react-toastify";
+import API_BASE_URL from "../../../../config/api";
+
+class RewardSeeds extends React.Component {
+    constructor(){
+        super()
+        this.state = {
+          // avatar: {
+          //     selected: false,
+          //     avatar: ''
+          // },
+          // username: {
+          //     selected: false,
+          //     username: '',
+          //     amount: '',
+          //     note: ''
+          // },
+          group: '',
+          avatar: '',
+          seedUser: '',
+          amount: '',
+          note: ''
+        }
+      }
+  
+    handleChange = (e) => {
+        console.log(e.target.value)
+
+        if(e.target.value === "avatar_section" || e.target.value === "username_section") {
+            this.setState({
+                group: e.target.value
+            })
+        } else {
+            this.setState({[e.target.name]: e.target.value})
+        }
+    }
+  
+      handleSubmit=(e) => {
+        e.preventDefault()
+      }
+
+      getApiData = () => {
+        this.setState({ loading: true })
+
+        axios({
+            method: 'post',
+            url: API_BASE_URL,
+            headers: {
+                'Content-Type': 'application/json'
+            }, 
+        })
+        .then((response) => {
+            this.setState({loading: false})
+
+            if (response.data.result?.isError) { 
+                toast.error(response.data.result.message);
+                return; 
+            }
+
+            toast.success(response.data.result.message);
+        })
+        .catch((err) => {
+            toast.error('err');
+            this.setState({loading: false})
+            return { error: true, data: err };
+        });
+    }
+
+    render() {
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    centered
+                    className="custom-modal custom-popup-component"
+                    show={show}
+                    onHide={() => hide('seeds', 'rewardSeeds')}
+                >
+                    <Modal.Body>
+                        <span className="form-cross-icon" onClick={() => hide('seeds', 'rewardSeeds')}>
+                            <i className="fa fa-times"></i>
+                        </span>
+
+                        <div className="popup-container default-popup">
+                            <div className="seed-container paywith-seeds">
+                                <h1 className="single-heading">
+                                    Pay with Seeds
+                                </h1>
+                                <div className="form-container">
+                                    <form onSubmit={this.handleSubmit}>
+                                        <p className="single-form-row">
+                                            <label className="single-radio-btn">
+                                                <input 
+                                                    type="radio" 
+                                                    value="avatar_section" 
+                                                    checked={this.state.group === "avatar_section"} 
+                                                    onChange={this.handleChange} 
+                                                />
+                                                Avatar
+                                            </label>
+                                            <input 
+                                                type="text" 
+                                                placeholder="username" 
+                                                name="avatar" 
+                                                value={this.state.avatar} 
+                                                onChange={this.handleChange}
+                                                disabled={this.state.group === "username_section"} 
+                                            />
+                                        </p>
+
+                                        <h3>OR</h3>
+
+                                        <p className="single-form-row">
+                                            <label className="single-radio-btn">
+                                                <input 
+                                                    type="radio" 
+                                                    value="username_section"
+                                                    checked={this.state.group === "username_section"} 
+                                                    onChange={this.handleChange}  
+                                                />
+                                                Seed Username
+                                            </label>
+
+                                            <input 
+                                                type="text" 
+                                                name="seedUser" 
+                                                value={this.state.username} 
+                                                onChange={this.handleChange} 
+                                                placeholder="username"
+                                                disabled={this.state.group === "avatar_section"} 
+                                            />
+                                        </p>
+
+                                        <p className="single-form-row">
+                                            <label>Amount</label>
+                                            <input 
+                                                type="text" 
+                                                name="amount" 
+                                                value={this.state.amount} 
+                                                onChange={this.handleChange}
+                                                disabled={this.state.group === "avatar_section"}  
+                                            />
+                                        </p>
+
+                                        <p className="single-form-row mb-30">
+                                            <label>Note</label>
+                                            <input 
+                                                type="text" 
+                                                name="note" 
+                                                value={this.state.note} 
+                                                onChange={this.handleChange}
+                                                disabled={this.state.group === "avatar_section"}  
+                                            />
+                                        </p>
+
+                                        <p className="single-form-row btn-right">
+                                            <button
+                                                className="sm-button"
+                                                type="submit"
+                                            >Pay</button>
+                                        </p>
+                                    </form>
+                                </div>
+                            </div>
+                        </div>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+
+export default RewardSeeds;

package/src/components/popups/seeds/components/SearchSeeds.jsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import axios from "axios";
+import { toast } from "react-toastify";
+import API_BASE_URL from "../../../../config/api";
+
+class SearchSeeds extends React.Component {
+    state = {  } 
+
+    getApiData = () => {
+        this.setState({ loading: true })
+
+        axios({
+            method: 'get',
+            url: API_BASE_URL,
+            headers: {
+                'Content-Type': 'application/json'
+            }, 
+        })
+        .then((response) => {
+            this.setState({loading: false})
+
+            if (response.data.result?.isError) { 
+                toast.error(response.data.result.message);
+                return; 
+            }
+
+            toast.success(response.data.result.message);
+        })
+        .catch((err) => {
+            toast.error('err');
+            this.setState({loading: false})
+            return { error: true, data: err };
+        });
+    }
+
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="lg"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('seeds', 'searchSeeds')}
+                >
+                    <Modal.Body className="seed-modal">
+                        <div className="heading">
+                            <h2>Search Seeds</h2>
+                        </div>
+
+                        <div className="custom-form d-grid grid-gap-20">
+                            <div className="d-flex justify-content-between">
+                                <div className="form-field">
+                                    <label>Avatar:</label>
+                                    <input type="text" />
+                                </div>
+
+                                <div className="form-field">
+                                    <label>Seed Username:</label>
+                                    <input type="text" />
+                                </div>
+                            </div>
+
+                            <div className="d-flex justify-content-between">
+                                <div className="form-field">
+                                    <label>From Date:</label>
+                                    <input type="text" />
+                                </div>
+
+                                <div className="form-field">
+                                    <label>To Date:</label>
+                                    <input type="text" />
+                                </div>
+                            </div>
+
+                            <div className="d-flex grid-gap-20 justify-content-end">
+                                <button className="white-button submit-button" onClick={() => hide('seeds', 'searchSeeds')}>Cancel</button>
+                                <button className="submit-button">Search</button>
+                            </div>
+                        </div>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default SearchSeeds;

package/src/components/popups/seeds/components/SendInvite.jsx

@@ -0,0 +1,178 @@
+import React from 'react';
+
+import { Modal } from 'react-bootstrap';
+import axios from "axios";
+import { toast } from "react-toastify";
+import API_BASE_URL from "../../../../config/api";
+
+class SendInvite extends React.Component {
+    constructor(){
+        super()
+        this.state = {
+          // avatar: {
+          //     selected: false,
+          //     avatar: ''
+          // },
+          // username: {
+          //     selected: false,
+          //     username: '',
+          //     amount: '',
+          //     note: ''
+          // },
+          group: '',
+          avatar: '',
+          seedUser: '',
+          amount: '',
+          note: ''
+        }
+      }
+  
+    handleChange = (e) => {
+        console.log(e.target.value)
+
+        if(e.target.value === "avatar_section" || e.target.value === "username_section") {
+            this.setState({
+                group: e.target.value
+            })
+        } else {
+            this.setState({[e.target.name]: e.target.value})
+        }
+    }
+  
+      handleSubmit=(e) => {
+        e.preventDefault()
+      }
+      
+      getApiData = () => {
+        this.setState({ loading: true })
+
+        axios({
+            method: 'post',
+            url: API_BASE_URL,
+            headers: {
+                'Content-Type': 'application/json'
+            }, 
+        })
+        .then((response) => {
+            this.setState({loading: false})
+
+            if (response.data.result?.isError) { 
+                toast.error(response.data.result.message);
+                return; 
+            }
+
+            toast.success(response.data.result.message);
+        })
+        .catch((err) => {
+            toast.error('err');
+            this.setState({loading: false})
+            return { error: true, data: err };
+        });
+    }
+
+    render() {
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    centered
+                    className="custom-modal custom-popup-component"
+                    show={show}
+                    onHide={() => hide('seeds', 'sendInvite')}
+                >
+                    <Modal.Body>
+                        <span className="form-cross-icon" onClick={() => hide('seeds', 'sendInvite')}>
+                            <i className="fa fa-times"></i>
+                        </span>
+
+                        <div className="popup-container default-popup">
+                            <div className="seed-container paywith-seeds">
+                                <h1 className="single-heading">
+                                    Pay with Seeds
+                                </h1>
+                                <div className="form-container">
+                                    <form onSubmit={this.handleSubmit}>
+                                        <p className="single-form-row">
+                                            <label className="single-radio-btn">
+                                                <input 
+                                                    type="radio" 
+                                                    value="avatar_section" 
+                                                    checked={this.state.group === "avatar_section"} 
+                                                    onChange={this.handleChange} 
+                                                />
+                                                Avatar
+                                            </label>
+                                            <input 
+                                                type="text" 
+                                                placeholder="username" 
+                                                name="avatar" 
+                                                value={this.state.avatar} 
+                                                onChange={this.handleChange}
+                                                disabled={this.state.group === "username_section"} 
+                                            />
+                                        </p>
+
+                                        <h3>OR</h3>
+
+                                        <p className="single-form-row">
+                                            <label className="single-radio-btn">
+                                                <input 
+                                                    type="radio" 
+                                                    value="username_section"
+                                                    checked={this.state.group === "username_section"} 
+                                                    onChange={this.handleChange}  
+                                                />
+                                                Seed Username
+                                            </label>
+
+                                            <input 
+                                                type="text" 
+                                                name="seedUser" 
+                                                value={this.state.username} 
+                                                onChange={this.handleChange} 
+                                                placeholder="username"
+                                                disabled={this.state.group === "avatar_section"} 
+                                            />
+                                        </p>
+
+                                        <p className="single-form-row">
+                                            <label>Amount</label>
+                                            <input 
+                                                type="text" 
+                                                name="amount" 
+                                                value={this.state.amount} 
+                                                onChange={this.handleChange}
+                                                disabled={this.state.group === "avatar_section"}  
+                                            />
+                                        </p>
+
+                                        <p className="single-form-row mb-30">
+                                            <label>Note</label>
+                                            <input 
+                                                type="text" 
+                                                name="note" 
+                                                value={this.state.note} 
+                                                onChange={this.handleChange}
+                                                disabled={this.state.group === "avatar_section"}  
+                                            />
+                                        </p>
+
+                                        <p className="single-form-row btn-right">
+                                            <button
+                                                className="sm-button"
+                                                type="submit"
+                                            >Pay</button>
+                                        </p>
+                                    </form>
+                                </div>
+                            </div>
+                        </div>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+
+export default SendInvite;

package/src/components/popups/seeds/components/ViewOrganizations.jsx

@@ -0,0 +1,178 @@
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import { AgGridReact } from 'ag-grid-react';
+import axios from "axios";
+import { toast } from "react-toastify";
+import API_BASE_URL from "../../../../config/api";
+
+class ViewOrganizations extends React.Component {
+    state = {
+        columnDefs: [
+            { 
+                field: 'athlete'
+            },
+            {
+                field: 'age',
+                filter: 'agNumberColumnFilter',
+                maxWidth: 100,
+            },
+            { field: 'country' },
+            {
+                field: 'year',
+                maxWidth: 100,
+            },
+            {
+                field: 'date',
+                filter: 'agDateColumnFilter',
+            },
+            { field: 'sport' },
+            {
+                field: 'gold',
+                filter: 'agNumberColumnFilter',
+            },
+            {
+                field: 'silver',
+                filter: 'agNumberColumnFilter',
+            },
+            {
+                field: 'bronze',
+                filter: 'agNumberColumnFilter',
+            },
+            {
+                field: 'total',
+                filter: false,
+            },
+        ],
+        defaultColDef: {
+            flex: 1,
+            minWidth: 150,
+            filter: true,
+            sortable: true,
+            floatingFilter: true,
+            resizable: true,
+            // overflow:true
+        },
+        rowData: null,
+    };
+
+    onGridReady = (params) => {
+        this.gridApi = params.api;
+        this.gridColumnApi = params.columnApi;
+    
+        // const updateData = (data) => {
+        //   this.setState({ rowData: data });
+        // };
+    
+        // fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
+        //   .then((resp) => resp.json())
+        //   .then((data) => updateData(data));
+    };
+    
+    loadDataFromApi = () => {
+        const jwtToken = localStorage.getItem('jwtToken');
+        const headers = {
+            'Authorization': `Bearer ${jwtToken}`,
+            'Content-Type': 'application/json'
+        };
+
+        axios.get(`${API_BASE_URL}/seeds/get-all-organisations`, { headers })
+        .then(response => {
+            console.log(response)
+            // if(response.data.isError) {
+            //     toast.error(response.data.message)
+            // } else {
+            //     toast.success(response.data.result.message)
+            // }
+            // // this.props.history.goBack()
+            // // console.log(this.props) 
+        })
+        .catch(error => {
+            console.log(error)
+        })
+    }
+
+    getApiData = () => {
+        this.setState({ loading: true })
+
+        axios({
+            method: 'get',
+            url: API_BASE_URL,
+            headers: {
+                'Content-Type': 'application/json'
+            }, 
+        })
+        .then((response) => {
+            this.setState({loading: false})
+
+            if (response.data.result?.isError) { 
+                toast.error(response.data.result.message);
+                return; 
+            }
+
+            toast.success(response.data.result.message);
+        })
+        .catch((err) => {
+            toast.error('err');
+            this.setState({loading: false})
+            return { error: true, data: err };
+        });
+    }
+
+    render() { 
+        const { show, hide } = this.props;
+
+        if(show) {
+            // this.loadDataFromApi();
+        }
+
+        return (
+            <>
+                {/* <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('seeds', 'viewOrganizations')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>UI Coming Soon</h2>
+                        <p>You can use this functionality directly by accessing the OASIS API from the Developer menu.</p>
+                        <button onClick={() => hide('seeds', 'viewOrganizations')}>OK</button>
+                    </Modal.Body>
+                </Modal> */}
+
+                <Modal 
+                    size="xl"
+                    centered 
+                    className="custom-modal custom-popup-component light-custom-popup" 
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('seeds', 'viewOrganizations')}
+                >
+                    <Modal.Body>
+                        <span className="form-cross-icon" onClick={() => hide('seeds', 'viewOrganizations')}>
+                            <i className="fa fa-times"></i>
+                        </span>
+
+                        <h1 className="single-heading">Data</h1>
+
+                        <div className="ag-theme-alpine custom-ag-parent">
+                            <AgGridReact
+                                columnDefs={this.state.columnDefs}
+                                defaultColDef={this.state.defaultColDef}
+                                onGridReady={this.onGridReady}
+                                rowData={this.state.rowData}
+                            />
+                        </div>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default ViewOrganizations;