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
Time spent
1 Hour
Signing off 😴
P.S.
I tweet about Laravel, Shopify and React stuff. If any of this is your thing, you can follow me on Twitter.
Top comments (0)