1const peepsQuery = useQuery(["peeps"], allPeeps);

1 peepQuery.data?.map((item)=>{
2  return <TheRows list={peepsQuery.data} />
3 })
4 

1 const mutation = useMutation(
2({ data, index }: MutationVars) => {
3    return client.records.create(index, data);
4},
5// react-query options , in order to append new peeps by using the data returned after the mutation instaed of having to run the query again to update our list of peeps
6// the index will be the react-query index and also the sdk client index
7{
8//print error if mutation fails
9        onError: (err, { data: newData, index }, context) => {
10           console.log("error saving the item === ", err)
11        },
12        //update the list with created record  
13        onSuccess: (data, { index }) => {
14            console.log("vars === ", data, index)
15            queryClient.setQueryData(index, (old: any) => {
16                old.unshift(data);
17                return old;
18            });
19            console.log("successfull save of item ", data);
20        },
21
22    }
23);
24

1const createPeep = async (data: any) => {
2        mutation.mutate({ data, index: "peeps" })
3};

1export const realTime = async (
2  index: [string],
3  queryClient: QueryClient,
4 ) => {
5  // sdk realtime listener 
6  return await client.realtime.subscribe("peeps", function (e) {
7    console.log("real time peeps", e.record);
8      appendToCache(index,queryClient,e.record);
9
10  });
11};

1export const appendToCache=async(index:[string],queryClient:QueryClient,newData:any)=>{
2 queryClient.setQueryData(index, (old:any) => {
3  old.unshift(newData)
4  return old
5 });
6}

1const queryClient = new QueryClient()

1const queryClient = usQueryClient()

1import React from 'react'
2import { TheButton } from '../Shared/TheButton';
3import { client, providers } from './../../pocket/config';
4
5
6interface LoginProps {
7
8}
9
10export const Login: React.FC<LoginProps> = ({}) => {
11let provs = providers.authProviders
12    let redirectUrl = 'http://localhost:3000/redirect'
13
14const startLogin = (prov:any)=>{
15localStorage.setItem("provider", JSON.stringify(prov));
16    const url = provs[0].authUrl + redirectUrl
17    if (typeof window !== 'undefined') {
18        window.location.href = url;
19    }
20}
21
22
23
24
25return (
26 <div className='w-full h-full flex-col-center'>
27        <div className='text-3xl font-bold '>LOGIN</div>
28        {
29           provs&&provs?.map((item,index)=>{
30            return (
31                <TheButton
32                key={item.name}
33                label={item.name}
34                border={'1px solid'}
35                padding={'2%'}
36                textSize={'1.2 rem'}
37                onClick={()=>startLogin(item)}
38                />
39            )
40        })
41        }
42 </div>
43);
44}
45

1import React from 'react'
2import { useSearchParams,useNavigate,Navigate } from 'react-router-dom';
3import { client } from './../../pocket/config';
4import { useQueryClient } from 'react-query';
5import { UserType } from './types';
6
7
8interface RedirectProps {
9user?: UserType | null
10}
11
12export const Redirect: React.FC<RedirectProps> = ({ user }) => {
13    //@ts-ignore
14    const local_prov = JSON.parse(localStorage.getItem('provider'))
15    const [searchParams] = useSearchParams();
16    const code = searchParams.get('code') as string
17    // compare the redirect's state param and the stored provider's one
18    const queryClient= useQueryClient()
19   let redirectUrl = 'http://localhost:3000/redirect'
20    const [loading,setLoading]= React.useState(true)
21   if (local_prov.state !== searchParams.get("state")) {
22        let url = 'http://localhost:3000/login'
23        if (typeof window !== 'undefined') {
24            window.location.href = url;
25        }
26    } else {
27        client.users.authViaOAuth2(
28            local_prov.name,
29            code,
30            local_prov.codeVerifier,
31            redirectUrl)
32            .then((response) => {
33              console.log("authentication data === ", response)
34             client.records.update('profiles', response.user.profile?.id as string, {
35                    name:response.meta.name,
36                    avatarUrl:response.meta.avatarUrl
37                }).then((res)=>{
38                    console.log(" successfully updated profi;e",res)
39                    }).catch((e) => {
40                    console.log("error updating profile  == ", e)
41                })
42                setLoading(false)
43                console.log("client modal after logg   == ",client.authStore.model)
44                queryClient.setQueryData(['user'], client.authStore.model)
45         
46            }).catch((e) => {
47                console.log("error logging in with provider  == ", e)
48            })
49    }
50    if(user){
51        return <Navigate to="/" replace />;
52    }
53
54    return (
55        <div>
56            {
57                loading?(
58                    <div className='w-full h-full flex-center'>loading .... </div>) : 
59                    (
60                        <div className='w-full h-full flex-center'>success</div>
61                    
62                    )}
63        </div>
64    );
65}
66
67
68
69
70

1import './App.css'
2import { useTheme } from './utils/hooks/themeHook'
3import { BsSunFill, BsFillMoonFill } from "react-icons/bs";;
4import { TheIcon } from './components/Shared/TheIcon';
5
6import { Query, useQuery } from 'react-query';
7import { BrowserRouter, Routes, Route } from 'react-router-dom';
8import { Home } from './components/home/Home';
9import { Redirect } from './components/login/Redirect';
10import { Login } from './components/login/Login';
11import { useEffect, useInsertionEffect } from 'react';
12import { client } from './pocket/config';
13import { ProtectedRoute } from './components/login/PrivateRoutes';
14import { UserType } from './components/login/types';
15
16
17type AppProps = {
18  // queryClient:QueryClient
19};
20type MutationVars = {
21  data: any;
22  index: string;
23}
24export interface FormOptions {
25  field_name: string;
26  field_type: string;
27  default_value: string | number
28  options?: { name: string; value: string }[]
29}
30function App({ }: AppProps) {
31  const { colorTheme, setTheme } = useTheme();
32 const mode = colorTheme === "light" ? BsSunFill : BsFillMoonFill;
33  const toggle = () => {
34    setTheme(colorTheme);
35  };
36
37  const getUser = async()=>{
38    return client.authStore.model
39  }
40
41
42
43
44  const userQuery = useQuery(["user"],getUser); 
45
46   console.log("user query ======  ",userQuery)
47  
48
49if(userQuery.isLoading){
50  return(
51    <div className="w-full min-h-screen text-5xl font-bold flex-col-center">
52     LOADING....
53    </div>
54  )
55}
56  if (userQuery.isError) {
57    return (
58      <div className="w-full min-h-screen text-5xl font-bold flex-col-center">
59        {/* @ts-ignore */}
60        {userQuery?.error?.message}
61      </div>
62    )
63  }
64const user = userQuery.data as UserType|null|undefined
65  return (
66    <div
67      className="w-full min-h-screen  flex-col-center scroll-bar
68   dark:bg-black dark:text-white "
69    >
70
71      <BrowserRouter>
72        <div className="fixed top-[0px] w-[100%] z-50">
73          <div className="w-fit p-1  flex-center">
74            <TheIcon Icon={mode} size={"25"} color={""} iconAction={toggle} />
75          </div>
76        </div>
77        <div className="w-full h-[90%] mt-16  ">
78          <Routes>
79            <Route
80              path="/"
81              element={
82                <ProtectedRoute user={user}> 
83                  <Home user={user} />
84                  </ProtectedRoute>
85           }
86            />
87            {/* @ts-ignore */}
88            <Route path="/login" element={<Login />} />
89            
90            <Route path="/redirect" element={<Redirect  user={user}/>} />
91
92          </Routes>
93        </div>
94      </BrowserRouter>
95
96    </div>
97  );
98}
99
100export default App