Skip to content

The most advanced CRM Boilerplate for React + AppWrite. Contains snippets for automatic state management in a declarative style

License

Notifications You must be signed in to change notification settings

react-declarative/cra-template-appwrite

Repository files navigation

⚛️ cra-template-appwrite

Contains the most advanced appwrite starter kit which you ever seen!

npm

screenshot

Contribute

Important

Made by using react-declarative to solve your problems. ⭐Star and 💻Fork It on github will be appreciated

Usage

yarn create react-app --template cra-template-appwrite .

or

npx create-react-app . --template=appwrite

What's inside

  1. TypeScript
  2. MUI
  3. Mobx
  4. tss-react
  5. react-declarative
  6. appwrite
  7. local-web-server

Code sample

import { useState } from 'react';
import {
    FetchView,
    RecordView,
    ActionTrigger,
    useReloadTrigger,
    IActionTrigger,
} from 'react-declarative';

import ioc from '../../lib/ioc';

interface ITodoOnePageProps {
    id: string;
}

const actions: IActionTrigger[] = [
    {
        label: 'Mark as complete',
        action: 'complete-action',
    }
];

export const TodoOnePage = ({
    id,
}: ITodoOnePageProps) => {

    const { reloadTrigger, doReload } = useReloadTrigger();
    
    const [search, setSearch] = useState('');

    const state = async () => await ioc.todoDbService.findById(id);

    const handleAction = async (action: string) => {
        if (action === 'complete-action') {
            await ioc.todoDbService.update(id, {
                completed: true,
            });
            doReload();
        }
    };

    return (
        <>
            <ActionTrigger
                actions={actions}
                onAction={handleAction}
            />
            <FetchView state={state} deps={[reloadTrigger]}>
                {(data) => (
                    <RecordView
                        onSearchChanged={(search) => setSearch(search)}
                        search={search}
                        data={data}
                    />
                )}
            </FetchView>
        </>
    );
};

export default TodoOnePage;