lsbyerley/supabaseOnSubmitForm.js

## supabaseOnSubmitForm.js
import Head from 'next/head';
import Layout from '@/components/Layout';
import { useForm } from 'react-hook-form';
import {
  getUser,
  withPageAuth,
  supabaseServerClient,
} from '@supabase/auth-helpers-nextjs';
import { supabase } from '@/lib/supabaseClient';

export const getServerSideProps = withPageAuth({
  redirectTo: '/',
  async getServerSideProps(ctx) {
    // Run queries with RLS on the server
    // TODO: setup RLS https://supabase.com/docs/guides/auth/managing-user-data
    const { user } = await getUser(ctx);
    const { data: profile } = await supabaseServerClient(ctx)
      .from('profiles')
      .select('*')
      .eq('id', user.id)
      .single();

    return { props: { user, profile } };
  },
});

const profile = ({ user, profile }) => {
  const formOptions = {
    defaultValues: {
      name: profile?.name,
    },
  };
  const { register, handleSubmit, reset, formState } = useForm(formOptions);
  const { errors, isDirty, dirtyFields } = formState;

  const onSubmit = (data) => {
    // Do some checks on the data and update profile
    const dataIsGood = true;
    if (dataIsGood) {
      updateProfile(data);
    }
  };

  const updateProfile = async (formValues) => {
    const { data, error } = await supabase
      .from('profiles')
      .update({
        ...formValues,
      })
      .match({ id: user?.id });

    if (error) {
      console.log('LOG: save profile error', error);
      alert('There was an error saving your profile');
      return;
    }

    console.log('LOG: profile updated', data);
    alert('Profile updated!');
  };

  if (!profile) {
    return (
      <p>redirect here</p>
    );
  }

  return (
    <Layout>
      <Head>
        <title>Profile - Bid The Field</title>
      </Head>
      <div className='py-12 mx-auto max-w-7xl sm:px-6 lg:px-8'>
        <div className='max-w-4xl mx-auto'>
          <div className='px-4 py-12 overflow-hidden shadow bg-base-100 sm:rounded-lg sm:px-6 lg:px-8'>
            {/** START FORM */}
            <form
              onSubmit={handleSubmit(onSubmit)}
              className='space-y-8 divide-y divide-gray-200'
            >
              <div className='space-y-8 divide-y divide-gray-200 sm:space-y-5'>
                <div>
                  <div className='mt-6 space-y-6 sm:mt-5 sm:space-y-5'>
                    <div className='sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5'>
                      <label
                        htmlFor='name'
                        className='block text-sm font-medium sm:mt-px sm:pt-2'
                      >
                        Name
                      </label>
                      <div className='mt-1 sm:mt-0 sm:col-span-2'>
                        <input
                          {...register('name')}
                          type='text'
                          name='name'
                          id='name'
                          autoComplete='given-name'
                          className='w-full max-w-lg input input-bordered'
                        />
                      </div>
                    </div>

                  </div>
                </div>
              </div>
              <div className='pt-5'>
                <div className='flex justify-end'>
                  <button
                    type='submit'
                    disabled={!isDirty}
                    className='inline-flex justify-center btn btn-outline btn-info'
                  >
                    Save
                  </button>
                </div>
              </div>
            </form>
            {/** END FORM */}
          </div>
        </div>
      </div>
    </Layout>
  );
};

export default profile;
	import Head from 'next/head';
	import Layout from '@/components/Layout';
	import { useForm } from 'react-hook-form';
	import {
	getUser,
	withPageAuth,
	supabaseServerClient,
	} from '@supabase/auth-helpers-nextjs';
	import { supabase } from '@/lib/supabaseClient';

	export const getServerSideProps = withPageAuth({
	redirectTo: '/',
	async getServerSideProps(ctx) {
	// Run queries with RLS on the server
	// TODO: setup RLS https://supabase.com/docs/guides/auth/managing-user-data
	const { user } = await getUser(ctx);
	const { data: profile } = await supabaseServerClient(ctx)
	.from('profiles')
	.select('*')
	.eq('id', user.id)
	.single();

	return { props: { user, profile } };
	},
	});

	const profile = ({ user, profile }) => {
	const formOptions = {
	defaultValues: {
	name: profile?.name,
	},
	};
	const { register, handleSubmit, reset, formState } = useForm(formOptions);
	const { errors, isDirty, dirtyFields } = formState;

	const onSubmit = (data) => {
	// Do some checks on the data and update profile
	const dataIsGood = true;
	if (dataIsGood) {
	updateProfile(data);
	}
	};

	const updateProfile = async (formValues) => {
	const { data, error } = await supabase
	.from('profiles')
	.update({
	...formValues,
	})
	.match({ id: user?.id });

	if (error) {
	console.log('LOG: save profile error', error);
	alert('There was an error saving your profile');
	return;
	}

	console.log('LOG: profile updated', data);
	alert('Profile updated!');
	};

	if (!profile) {
	return (
	<p>redirect here</p>
	);
	}

	return (
	<Layout>
	<Head>
	<title>Profile - Bid The Field</title>
	</Head>
	<div className='py-12 mx-auto max-w-7xl sm:px-6 lg:px-8'>
	<div className='max-w-4xl mx-auto'>
	<div className='px-4 py-12 overflow-hidden shadow bg-base-100 sm:rounded-lg sm:px-6 lg:px-8'>
	{/** START FORM */}
	<form
	onSubmit={handleSubmit(onSubmit)}
	className='space-y-8 divide-y divide-gray-200'
	>
	<div className='space-y-8 divide-y divide-gray-200 sm:space-y-5'>
	<div>
	<div className='mt-6 space-y-6 sm:mt-5 sm:space-y-5'>
	<div className='sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5'>
	<label
	htmlFor='name'
	className='block text-sm font-medium sm:mt-px sm:pt-2'
	>
	Name
	</label>
	<div className='mt-1 sm:mt-0 sm:col-span-2'>
	<input
	{...register('name')}
	type='text'
	name='name'
	id='name'
	autoComplete='given-name'
	className='w-full max-w-lg input input-bordered'
	/>
	</div>
	</div>

	</div>
	</div>
	</div>
	<div className='pt-5'>
	<div className='flex justify-end'>
	<button
	type='submit'
	disabled={!isDirty}
	className='inline-flex justify-center btn btn-outline btn-info'
	>
	Save
	</button>
	</div>
	</div>
	</form>
	{/** END FORM */}
	</div>
	</div>
	</div>
	</Layout>
	);
	};

	export default profile;