@gnar-engine/cli 1.0.4 → 1.0.5

package/bootstrap/services/portal/src/pages/PageSinglePage/PageSinglePage.jsx

@@ -0,0 +1,338 @@
+import React, { useState, useEffect } from 'react';
+import Card from '../../layouts/Card/Card';
+import SelectRepeater from '../../elements/SelectRepeater/SelectRepeater';
+import SaveButton from '../../elements/SaveButton/SaveButton';
+import TextInput from '../../elements/TextInput/TextInput';
+import CustomSelect from '../../elements/CustomSelect/CustomSelect';
+import PageBlockSwitch from '../../components/PageBlockSwitch/PageBlockSwitch';
+import { pages } from '../../services/page.js';
+import { blocks } from '../../services/block.js';
+import { fieldTypes } from '../../data/pages.data.js';
+import { useParams } from "react-router-dom";
+import { v4 as uuidv4 } from 'uuid';
+
+function PageSinglePage() {
+
+    const { id } = useParams();
+    const [pageId, setPageId] = useState('');
+    const [pageDetails, setPageDetails] = useState({});
+    const [pageBlocks, setPageBlocks] = useState([]);
+    const [allBlocks, setAllBlocks] = useState([]);
+    const [errors, setErrors] = useState([]);
+    const [loading, setLoading] = useState(false);
+
+    useEffect(() => {
+        // fetch all blocks
+        (async () => {
+            try {
+                const blocksData = await blocks.getMany();
+                blocksData.blocks = blocksData.blocks.map(b => {
+                    delete b.id;
+                    return b;
+                })
+                setAllBlocks(blocksData.blocks || []);
+            } catch (error) {
+                console.error('Error fetching blocks data:', error);
+                setErrors([error]);
+            }
+        })();
+    }, []);
+
+    useEffect(() => {
+        console.log('Current page blocks:', JSON.stringify(pageBlocks));
+    }, [pageBlocks]);
+
+    // fetch data if editing existing
+    useEffect(() => {
+        if (id && id !== 'new') {
+            (async () => {
+                setLoading(true);
+                try {
+                    let pageData = await pages.getSingle(id);
+                    pageData = pageData.page;
+                    setPageId(pageData.id);
+                    setPageDetails({
+                        pageName: pageData.name,
+                        pageKey: pageData.key
+                    });
+                    setPageBlocks(pageData.blocks || []);
+                    setErrors([]);
+                } catch (error) {
+                    console.error('Error fetching page data:', error);
+                    setErrors([error]);
+                }
+                setLoading(false);
+            })();
+        }
+    }, [id]);
+
+    const updatePageBlocks = (newBlock, parentInstanceId = null, fieldKey = null, remove = false) => {
+
+        if (!newBlock.instanceId) {
+            newBlock.instanceId = uuidv4();
+        }
+
+        let newPageBlocks = [];
+        let foundBlock = false;
+        const blocks = [...pageBlocks];
+
+        console.log('Remove', remove, newBlock);
+
+        const updateBlocksRecursively = (blocks) => {
+            blocks = blocks.map(block => {
+                // found the block, update it
+                if (newBlock.instanceId && block.instanceId === newBlock.instanceId) {
+                    foundBlock = true;
+                    if (remove) {
+                        console.log('Removing block', newBlock);
+                        return null;
+                    }
+                    return newBlock;
+                }
+
+                // check children recursively
+                if (block.fields && block.fields.length > 0) {
+                    return {
+                        ...block,
+                        fields: block.fields.map(field => {
+                            if (field.type === 'repeater' && Array.isArray(field.value)) {
+                                return {
+                                    ...field,
+                                    value: updateBlocksRecursively(field.value)
+                                };
+                            }
+                            return field;
+                        })
+                    };
+                }
+
+                // otherwise return as is
+                return block; 
+            });
+
+            // filter out any nulls (removed blocks)
+            return blocks.filter(b => b !== null);
+        };
+
+        newPageBlocks = updateBlocksRecursively(blocks);
+
+        // add new block
+        if (!foundBlock) {
+            // add to parent
+            if (parentInstanceId && fieldKey) {
+                const addBlockToParentRecursively = (blocks) => {
+                    return blocks.map(block => {
+                        // found the parent block, add to its fields
+                        if (block.instanceId === parentInstanceId) {
+                            console.log('adding to parent instance ', block.instanceId, 'with', newBlock);
+                            return {
+                                ...block,
+                                fields: block.fields.map(field => {
+                                    console.log('checking field', field, fieldKey, field.repeaterType)
+                                    if (field.repeaterType && field.repeaterType === fieldKey) {
+                                        if (!Array.isArray(field.value)) {
+                                            field.value = [];
+                                        }
+
+                                        console.log('WOOP');
+
+                                        return {
+                                            ...field,
+                                            value: [...field.value, newBlock]
+                                        };
+                                    }
+                                    return field;
+                                })
+                            };
+                        }
+
+                        // check children recursively
+                        if (block.fields && block.fields.length > 0) {
+                            return {
+                                ...block,
+                                fields: block.fields.map(field => {
+                                    if (field.type === 'repeater' && Array.isArray(field.value)) {
+                                        return {
+                                            ...field,
+                                            value: addBlockToParentRecursively(field.value)
+                                        };
+                                    }
+                                    return field;
+                                })
+                            };
+                        }
+
+                        // otherwise return as is
+                        return block; 
+                    });
+                };
+
+                newPageBlocks = addBlockToParentRecursively(newPageBlocks);
+            }
+
+            // otherwise top level
+            else {
+                newPageBlocks.push(newBlock);
+            }
+        }
+
+        setPageBlocks(newPageBlocks);
+    }
+
+    const validateField = (e) => {
+        const value = e.target.value;
+        setErrors([]);
+
+    }
+
+    const save = async () => {
+        setLoading(true);
+        console.log('Saving...', { pageId });
+
+        // create new
+        if (!pageId) {
+            try {
+                await pages.create({
+                    name: pageDetails.pageName,
+                    key: pageDetails.pageKey,
+                    blocks: pageBlocks
+                })
+                setErrors([]);
+            } catch (error) {
+                console.error('Error creating page:', error);
+                setErrors([error]);
+            }
+        }
+
+        // update existing
+        else {
+            try {
+                await pages.update(pageId, {
+                    name: pageDetails.pageName,
+                    key: pageDetails.pageKey,
+                    blocks: pageBlocks
+                });
+                setErrors([]);
+            } catch (error) {
+                console.error('Error creating page:', error);
+                setErrors([error]);
+            }
+        }
+
+        setLoading(false);
+    }
+
+    return (
+        <div className="single-crud-page">
+            <h1>Create / Update Page</h1>
+
+            <div className="flex-row top-bar">
+                <p className="single-crud-id">{pageId || 'Creating new page...'}</p>
+                <div className="button-group">
+                    <button onClick={() => window.history.back()} className="secondary-btn">Back</button>
+                    <button onClick={save}>Save</button>
+                </div>
+            </div>
+
+            <div className="card-columns">
+                <div className="col-66">
+                    <p className="instruction">Add blocks below, then add your content and save.</p>
+
+                    {allBlocks &&
+                        <SelectRepeater
+                            items={pageBlocks}updatePageBlocks
+                            setItem={(item, index, remove = false) => {
+                                updatePageBlocks({
+                                    ...item,
+                                    fields: item.fields.map(f => ({ ...f }))
+                                }, null, null, remove);
+                            }}
+                            selectLabel="Add Block"
+                            selectText="Select a block to add"
+                            selectOptions={allBlocks}
+                            selectLabelKey="name"
+                            renderRow= {(item, index, updateItem) => (
+                                <Card
+                                    title={`Block - ${item.name}`}
+                                >
+                                    <PageBlockSwitch
+                                        block={item}
+                                        pageBlocks={pageBlocks}
+                                        updatePageBlocks={updatePageBlocks}
+                                        blockIndex={index}
+                                        allBlocks={allBlocks}
+                                        parentBlockInstanceId={null}
+                                    />
+                                </Card>
+                            )}
+                        />
+                    }
+                </div>
+
+                <div className="col-33">
+                    <Card
+                        title="Page details"
+                    >
+                        <div className="flex-col">
+                            <TextInput 
+                                label="Page Name"
+                                placeholder="Enter page Name"
+                                value={pageDetails.pageName || ''}
+                                onChange={(e) => {
+                                    validateField(e)
+                                    setPageDetails({
+                                        ...pageDetails,
+                                        pageName: e.target.value
+                                    })
+                                }}
+                                errorMessage="Invalid page name"
+                                isValid={true}
+                            />
+
+                            <TextInput 
+                                label="Page Key"
+                                placeholder="Enter page key"
+                                value={pageDetails.pageKey || ''}
+                                onChange={(e) => {
+                                    validateField(e)
+                                    setPageDetails({
+                                        ...pageDetails,
+                                        pageKey: e.target.value
+                                    })
+                                }}
+                                errorMessage="Invalid page key"
+                                isValid={true}
+                            />
+                        </div>
+                    </Card>
+                </div>
+            </div>
+
+            <div className="flex-row bottom-bar">
+                <div className="button-group">
+                    <SaveButton
+                        onClick={save}
+                        itemName="Page"
+                        loading={loading}
+                        error={errors.length > 0}
+                        isNew={!pageId}
+                    />
+                </div>
+            </div>
+
+            <div>
+                {errors.length > 0 && (
+                    <div className="error-messages">
+                        <ul>
+                            {errors.map((error, index) => (
+                                <li key={index}>{error.message}</li>
+                            ))}
+                        </ul>
+                    </div>
+                )}
+            </div>
+        </div>
+    )
+}
+
+export default PageSinglePage;

