F/types

package.json

@@ -34,11 +34,12 @@
     "cross-env": "^7.0.3",
     "css-loader": "^6.5.1",
     "dotenv": "^14.3.2",
+    "expo": "^48.0.4",
     "firebase": "^9.6.5",
     "nodemon": "^2.0.15",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.2.1",
     "style-loader": "^3.3.1"
   }
-}
+}

src/app.js

@@ -8,31 +8,47 @@ import './firebaseConfig';
 import LoginPage from './pages/login/loginPage.js';
 import SignupPage from './pages/signup/signupPage.js';
 import NotFoundPage from './pages/notFound/notFoundPage.js';
-import TodoPage from './pages/todo/todoPage.js';
-import PrioritiesPage from './pages/priorities/prioritiesPage';
-import ReviewPage from './pages/review/reviewPage';
-import TimelinePage from './pages/timeline/timelinePage';
+import HomePage from './pages/home/homePage';
 import { AuthProvider } from './contexts/AuthContext';
 import { DBProvider } from './contexts/DBContext';
+import { NavigationProvider } from './contexts/NavigationContext';
+import { TypesProvider } from './contexts/TypesContext';
+import { ViewsProvider } from './contexts/ViewsContext';
+import TypesPage from './pages/types/typesPage';
+import TypePage from './pages/type/typePage';
+import ViewsPage from './pages/views/viewsPage';
+import ViewPage from './pages/view/viewPage';
+import EditViewPage from './pages/editview/editViewPage';
+import EditTypePage from './pages/edittype/editTypePage';
+import TypeDataPage from './pages/typedata/typeDataPage';
 
 const App = () => {
     return (
-        <AuthProvider>
-            <DBProvider>
-                <BrowserRouter>
-                    <Routes>
-                        <Route path="/" element={<PrioritiesPage />} />
-                        <Route path="/priorities" element={<PrioritiesPage />} />
-                        <Route path="/todo" element={<TodoPage />} />
-                        <Route path="/review" element={<ReviewPage />} />
-                        <Route path="/timeline" element={<TimelinePage />} />
-                        <Route path="/login" element={<LoginPage />} />
-                        <Route path="/signup" element={<SignupPage />} />
-                        <Route path="*" element={<NotFoundPage />} />
-                    </Routes >
-                </BrowserRouter >
-            </DBProvider>
-        </AuthProvider>
+        <NavigationProvider>
+            <AuthProvider>
+                <DBProvider>
+                    <TypesProvider>
+                        <ViewsProvider>
+                            <BrowserRouter>
+                                <Routes>
+                                    <Route path="/" element={<HomePage />} />
+                                    <Route path="/login" element={<LoginPage />} />
+                                    <Route path="/signup" element={<SignupPage />} />
+                                    <Route path="/types" element={<TypesPage />} />
+                                    <Route path="/type" element={<TypePage />} />
+                                    <Route path="/views" element={<ViewsPage />} />
+                                    <Route path="/view" element={<ViewPage />} />
+                                    <Route path="/editview" element={<EditViewPage />} />
+                                    <Route path="/edittype" element={<EditTypePage />} />
+                                    <Route path="/data" element={<TypeDataPage />} />
+                                    <Route path="*" element={<NotFoundPage />} />
+                                </Routes >
+                            </BrowserRouter >
+                        </ViewsProvider>
+                    </TypesProvider>
+                </DBProvider>
+            </AuthProvider>
+        </NavigationProvider>
     );
 };
 

src/components/Displays/CardsDisplay/Card.js

@@ -0,0 +1,20 @@
+//React
+import React, { useContext } from 'react';
+import { NavigationContext } from '../../../contexts/NavigationContext';
+import './Card.css';
+const Card = (props) => {
+
+    const { navigateToPage } = useContext(NavigationContext);
+
+    const cardTitle = props.cardTitle;
+    const typeKey = props.typeKey;
+    const dataKey = props.dataKey;
+
+    return (
+        <div draggable className={"content_card clickable"} onClick={() => { navigateToPage("/data", { typeKey: typeKey, dataKey: dataKey }); }}>
+            {cardTitle}
+        </div >
+    );
+};
+
+export default Card;

src/components/Displays/CardsDisplay/CardsDisplay.js

@@ -0,0 +1,53 @@
+//React
+import React, { useContext } from 'react';
+import { NavigationContext } from '../../../contexts/NavigationContext';
+import { TypesContext } from '../../../contexts/TypesContext';
+import IndexTableFormRow from '../../IndexTable/IndexTableFormRow';
+import Card from './Card';
+const CardsDisplay = (props) => {
+
+    const { getType } = useContext(TypesContext);
+
+    const display = props.display;
+    let typeKey = display.type;
+    let typeData = getType(typeKey);
+
+    let orderBy = display?.orderBy;
+
+    if (!typeData || !typeData.name) {
+        return (
+            <p>No type found.</p>
+        );
+    }
+
+    let datatype = { name: "Data", field: `types/${typeKey}/data`, target: "data" };
+    let fields = [{ name: "Name", field: "name" }, { name: "Description", field: "description" }];
+
+    function keyData(data) {
+        if (!data) {
+            return [];
+        }
+        let keyedData = Object.keys(data).map((key) => {
+            let value = data[key];
+            value.key = key;
+            return value;
+        });
+        return keyedData;
+    }
+    let keyedData = keyData(typeData.data);
+    return (
+        <>
+            <h2>{display.title}</h2>
+            <table><thead><IndexTableFormRow datatype={datatype} fields={fields} /></thead></table>
+            {keyedData.sort((object1, object2) => {
+                if (object1?.fields && object2?.fields) {
+                    return object1.fields[orderBy] - object2.fields[orderBy];
+                }
+            }).map((object) => {
+                return <Card className={"clickable"} key={JSON.stringify(object)} cardTitle={object.name} typeKey={typeData.key} dataKey={object.key} />;
+            })}
+        </>
+    );
+};
+
+export default CardsDisplay;

