From d64733ea393811ae69789565ff2fcff7211fd936 Mon Sep 17 00:00:00 2001 From: Johannes Brandenburger <79154528+johannesbrandenburger@users.noreply.github.com> Date: Fri, 9 Dec 2022 09:58:09 +0100 Subject: [PATCH 1/4] function based -> class based components (KWYG-24) + cleaned up template --- src/components/app.jsx | 126 ++++-------------------- src/js/routes.js | 85 ---------------- src/js/store.js | 28 +----- src/pages/404.jsx | 14 --- src/pages/about.jsx | 20 ---- src/pages/catalog.jsx | 37 ------- src/pages/dynamic-route.jsx | 38 ------- src/pages/form.jsx | 175 --------------------------------- src/pages/home.jsx | 78 +++------------ src/pages/product.jsx | 25 ----- src/pages/request-and-load.jsx | 28 ------ src/pages/settings.jsx | 175 --------------------------------- 12 files changed, 40 insertions(+), 789 deletions(-) delete mode 100644 src/pages/404.jsx delete mode 100644 src/pages/about.jsx delete mode 100644 src/pages/catalog.jsx delete mode 100644 src/pages/dynamic-route.jsx delete mode 100644 src/pages/form.jsx delete mode 100644 src/pages/product.jsx delete mode 100644 src/pages/request-and-load.jsx delete mode 100644 src/pages/settings.jsx diff --git a/src/components/app.jsx b/src/components/app.jsx index 7fabe2b..ddb4917 100644 --- a/src/components/app.jsx +++ b/src/components/app.jsx @@ -28,129 +28,41 @@ import { import routes from '../js/routes'; import store from '../js/store'; -const MyApp = () => { - // Login screen demo data - const [username, setUsername] = useState(''); - const [password, setPassword] = useState(''); +export default class MyApp extends React.Component { - // Framework7 Parameters - const f7params = { + f7params = { name: 'Know Where You Go', // App name - theme: 'auto', // Automatic theme detection - - - - // App store - store: store, - // App routes - routes: routes, - // Register service worker (only on production build) - serviceWorker: process.env.NODE_ENV ==='production' ? { - path: '/service-worker.js', - } : {}, + theme: 'auto', // Automatic theme detection + // App store + store: store, + // App routes + routes: routes, + // Register service worker (only on production build) + serviceWorker: process.env.NODE_ENV === 'production' ? { + path: '/service-worker.js', + } : {}, }; - const alertLoginData = () => { - f7.dialog.alert('Username: ' + username + '
Password: ' + password, () => { - f7.loginScreen.close(); - }); - } - f7ready(() => { - - // Call F7 APIs here - }); + render() { - return ( - + return ( + {/* Left panel with cover effect*/} - + Left panel content goes here - - {/* Right panel with reveal effect*/} - - - - - Right panel content goes here - - - - - {/* Views/Tabs container */} - {/* Tabbar for switching views-tabs */} - - - - - - - {/* Your main view/tab, should have "view-main" class. It also has "tabActive" prop */} - - {/* Catalog View */} - - - {/* Settings View */} - - - - {/* Popup */} - - - - - - Close - - - -

Popup content goes here.

- - - - - - - - - Login - - setUsername(e.target.value)} - > - setPassword(e.target.value)} - > - - - alertLoginData()} /> - - Some text about login information.
Click "Sign In" to close Login Screen - - - - - - - ) -} -export default MyApp; \ No newline at end of file + + ) + } +} \ No newline at end of file diff --git a/src/js/routes.js b/src/js/routes.js index c27e7c5..e20ede4 100644 --- a/src/js/routes.js +++ b/src/js/routes.js @@ -1,96 +1,11 @@ import HomePage from '../pages/home.jsx'; -import AboutPage from '../pages/about.jsx'; -import FormPage from '../pages/form.jsx'; -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'; 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; - - // 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, - }, ]; export default routes; diff --git a/src/js/store.js b/src/js/store.js index 1d8b1fa..794fc0a 100644 --- a/src/js/store.js +++ b/src/js/store.js @@ -3,33 +3,15 @@ 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, error nesciunt vero, blanditiis pariatur dolor, minima sed sapiente rerum, dolorem corrupti hic modi praesentium unde saepe perspiciatis.' - }, - { - id: '2', - title: 'Apple iPhone 8 Plus', - description: 'Velit odit autem modi saepe ratione totam minus, aperiam, labore quia provident temporibus quasi est ut aliquid blanditiis beatae suscipit odio vel! Nostrum porro sunt sint eveniet maiores, dolorem itaque!' - }, - { - id: '3', - title: 'Apple iPhone X', - description: 'Expedita sequi perferendis quod illum pariatur aliquam, alias laboriosam! Vero blanditiis placeat, mollitia necessitatibus reprehenderit. Labore dolores amet quos, accusamus earum asperiores officiis assumenda optio architecto quia neque, quae eum.' - }, - ] + }, + getters: { - products({ state }) { - return state.products; - } + }, + actions: { - addProduct({ state }, product) { - state.products = [...state.products, product]; - }, + }, }) export default store; diff --git a/src/pages/404.jsx b/src/pages/404.jsx deleted file mode 100644 index 123f1a0..0000000 --- a/src/pages/404.jsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import { Page, Navbar, Block } from 'framework7-react'; - -const NotFoundPage = () => ( - - - -

Sorry

-

Requested content not found.

- - -); - -export default NotFoundPage; diff --git a/src/pages/about.jsx b/src/pages/about.jsx deleted file mode 100644 index 8b3242e..0000000 --- a/src/pages/about.jsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import { Page, Navbar, Block, BlockTitle } from 'framework7-react'; - -const AboutPage = () => ( - - - About My App - -

Fugiat perspiciatis excepturi, soluta quod non ullam deleniti. Nobis sint nemo consequuntur, fugiat. Eius perferendis animi autem incidunt vel quod tenetur nostrum, voluptate omnis quasi quidem illum consequuntur, a, quisquam.

-

Laudantium neque magnam vitae nemo quam commodi, in cum dolore obcaecati laborum, excepturi harum, optio qui, consequuntur? Obcaecati dolor sequi nesciunt culpa quia perspiciatis, reiciendis ex debitis, ut tenetur alias.

- - -

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni molestiae laudantium dignissimos est nobis delectus nemo ea alias voluptatum architecto, amet similique, saepe iste consectetur in repellat ut minus quibusdam!

-

Molestias et distinctio porro nesciunt ratione similique, magni doloribus, rerum nobis, aliquam quae reiciendis quasi modi. Nam a recusandae, fugiat in ea voluptates fuga eius, velit corrupti reprehenderit dignissimos consequatur!

-

Blanditiis, cumque quo adipisci. Molestiae, dolores dolorum quos doloremque ipsa ullam eligendi commodi deserunt doloribus inventore magni? Ea mollitia veniam nostrum nihil, iusto doloribus a at! Ea molestiae ullam delectus!

- - -); - -export default AboutPage; diff --git a/src/pages/catalog.jsx b/src/pages/catalog.jsx deleted file mode 100644 index ec4d969..0000000 --- a/src/pages/catalog.jsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; -import { Page, Navbar, List, ListItem, Block, Button, useStore } from 'framework7-react'; -import store from '../js/store' - -const CatalogPage = () => { - const products = useStore('products'); - - const addProduct = () => { - store.dispatch('addProduct', { - id: '4', - title: 'Apple iPhone 12', - description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi tempora similique reiciendis, error nesciunt vero, blanditiis pariatur dolor, minima sed sapiente rerum, dolorem corrupti hic modi praesentium unde saepe perspiciatis.' - }); - } - - return ( - - - - {products.map((product) => ( - - ))} - - {products.length === 3 && ( - - - - )} - - ); -} - -export default CatalogPage; diff --git a/src/pages/dynamic-route.jsx b/src/pages/dynamic-route.jsx deleted file mode 100644 index a76072a..0000000 --- a/src/pages/dynamic-route.jsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; -import { Page, Navbar, Block, Link } from 'framework7-react'; - -const DynamicRoutePage = (props) => { - const { f7route, f7router } = props; - return ( - - - -
    -
  • Url: {f7route.url}
    • -
  • Path: {f7route.path}
    • -
  • Hash: {f7route.hash}
    • -
  • Params: -
      - {Object.keys(f7route.params).map(key => ( -
    • {key}: {f7route.params[key]}
      • - ))} -
    -
    • -
  • Query: -
      - {Object.keys(f7route.query).map(key => ( -
    • {key}: {f7route.query[key]}
      • - ))} -
    -
    • -
  • Route: {f7route.route.path}
    • -
- - - f7router.back()}>Go back via Router API - - - ); -} - -export default DynamicRoutePage; diff --git a/src/pages/form.jsx b/src/pages/form.jsx deleted file mode 100644 index 79cfebc..0000000 --- a/src/pages/form.jsx +++ /dev/null @@ -1,175 +0,0 @@ -import React from 'react'; -import { - Page, - Navbar, - List, - ListInput, - ListItem, - Toggle, - BlockTitle, - Row, - Button, - Range, - Block -} from 'framework7-react'; - -const FormPage = () => ( - - - - Form Example - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Buttons - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Checkbox group - - - - - - - Radio buttons group - - - - - - -); - -export default FormPage; diff --git a/src/pages/home.jsx b/src/pages/home.jsx index a8146b2..4657fb8 100644 --- a/src/pages/home.jsx +++ b/src/pages/home.jsx @@ -17,70 +17,24 @@ import { Button } from 'framework7-react'; -const HomePage = () => ( - - {/* Top Navbar */} - - - - - Know Where You Go - - - - Know Where You Go - +export default class HomePage extends React.Component { - {/* Page content */} - -

This is an example of tabs-layout application. The main point of such tabbed layout is that each tab contains independent view with its own routing and navigation.

+ render() { + return ( -

Each tab/view may have different layout, different navbar type (dynamic, fixed or static) or without navbar like this tab.

- - Navigation - - - - + - Modals - - - - - - - - - - + {/* Top Navbar */} - Panels - - - - - - - - - - + + + + + - - - - - - -); -export default HomePage; \ No newline at end of file + {/* Page content */} + + + ) + } +} diff --git a/src/pages/product.jsx b/src/pages/product.jsx deleted file mode 100644 index 13fc7a8..0000000 --- a/src/pages/product.jsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import { Page, Navbar, BlockTitle, Block, useStore } from 'framework7-react'; - -const ProductPage = (props) => { - const productId = props.f7route.params.id; - const products = useStore('products'); - - var currentProduct; - products.forEach(function (product) { - if (product.id === productId) { - currentProduct = product; - } - }); - return ( - - - About {currentProduct.title} - - {currentProduct.description} - - - ); -} - -export default ProductPage; diff --git a/src/pages/request-and-load.jsx b/src/pages/request-and-load.jsx deleted file mode 100644 index a8bf3e5..0000000 --- a/src/pages/request-and-load.jsx +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; -import { Page, Navbar, Block, List, ListItem } from 'framework7-react'; - -const RequestAndLoad = (props) => { - const { user } = props; - - return ( - - - - {user.about} - - - {user.links.map((link, index) => ( - - ))} - - - ); -} - -export default RequestAndLoad; diff --git a/src/pages/settings.jsx b/src/pages/settings.jsx deleted file mode 100644 index 98b14ce..0000000 --- a/src/pages/settings.jsx +++ /dev/null @@ -1,175 +0,0 @@ -import React from 'react'; -import { - Page, - Navbar, - List, - ListInput, - ListItem, - Toggle, - BlockTitle, - Row, - Button, - Range, - Block -} from 'framework7-react'; - -const SettingsPage = () => ( - - - - Form Example - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Buttons - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Checkbox group - - - - - - - Radio buttons group - - - - - - -); - -export default SettingsPage; From 4883459c27d7ca1900b835957f42630c69ca7369 Mon Sep 17 00:00:00 2001 From: Johannes Brandenburger <79154528+johannesbrandenburger@users.noreply.github.com> Date: Fri, 9 Dec 2022 10:11:53 +0100 Subject: [PATCH 2/4] exports at end of file --- src/components/app.jsx | 6 ++++-- src/js/routes.js | 4 ++-- src/pages/home.jsx | 4 +++- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/components/app.jsx b/src/components/app.jsx index ddb4917..5322e5e 100644 --- a/src/components/app.jsx +++ b/src/components/app.jsx @@ -28,7 +28,7 @@ import { import routes from '../js/routes'; import store from '../js/store'; -export default class MyApp extends React.Component { +class MyApp extends React.Component { f7params = { name: 'Know Where You Go', // App name @@ -65,4 +65,6 @@ export default class MyApp extends React.Component { ) } -} \ No newline at end of file +} + +export default MyApp; \ No newline at end of file diff --git a/src/js/routes.js b/src/js/routes.js index e20ede4..b691f82 100644 --- a/src/js/routes.js +++ b/src/js/routes.js @@ -1,10 +1,10 @@ -import HomePage from '../pages/home.jsx'; +import Home from '../pages/home.jsx'; var routes = [ { path: '/', - component: HomePage, + component: Home, }, ]; diff --git a/src/pages/home.jsx b/src/pages/home.jsx index 4657fb8..6c7e502 100644 --- a/src/pages/home.jsx +++ b/src/pages/home.jsx @@ -17,7 +17,7 @@ import { Button } from 'framework7-react'; -export default class HomePage extends React.Component { +class Home extends React.Component { render() { return ( @@ -38,3 +38,5 @@ export default class HomePage extends React.Component { ) } } + +export default Home; \ No newline at end of file From 1957b77d36c7541ccda2b2784f4a0a6eccaa30ce Mon Sep 17 00:00:00 2001 From: Johannes Brandenburger <79154528+johannesbrandenburger@users.noreply.github.com> Date: Fri, 9 Dec 2022 10:11:53 +0100 Subject: [PATCH 3/4] exports at end of file (KWYG-24) --- src/components/app.jsx | 6 ++++-- src/js/routes.js | 4 ++-- src/pages/home.jsx | 4 +++- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/components/app.jsx b/src/components/app.jsx index ddb4917..5322e5e 100644 --- a/src/components/app.jsx +++ b/src/components/app.jsx @@ -28,7 +28,7 @@ import { import routes from '../js/routes'; import store from '../js/store'; -export default class MyApp extends React.Component { +class MyApp extends React.Component { f7params = { name: 'Know Where You Go', // App name @@ -65,4 +65,6 @@ export default class MyApp extends React.Component { ) } -} \ No newline at end of file +} + +export default MyApp; \ No newline at end of file diff --git a/src/js/routes.js b/src/js/routes.js index e20ede4..b691f82 100644 --- a/src/js/routes.js +++ b/src/js/routes.js @@ -1,10 +1,10 @@ -import HomePage from '../pages/home.jsx'; +import Home from '../pages/home.jsx'; var routes = [ { path: '/', - component: HomePage, + component: Home, }, ]; diff --git a/src/pages/home.jsx b/src/pages/home.jsx index 4657fb8..6c7e502 100644 --- a/src/pages/home.jsx +++ b/src/pages/home.jsx @@ -17,7 +17,7 @@ import { Button } from 'framework7-react'; -export default class HomePage extends React.Component { +class Home extends React.Component { render() { return ( @@ -38,3 +38,5 @@ export default class HomePage extends React.Component { ) } } + +export default Home; \ No newline at end of file From f61e89609617c50d1cd0a13ee359f3314bd15e44 Mon Sep 17 00:00:00 2001 From: Johannes Brandenburger <79154528+johannesbrandenburger@users.noreply.github.com> Date: Fri, 9 Dec 2022 10:42:52 +0100 Subject: [PATCH 4/4] delete unused imports (KWYG-24) --- src/components/app.jsx | 16 +--------------- src/pages/home.jsx | 11 ----------- 2 files changed, 1 insertion(+), 26 deletions(-) diff --git a/src/components/app.jsx b/src/components/app.jsx index 5322e5e..d246a6f 100644 --- a/src/components/app.jsx +++ b/src/components/app.jsx @@ -1,27 +1,13 @@ -import React, { useState, useEffect } from 'react'; +import React from 'react'; import { - f7, - f7ready, App, Panel, Views, View, - Popup, Page, Navbar, - Toolbar, - NavRight, - Link, Block, - BlockTitle, - LoginScreen, - LoginScreenTitle, - List, - ListItem, - ListInput, - ListButton, - BlockFooter } from 'framework7-react'; diff --git a/src/pages/home.jsx b/src/pages/home.jsx index 6c7e502..5ab7a37 100644 --- a/src/pages/home.jsx +++ b/src/pages/home.jsx @@ -3,18 +3,7 @@ import { Page, Navbar, NavLeft, - NavTitle, - NavTitleLarge, - NavRight, Link, - Toolbar, - Block, - BlockTitle, - List, - ListItem, - Row, - Col, - Button } from 'framework7-react'; class Home extends React.Component {