package/bootstrap/services/portal/src/pages/PagesPage/PagesPage.jsx

@@ -0,0 +1,23 @@
+import CrudList from '../../components/CrudList/CrudList';
+import { pages } from '../../services/page.js';
+
+function PagesPage() {
+
+    return (
+        <div>
+            <h1>Manage Pages</h1>
+            <CrudList 
+                entityKey="pages"
+                fetchData={pages.getMany}
+                entitySingleName="Page"
+                entityPluralName="Pages"
+                columns={[
+                    { key: 'id', label: 'ID' },
+                    { key: 'name', label: 'Page name' }
+                ]}
+            />
+        </div>
+    )
+}
+
+export default PagesPage;

package/bootstrap/services/portal/src/pages/UserSinglePage/UserSinglePage.jsx

@@ -0,0 +1,9 @@
+
+function UserSinglePage() {
+
+    return (
+        <div>User Single Page</div>
+    )
+}
+
+export default UserSinglePage;

package/bootstrap/services/portal/src/pages/UsersPage/UsersPage.jsx

@@ -0,0 +1,25 @@
+import CrudList from '../../components/CrudList/CrudList';
+import { user } from '../../services/user.js';
+
+function UsersPage() {
+
+    return (
+        <div>
+            <h1>Manage Users</h1>
+            <CrudList 
+                entityKey="users"
+                fetchData={user.getMany}
+                entitySingleName="User"
+                entityPluralName="Users"
+                columns={[
+                    { key: 'id', label: 'ID' },
+                    { key: 'username', label: 'Username' },
+                    { key: 'email', label: 'Email' },
+                    { key: 'role', label: 'Role' }
+                ]}
+            />
+        </div>
+    )
+}
+
+export default UsersPage;

