From 0b28624686c0f7ae8e6c0c986c109db998584f94 Mon Sep 17 00:00:00 2001
From: Alex <alex@gogl.io>
Date: Tue, 11 Oct 2022 12:18:35 +0200
Subject: [PATCH] update readme examples

update readme examples to be more in line with new remix versions
---
 README.md | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index 25dfaa4..67f00e8 100644
--- a/README.md
+++ b/README.md
@@ -39,22 +39,22 @@ To begin we will set up dynamic routes, that can handle each social on the fly
 
 ```tsx
 // app/routes/auth/$provider.tsx
-import { ActionFunction, LoaderFunction, redirect } from 'remix';
+import { ActionArgs, redirect } from "@remix-run/node"
 import { authenticator } from '~/server/auth.server';
 
-export let loader: LoaderFunction = () => redirect('/login');
+export let loader = () => redirect('/login');
 
-export let action: ActionFunction = ({ request, params }) => {
+export let action = ({ request, params }: ActionArgs) => {
   return authenticator.authenticate(params.provider, request);
 };
 ```
 
 ```tsx
 // app/routes/auth/$provider.callback.tsx
-import { ActionFunction, LoaderFunction } from 'remix';
+import { LoaderArgs } from "@remix-run/node"
 import { authenticator } from '~/server/auth.server';
 
-export let loader: LoaderFunction = ({ request, params }) => {
+export let loader = ({ request, params }: LoaderArgs) => {
   return authenticator.authenticate(params.provider, request, {
     successRedirect: '/dashboard',
     failureRedirect: '/login',
@@ -66,7 +66,7 @@ Now you are free to include social buttons on the login page however you like
 
 ```tsx
 // app/routes/login.tsx
-import { Form } from 'remix';
+import { Form } from "@remix-run/react"
 import { SocialsProvider } from 'remix-auth-socials';
 
 interface SocialButtonProps {
@@ -97,10 +97,10 @@ You will also need a logout route
 
 ```ts
 // app/routes/logout.tsx
-import { ActionFunction } from "remix";
+import { ActionArgs } from "@remix-run/node"
 import { authenticator } from "~/server/auth.server";
 
-export let action: ActionFunction = async ({ request, params }) => {
+export let action = async ({ request, params }: ActionArgs) => {
   await authenticator.logout(request, { redirectTo: "/" });
 };
 ```
@@ -149,10 +149,11 @@ Here's an example of a protected route
 
 ```tsx
 // app/routes/dashboard.tsx
-import { useLoaderData, Form, LoaderFunction } from "remix";
+import { useLoaderData, Form } from "@remix-run/react";
+import { LoaderArgs } from "@remix-run/node"
 import { authenticator } from "~/server/auth.server";
 
-export let loader: LoaderFunction = async ({ request, params }) => {
+export let loader = async ({ request, params }: LoaderArgs) => {
   const user = await authenticator.isAuthenticated(request, {
     failureRedirect: "/",
   });
@@ -179,10 +180,11 @@ You might also want your index route to redirect to the dashboard for logged in
 
 ```tsx
 // app/routes/index.tsx
-import { useLoaderData, LoaderFunction } from "remix";
+import { useLoaderData } from "@remix-run/react";
+import { LoaderArgs } from "@remix-run/node"
 import { authenticator } from "~/server/auth.server";
 
-export let loader: LoaderFunction = async ({ request, params }) => {
+export let loader = async ({ request, params }: LoaderArgs) => {
   const user = await authenticator.isAuthenticated(request, {
     successRedirect: "/dashboard",
   });
@@ -199,4 +201,4 @@ export default function Index() {
 }
 ```
 
-TODO: Create readme doc for each strategy to show options and link here
\ No newline at end of file
+TODO: Create readme doc for each strategy to show options and link here