Building a Shopify App - Day2

#webdev #laravel #shopify

Alright, let's kick off Day 2 of the side project.

Few Thoughts

I have decided to keep it non-embedded app initially. It just makes development easier 🤷🏻‍♂️
Decided not to go with TypeScript for now

Day 2 progress

AppLayout component, including Toast component which displays if there is a flash error returned from backend.

import React, { useState, useEffect } from 'react';
import { usePage } from '@inertiajs/inertia-react';
import { AppProvider, Frame, Toast } from '@shopify/polaris';
import translations from '@shopify/polaris/locales/en.json';

export const AppLayout = ({ children }) => {
    const { flash } = usePage().props;

    const [toastActive, setToastActive] = useState(false);

    useEffect(() => {
        if (flash.message) {
            setToastActive(true);
        }
    }, [flash.message]);

    const toastMarkup = toastActive ? (
        <Toast
            content={flash.message}
            onDismiss={() => setToastActive(false)}
        />
    ) : null;

    return (
        <AppProvider i18n={translations}>
            <Frame>
                {children}
                {toastMarkup}
            </Frame>
        </AppProvider>
    );
};

Dashboard component

import React from 'react';
import { Card, Layout, Page } from '@shopify/polaris';

import { AppLayout } from '@/Shared/Layouts/AppLayout';

export default function Show() {
    return (
        <AppLayout>
            <Page>
                <Layout>
                    <Layout.Section>
                        <Card sectioned>Dashboard</Card>
                    </Layout.Section>
                </Layout>
            </Page>
        </AppLayout>
    );
}

Learned more about HandleInertiaRequests middleware in Inertia.js Laravel adapter. We used to do this inside a ServiceProvider before.
Registered a ScriptTag. Just needed to provide a URL and laravel-shopify package took care of rest
Returned JavaScript from Controller method. Going to write a separate ( short ) article about this. Link