package/bootstrap/services/portal/src/services/block.js

@@ -0,0 +1,28 @@
+import client from './client.js';
+
+export const blocks = {
+    getMany: async () => {
+        const { data } = await client.get('/blocks/');
+        return data;
+    },
+
+    getSingle: async ( id ) => {
+        const { data } = await client.get(`/blocks/${id}`);
+        return data;
+    },
+
+    create: async ( block ) => {
+        const { data } = await client.post('/blocks/', { block });
+        return data;
+    },
+
+    update: async ( id, block ) => {
+        const { data } = await client.post(`/blocks/${id}`, { block });
+        return data;
+    },
+
+    delete: async ( id ) => {
+        await client.delete(`/users/${id}`);
+    }
+};
+

package/bootstrap/services/portal/src/services/client.js

@@ -0,0 +1,67 @@
+import axios from 'axios';
+
+import { getAuthToken, setAuthToken, removeAuthToken, removeAuthUser } from './storage.js';
+
+// Determine the correct API URL based on the environment
+const baseApiUrl = 'http://localhost';
+
+const client = axios.create({
+    baseURL: baseApiUrl,
+    withCredentials: true,
+});
+
+// Attach authorisation header to requests
+client.interceptors.request.use(
+    (config) => {
+        // Authorization header
+        let authToken = getAuthToken();
+
+        if (authToken) {
+            config.headers['Authorization'] = `Bearer ${authToken}`;
+        }
+
+        return config;
+    },
+    (error) => {
+        return Promise.reject(error);
+    }
+);
+
+client.interceptors.response.use(
+    (response) => {
+        // update auth token if new one provided
+        const newAuthToken = response.headers['authorization'];
+
+        if (newAuthToken) {
+            const token = newAuthToken.split(' ')[1];
+            setAuthToken(token);
+            console.log('refreshed token');
+        }
+
+        return response;
+    },
+    (error) => {
+        // Log out if 401
+        if (error.response.status === 401) {
+
+            // remove auth token and user from storage
+            removeAuthToken();
+            removeAuthUser();
+
+            // redirect to login page
+            window.location.href = '/portal/login'
+
+        }
+
+        if (error.response.data.message) {
+            return Promise.reject({
+                message: error.response.data.message
+            });
+        }
+
+        return Promise.reject(error);
+    }
+);
+
+export default client;
+

