Skip to content

Instantly share code, notes, and snippets.

@ItFlyingStart

ItFlyingStart/App.js

Created March 23, 2022 07:12
Download ZIP

Revisions

  1. @elibroftw elibroftw revised this gist Mar 18, 2022. No changes.
  2. @elibroftw elibroftw revised this gist Mar 18, 2022. 1 changed file with 7 additions and 6 deletions.
    13 changes: 7 additions & 6 deletions App.js
    View file
    Original file line number Diff line number Diff line change
    @@ -14,6 +14,7 @@ import { invoke } from '@tauri-apps/api/tauri'
    // import CIFInfo from './CIFInfo';
    // import About from './About';

    // call stateSetter with value in storage given by key
    function getItem(key, stateSetter, defaultValue) {
    localforage.getItem(key).then(value => stateSetter(value)).catch(_ => {
    stateSetter(defaultValue);
    @@ -38,16 +39,16 @@ function App() {
    // { component: About, name: 'About' }
    ];

    // function demoNotification() {
    // new Notification('Title', {
    // body: "This is the notification body",
    // });
    // }

    function toggleColorScheme(value) {
    const newValue = value || (colorScheme === 'dark' ? 'light' : 'dark');
    setColorScheme(newValue);
    localforage.setItem('colorScheme', newValue);
    };

    function demoNotification() {
    new Notification('Title', {
    body: "This is the notification body",
    });
    }

    const useStyles = createStyles(theme => ({
  3. @elibroftw elibroftw revised this gist Mar 18, 2022. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions App.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,4 @@
    import './App.css';
    import { AppShell, Navbar, Header, Text, MediaQuery, Burger, ActionIcon, Group } from '@mantine/core';
    import { MantineProvider } from '@mantine/core';
    import { SunIcon, MoonIcon } from '@modulz/radix-icons';
  4. @elibroftw elibroftw revised this gist Mar 18, 2022. No changes.
  5. @elibroftw elibroftw revised this gist Mar 18, 2022. No changes.
  6. @elibroftw elibroftw revised this gist Mar 18, 2022. No changes.
  7. @elibroftw elibroftw revised this gist Mar 18, 2022. 1 changed file with 25 additions and 0 deletions.
    25 changes: 25 additions & 0 deletions Cargo.toml
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@
    [package]
    name = "app"
    version = "0.1.0"
    description = "A Tauri App"
    authors = ["you"]
    license = ""
    repository = ""
    default-run = "app"
    edition = "2018"
    build = "src/build.rs"

    # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

    [build-dependencies]
    tauri-build = { version = "1.0.0-rc.4", features = [] }

    [dependencies]
    serde_json = "1.0"
    serde = { version = "1.0", features = ["derive"] }
    tauri = { version = "1.0.0-rc.4", features = ["api-all"] }
    toml = "0.5"

    [features]
    default = [ "custom-protocol" ]
    custom-protocol = [ "tauri/custom-protocol" ]
  8. @elibroftw elibroftw revised this gist Mar 18, 2022. 2 changed files with 57 additions and 1 deletion.
    2 changes: 1 addition & 1 deletion App.js
    View file
    Original file line number Diff line number Diff line change
    @@ -118,7 +118,7 @@ function App() {
    <Burger opened={mobileNavOpened} onClick={() => setMobileNavOpened(o => !o)}
    size="sm" color={useMantineTheme().colors.gray[6]} mr="xl" />
    </MediaQuery>
    <Text>R2-T2: Modern T2 Corporate Internet Filing</Text>
    <Text>HEADER TITLE</Text>
    <ActionIcon className={classes.actionIcon} variant="default" onClick={() => toggleColorScheme()} size={30}>{colorScheme === 'dark' ? <SunIcon /> : <MoonIcon />}</ActionIcon>
    </div>
    </Header>
    56 changes: 56 additions & 0 deletions package.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,56 @@
    {
    "name": "APP NAME",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
    "@mantine/core": "^4.0.4",
    "@mantine/hooks": "^4.0.4",
    "@mantine/notifications": "^4.0.4",
    "@modulz/radix-icons": "^4.0.0",
    "@tauri-apps/api": "^1.0.0-rc.2",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "localforage": "^1.10.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "tauri-settings": "^0.1.2",
    "web-vitals": "^2.1.3"
    },
    "scripts": {
    "dev": "tauri dev",
    "rls": "tauri build",
    "start": "react-scripts start",
    "build": "cross-env INLINE_RUNTIME_CHUNK=false yarn react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "wails": "cross-env PORT=34115 BROWSER=none react-scripts start",
    "py": "concurrently \"yarn cross-env BROWSER=none yarn start\" \"python main.py --devpath http://127.0.0.1:3000\""
    },
    "eslintConfig": {
    "extends": [
    "react-app",
    "react-app/jest"
    ]
    },
    "browserslist": {
    "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
    ],
    "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
    ]
    },
    "devDependencies": {
    "@tauri-apps/cli": "^1.0.0-rc.2",
    "concurrently": "^7.0.0",
    "cross-env": "^7.0.3",
    },
    "resolutions": {},
    }
  9. @elibroftw elibroftw created this gist Mar 18, 2022.
    136 changes: 136 additions & 0 deletions App.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,136 @@
    import { AppShell, Navbar, Header, Text, MediaQuery, Burger, ActionIcon, Group } from '@mantine/core';
    import { MantineProvider } from '@mantine/core';
    import { SunIcon, MoonIcon } from '@modulz/radix-icons';
    import { useState, useEffect } from 'react';
    import { createStyles, useMantineTheme } from '@mantine/styles';
    import { MemoryRouter, NavLink, Route, Routes } from "react-router-dom";
    import localforage from 'localforage';

    import { invoke } from '@tauri-apps/api/tauri'

    // import Home from './Home';
    // import Settings from './Settings';
    // import CIFInfo from './CIFInfo';
    // import About from './About';

    function getItem(key, stateSetter, defaultValue) {
    localforage.getItem(key).then(value => stateSetter(value)).catch(_ => {
    stateSetter(defaultValue);
    localforage.setItem(key, defaultValue);
    });
    }

    function App() {
    const defaultColorScheme = 'dark';

    // opened is for mobile nav
    const [mobileNavOpened, setMobileNavOpened] = useState(false);
    const [colorScheme, setColorScheme] = useState(defaultColorScheme);

    // load preferences using localForage
    useEffect(() => getItem('colorScheme', setColorScheme, defaultColorScheme), []);

    const views = [
    // { component: Home, path: '/', exact: true, name: 'Home' },
    // { component: Settings, name: 'Settings' },
    // { component: CIFInfo, name: 'CIF Info' },
    // { component: About, name: 'About' }
    ];

    function toggleColorScheme(value) {
    const newValue = value || (colorScheme === 'dark' ? 'light' : 'dark');
    setColorScheme(newValue);
    localforage.setItem('colorScheme', newValue);
    };

    function demoNotification() {
    new Notification('Title', {
    body: "This is the notification body",
    });
    }

    const useStyles = createStyles(theme => ({
    navLink: {
    display: 'block',
    width: '100%',
    padding: theme.spacing.xs,
    borderRadius: theme.radius.md,
    color: colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
    textDecoration: 'none',
    willChange: 'transform',

    '&:hover:active': {
    transform: 'translateY(2px)',
    },
    },
    navLinkActive: {
    backgroundColor: colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2],
    },
    navLinkInactive: {
    '&:hover': {
    backgroundColor: colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1]
    },
    },
    headerWrapper: {
    display: 'flex',
    alignItems: 'center',
    height: '100%'
    },
    actionIcon: {
    marginLeft: "auto"
    },
    appShell: {
    main: { backgroundColor: colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0] }
    },
    mediaQuery: {
    display: 'none'
    }
    }));

    const onNavLinkClick = e => {
    setMobileNavOpened(false);
    }

    const { classes } = useStyles();

    return (
    <MantineProvider theme={{ colorScheme: colorScheme, fontFamily: 'Open Sans, sans serif' }} withGlobalStyles >
    <MemoryRouter>
    <AppShell padding="md" navbarOffsetBreakpoint="sm" fixed
    navbar={
    <Navbar width={{ sm: 200 }} p="xs" hidden={!mobileNavOpened} hiddenBreakpoint="sm">
    {
    // TODO: https://github.com/greena13/react-hotkeys#hotkeys-components
    views.map((view, index) => {
    return (<NavLink align="left" to={view.path ? view.path : view.name} key={index} onClick={e => onNavLinkClick(e)}
    className={({ isActive }) => classes.navLink + ' ' + (isActive ? classes.navLinkActive : classes.navLinkInactive)}>
    {/* TODO: Icons */}
    <Group><Text>{view.name ? view.name : view.name}</Text></Group>
    </NavLink>)
    })
    }
    </Navbar>
    }
    header={
    <Header height={70} p="md">
    <div className={classes.headerWrapper}>
    <MediaQuery largerThan="sm" styles={{ display: 'none' }}>
    <Burger opened={mobileNavOpened} onClick={() => setMobileNavOpened(o => !o)}
    size="sm" color={useMantineTheme().colors.gray[6]} mr="xl" />
    </MediaQuery>
    <Text>R2-T2: Modern T2 Corporate Internet Filing</Text>
    <ActionIcon className={classes.actionIcon} variant="default" onClick={() => toggleColorScheme()} size={30}>{colorScheme === 'dark' ? <SunIcon /> : <MoonIcon />}</ActionIcon>
    </div>
    </Header>
    }
    className={classes.appShell}>
    <Routes>
    {views.map((view, index) => <Route key={index} exact={view.exact} path={view.path ? view.path : view.name} element={<view.component />} />)}
    </Routes>
    </AppShell>
    </MemoryRouter>
    </MantineProvider>
    );
    }

    export default App;