Merge remote-tracking branch 'origin/KWYG-Sprint-0' into KWYG-21-CI/C…

…D-einrichten

src/components/app.jsx

@@ -1,40 +1,14 @@
-import React, { useState } from "react";
-import process from "node:process";
-import {
-  f7,
-  f7ready,
-  App,
-  Panel,
-  Views,
-  View,
-  Popup,
-  Page,
-  Navbar,
-  Toolbar,
-  NavRight,
-  Link,
-  Block,
-  LoginScreen,
-  LoginScreenTitle,
-  List,
-  ListInput,
-  ListButton,
-  BlockFooter,
-} from "framework7-react";
+import React from "react";
+
+import { App, Panel, Views, View, Page, Navbar, Block } from "framework7-react";
 
 import routes from "../js/routes";
 import store from "../js/store";
 
-const MyApp = () => {
-  // Login screen demo data
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
-
-  // Framework7 Parameters
-  const f7params = {
+class MyApp extends React.Component {
+  f7params = {
     name: "Know Where You Go", // App name
     theme: "auto", // Automatic theme detection
-
     // App store
     store: store,
     // App routes
@@ -47,123 +21,27 @@ const MyApp = () => {
           }
         : {},
   };
-  const alertLoginData = () => {
-    f7.dialog.alert("Username: " + username + "<br>Password: " + password, () => {
-      f7.loginScreen.close();
-    });
-  };
-  f7ready(() => {
-    // Call F7 APIs here
-  });
-
-  return (
-    <App {...f7params} dark>
-      {/* Left panel with cover effect*/}
-      <Panel left cover dark>
-        <View>
-          <Page>
-            <Navbar title="Left Panel" />
-            <Block>Left panel content goes here</Block>
-          </Page>
-        </View>
-      </Panel>
-
-      {/* Right panel with reveal effect*/}
-      <Panel right reveal dark>
-        <View>
-          <Page>
-            <Navbar title="Right Panel" />
-            <Block>Right panel content goes here</Block>
-          </Page>
-        </View>
-      </Panel>
-
-      {/* Views/Tabs container */}
-      <Views tabs className="safe-areas">
-        {/* Tabbar for switching views-tabs */}
-        <Toolbar tabbar labels bottom>
-          <Link
-            tabLink="#view-home"
-            tabLinkActive
-            iconIos="f7:house_fill"
-            iconAurora="f7:house_fill"
-            iconMd="material:home"
-            text="Home"
-          />
-          <Link
-            tabLink="#view-catalog"
-            iconIos="f7:square_list_fill"
-            iconAurora="f7:square_list_fill"
-            iconMd="material:view_list"
-            text="Catalog"
-          />
-          <Link
-            tabLink="#view-settings"
-            iconIos="f7:gear"
-            iconAurora="f7:gear"
-            iconMd="material:settings"
-            text="Settings"
-          />
-        </Toolbar>
-
-        {/* Your main view/tab, should have "view-main" class. It also has "tabActive" prop */}
-        <View id="view-home" main tab tabActive url="/" />
-
-        {/* Catalog View */}
-        <View id="view-catalog" name="catalog" tab url="/catalog/" />
-
-        {/* Settings View */}
-        <View id="view-settings" name="settings" tab url="/settings/" />
-      </Views>
 
-      {/* Popup */}
-      <Popup id="my-popup">
-        <View>
-          <Page>
-            <Navbar title="Popup">
-              <NavRight>
-                <Link popupClose>Close</Link>
-              </NavRight>
-            </Navbar>
-            <Block>
-              <p>Popup content goes here.</p>
-            </Block>
-          </Page>
-        </View>
-      </Popup>
+  render() {
+    return (
+      <App {...this.f7params} dark>
+        {/* Left panel with cover effect*/}
+        <Panel left cover dark>
+          <View>
+            <Page>
+              <Navbar title="Left Panel" />
+              <Block>Left panel content goes here</Block>
+            </Page>
+          </View>
+        </Panel>
+
+        {/* Views/Tabs container */}
+        <Views tabs className="safe-areas">
+          <View id="view-home" main tab tabActive url="/" />
+        </Views>
+      </App>
+    );
+  }
+}
 
-      <LoginScreen id="my-login-screen">
-        <View>
-          <Page loginScreen>
-            <LoginScreenTitle>Login</LoginScreenTitle>
-            <List form>
-              <ListInput
-                type="text"
-                name="username"
-                placeholder="Your username"
-                value={username}
-                onInput={e => setUsername(e.target.value)}
-              ></ListInput>
-              <ListInput
-                type="password"
-                name="password"
-                placeholder="Your password"
-                value={password}
-                onInput={e => setPassword(e.target.value)}
-              ></ListInput>
-            </List>
-            <List>
-              <ListButton title="Sign In" onClick={() => alertLoginData()} />
-              <BlockFooter>
-                Some text about login information.
-                <br />
-                Click &quot;Sign In&quot; to close Login Screen
-              </BlockFooter>
-            </List>
-          </Page>
-        </View>
-      </LoginScreen>
-    </App>
-  );
-};
 export default MyApp;

src/js/routes.js

@@ -5,91 +5,12 @@ import CatalogPage from "../pages/catalog.jsx";
 import ProductPage from "../pages/product.jsx";
 import SettingsPage from "../pages/settings.jsx";
 
-import DynamicRoutePage from "../pages/dynamic-route.jsx";
-import RequestAndLoad from "../pages/request-and-load.jsx";
-import NotFoundPage from "../pages/404.jsx";
+import Home from "../pages/home.jsx";
 
 var routes = [
   {
     path: "/",
-    component: HomePage,
-  },
-  {
-    path: "/about/",
-    component: AboutPage,
-  },
-  {
-    path: "/form/",
-    component: FormPage,
-  },
-  {
-    path: "/catalog/",
-    component: CatalogPage,
-  },
-  {
-    path: "/product/:id/",
-    component: ProductPage,
-  },
-  {
-    path: "/settings/",
-    component: SettingsPage,
-  },
-
-  {
-    path: "/dynamic-route/blog/:blogId/post/:postId/",
-    component: DynamicRoutePage,
-  },
-  {
-    path: "/request-and-load/user/:userId/",
-    async: function ({ router, to, resolve }) {
-      // App instance
-      var app = router.app;
-
-      // Show Preloader
-      app.preloader.show();
-
-      // User ID from request
-      var userId = to.params.userId;
-      console.log(userId);
-
-      // Simulate Ajax Request
-      setTimeout(function () {
-        // We got user data from request
-        var user = {
-          firstName: "Vladimir",
-          lastName: "Kharlampidi",
-          about: "Hello, i am creator of Framework7! Hope you like it!",
-          links: [
-            {
-              title: "Framework7 Website",
-              url: "http://framework7.io",
-            },
-            {
-              title: "Framework7 Forum",
-              url: "http://forum.framework7.io",
-            },
-          ],
-        };
-        // Hide Preloader
-        app.preloader.hide();
-
-        // Resolve route to load page
-        resolve(
-          {
-            component: RequestAndLoad,
-          },
-          {
-            props: {
-              user: user,
-            },
-          },
-        );
-      }, 1000);
-    },
-  },
-  {
-    path: "(.*)",
-    component: NotFoundPage,
+    component: Home,
   },
 ];
 

src/js/store.js

@@ -1,34 +1,10 @@
 import { createStore } from "framework7/lite";
 
 const store = createStore({
-  state: {
-    products: [
-      {
-        id: "1",
-        title: "Apple iPhone 8",
-        description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi tempora similique reiciendis.",
-      },
-      {
-        id: "2",
-        title: "Apple iPhone 8 Plus",
-        description: "Velit odit autem modi saepe ratione totam minus, aperiam, labore quia provident temporibus.",
-      },
-      {
-        id: "3",
-        title: "Apple iPhone X",
-        description: "Expedita sequi perferendis quod illum pariatur aliquam, alias laboriosam! Vero blanditiis.",
-      },
-    ],
-  },
-  getters: {
-    products({ state }) {
-      return state.products;
-    },
-  },
-  actions: {
-    addProduct({ state }, product) {
-      state.products = [...state.products, product];
-    },
-  },
+  state: {},
+
+  getters: {},
+
+  actions: {},
 });
 export default store;