package/bootstrap/services/portal/src/services/gravatar.js

@@ -0,0 +1,14 @@
+import CryptoJS from "crypto-js";
+
+export function getGravatarUrl(email, options) {
+    const {
+        size = 200,
+        defaultImage = "mp",
+        rating = "g"
+    } = options;
+
+    const normalized = email.trim().toLowerCase();
+    const hash = CryptoJS.MD5(normalized).toString(CryptoJS.enc.Hex);
+    
+    return `https://www.gravatar.com/avatar/${hash}?s=${size}&d=${defaultImage}&r=${rating}`;
+}

package/bootstrap/services/portal/src/services/page.js

@@ -0,0 +1,28 @@
+import client from './client.js';
+
+export const pages = {
+    getMany: async () => {
+        const { data } = await client.get('/pages/');
+        return data;
+    },
+
+    getSingle: async ( id ) => {
+        const { data } = await client.get(`/pages/${id}`);
+        return data;
+    },
+
+    create: async ( page ) => {
+        const { data } = await client.post('/pages/', { page });
+        return data;
+    },
+
+    update: async ( id, page ) => {
+        const { data } = await client.post(`/pages/${id}`, { page });
+        return data;
+    },
+
+    delete: async ( id ) => {
+        await client.delete(`/pages/${id}`);
+    }
+};
+

package/bootstrap/services/portal/src/services/storage.js

@@ -0,0 +1,62 @@
+/**
+ * Auth token
+ */
+export function getAuthToken() {
+    if (typeof window === 'undefined') return null;
+    try {
+        return localStorage.getItem('GE_AUTH_TOKEN');
+    } catch (error) {
+        console.error('Error getting auth token:', error);
+        return null;
+    }
+}
+
+export function setAuthToken(authToken) {
+    if (typeof window === 'undefined') return;
+    try {
+        localStorage.setItem('GE_AUTH_TOKEN', authToken);
+    } catch (error) {
+        console.error('Error setting auth token:', error);
+    }
+}
+
+export function removeAuthToken() {
+    if (typeof window === 'undefined') return;
+    try {
+        localStorage.removeItem('GE_AUTH_TOKEN');
+    } catch (error) {
+        console.error('Error removing auth token:', error);
+    }
+}
+
+/**
+ * Auth user
+ */
+export function getAuthUser() {
+    if (typeof window === 'undefined') return null;
+    try {
+        return localStorage.getItem('GE_AUTH_USER');
+    } catch (error) {
+        console.error('Error getting auth user:', error);
+        return null;
+    }
+}
+
+export function setAuthUser(authUser) {
+    if (typeof window === 'undefined') return;
+    try {
+        localStorage.setItem('GE_AUTH_USER', authUser);
+    } catch (error) {
+        console.error('Error setting auth user:', error);
+    }
+}
+
+export function removeAuthUser() {
+    if (typeof window === 'undefined') return;
+    try {
+        localStorage.removeItem('GE_AUTH_USER');
+    } catch (error) {
+        console.error('Error removing auth user:', error);
+    }
+}
+

package/bootstrap/services/portal/src/services/user.js

@@ -0,0 +1,41 @@
+import client from './client.js';
+
+export const user = {
+    authenticate: async ({ username, password }) => {
+        const { data } = await client.post('/authenticate/', { username, password });
+        return data;
+    },
+
+    getMany: async () => {
+        const { data } = await client.get('/users/');
+        return data;
+    },
+
+    getUser: async ({ userId }) => {
+        const { data } = await client.get(`/users/${userId}`);
+        return data;
+    },
+
+    createUser: async ({ user }) => {
+        const { data } = await client.post('/users/', { user });
+        return data;
+    },
+
+    update: async ({ id, user }) => {
+        const { data } = await client.post(`/users/${id}`, { user });
+        return data;
+    },
+
+    delete: async ({ userId }) => {
+        await client.delete(`/users/${userId}`);
+    },
+
+    sendPasswordReset: async ({ email }) => {
+        await client.post('/users/request-password-reset', { email });
+    },
+
+    changePassword: async ({ email, token, password }) => {
+        await client.post('/users/change-password', { email, token, password });
+    },
+};
+