src/components/Displays/CardsDisplay/EditableCardsDisplay.js

@@ -0,0 +1,160 @@
+//React
+import { off, onValue, ref, remove, update } from 'firebase/database';
+import React, { useContext, useEffect, useState } from 'react';
+import { AuthContext } from '../../../contexts/AuthContext';
+import { DBContext } from '../../../contexts/DBContext';
+import EditableText from '../../EditableText/EditableText';
+import { TypesContext } from '../../../contexts/TypesContext';
+const EditableCardsDisplay = (props) => {
+
+    const { user } = useContext(AuthContext);
+    const { database } = useContext(DBContext);
+    const { getType } = useContext(TypesContext);
+
+    const [typesDbRef, setTypesDbRef] = useState(undefined);
+    const [displayDbRef, setDisplayDbRef] = useState(undefined);
+    const [types, setTypes] = useState([]);
+
+    const display = props.display;
+    const displayRef = props.displayRef;
+
+    let displayType = display?.type || undefined;
+    let displayOrderBy = display?.orderBy || undefined;
+
+    let typeData = getType(displayType);
+    let typeFields = [];
+    if (typeData?.fields) {
+        typeFields = Object.keys(typeData.fields).map((key) => {
+            let value = typeData.fields[key];
+            value.key = key;
+            return value;
+        });
+    }
+
+
+    //Set db ref on user set
+    useEffect(() => {
+        if (user) {
+            if (typesDbRef) {
+                off(typesDbRef);
+            }
+            if (displayDbRef) {
+                off(displayDbRef);
+            }
+            setTypesDbRef(ref(database, `users/${user.uid}/types`));
+            if (display) {
+                setDisplayDbRef(ref(database, `${displayRef}`));
+            }
+            setTypes([]);
+        }
+    }, [user]);
+
+    useEffect(() => {
+        if (!typesDbRef) {
+            return;
+        }
+        if (!user) {
+            console.log("Can't load content - no user found.");
+            return;
+        }
+        onValue(typesDbRef, (snapshot) => {
+            const data = snapshot.val();
+            if (data == null) {
+                console.log("An error occurred.");
+                setTypes([]);
+                return;
+            }
+            let keyedData = Object.keys(data).map((key) => {
+                let value = data[key];
+                value.key = key;
+                return value;
+            });
+            setTypes(keyedData);
+        });
+    }, [typesDbRef]);
+
+    function setDisplayType(value) {
+        if (displayDbRef) {
+            let updates = {};
+            updates["type"] = value;
+            let res = update(displayDbRef, updates);
+        }
+    }
+
+    function setDisplayValue(dataPath, fieldName, value) {
+        if (displayDbRef) {
+            let updates = {};
+            updates[fieldName] = value;
+
+            let res = update(displayDbRef, updates);
+        }
+    };
+
+    function setOrderBy(value) {
+        if (displayDbRef) {
+            let updates = {};
+            updates["orderBy"] = value;
+            let res = update(displayDbRef, updates);
+        }
+    }
+
+    function clearType() {
+        remove(ref(database, `${displayRef}/type`));
+
+    }
+
+    function clearOrderBy() {
+        remove(ref(database, `${displayRef}/orderBy`));
+    }
+
+    if (!display) {
+        return null;
+    }
+
+    return (
+        <div>
+            <h3>Card Display</h3>
+            <label>Title</label>
+            <EditableText value={display.title} fieldName="title" element={(content) => <h3>{content}</h3>} changeValue={setDisplayValue} dbPath={""} />
+            <label>Type</label>
+            <select value={displayType ? displayType : "Select Type"} onChange={field => setDisplayType(field.target.value)}>
+                {(display && display.type)
+                    ? null
+                    : <option defaultValue={true} hidden disabled>Select Type</option>
+                }
+                {types.map((type) => {
+                    if (type.key == displayType) {
+                        return <option key={type.key} value={type.key} defaultValue>{type.name}</option>;
+                    }
+                    return (
+                        <option key={type.key} value={type.key}>{type.name}</option>
+                    );
+                })}
+            </select>
+            <p className={"clickable clear_button"} onClick={() => clearType()}>Clear</p>
+            {
+                typeData ? <>
+                    <label>Order By</label>
+                    <select value={displayOrderBy ? displayOrderBy : "Select Order By Field"} onChange={field => setOrderBy(field.target.value)}>
+                        {(display && display.orderBy)
+                            ? null
+                            : <option defaultValue hidden disabled>Select Order By Field</option>
+                        }
+                        {typeFields.map((field) => {
+                            if (field.key === displayOrderBy) {
+                                return <option key={field.key} value={field.key} defaultValue={true}>{field.title}</option>;
+                            }
+                            return (
+                                <option key={field.key} value={field.key}>{field.title}</option>
+                            );
+                        })}
+                    </select>
+                    <p className={"clickable clear_button"} onClick={() => clearOrderBy()}>Clear</p>
+                </> : null
+            }
+
+        </div>
+    );
+};
+
+export default EditableCardsDisplay;