gatsby new guestbook-app https://github.com/amandeepmittal/gatsby-bulma-quickstart[19659030diplomatedCelanousdonneunbondépartpointetstructureIlprésenteégalementl'avantagesupplémentairedeproposerdesstylesprêtsàl'emploi
 Faisons un peu de nettoyage pour les choses dont nous n'avons pas besoin. Nous allons commencer par simplifier notre  components.header.js 
 importation de React à partir de 'react';

import './style.scss';

const Header = ({siteTitle}) => (
  

    

      

        

          

             Signez notre livre d'or virtuel
          
          

             Si vous aimez tout ce que nous faisons, assurez-vous de signer notre livre d'or virtuel
          
        
      
    
  
);

exporter l'en-tête par défaut;


 Cela supprimera une grande partie du contenu de marque. N'hésitez pas à personnaliser cette section, mais nous n'écrirons aucun de nos codes ici. 
 Ensuite, nous allons nettoyer le fichier  components / midsection.js . C'est là que le code de notre application sera rendu. 

 importez React, {useState} de 'react';
importer des signatures à partir de './signatures';
importer SignForm à partir de './sign-form';


const Midsection = () => {

    const [sigData, setSigData] = useState (data.allSignatures.nodes);
    revenir (
        

            

                

                    
 Signer ici 
                    
                

                

                    
 Afficher les signatures 
                    
                
            
        
    )
}

exporter la section médiane par défaut;


 Dans ce code, nous avons principalement supprimé le contenu "site" et ajouté quelques nouveaux composants. Un   qui contiendra notre formulaire pour soumettre une signature et un composant   pour contenir la liste des signatures. 
 Maintenant que nous avons une liste relativement vierge, nous pouvons configurer notre base de données FaunaDB. 
 Up A FaunaDB Collection 
 Après vous être connecté à Fauna (ou ouvrir un compte), vous aurez la possibilité de créer une nouvelle base de données. Nous allons créer une nouvelle base de données appelée  livre d'or . 

 Dans cette base de données, nous allons créer une "Collection" appelée  signature . Collections dans Fauna un groupe de documents qui sont à leur tour des objets JSON. 
 Dans cette nouvelle collection, nous allons créer un nouveau document avec le JSON suivant: 

 {
 nom: "Bryan Robinson",
 message:
   "Lorem ipsum dolor amet somme Lorem ipsum dolor amet somme Lorem ipsum dolor amet somme Lorem ipsum dolor amet somme"
} 

 Ce sera le schéma de données simple pour chacune de nos signatures. Pour chacun de ces documents, Fauna créera des données supplémentaires autour de lui. 

 {
 "ref": Ref (Collection ("signatures"), "262884172900598291"),
 "ts": 1586964733980000,
 "Les données": {
   "nom": "Bryan Robinson",
   "message": "Lorem ipsum dolor amet somme Lorem ipsum dolor amet somme Lorem ipsum dolor amet somme Lorem ipsum dolor amet somme"
 }
} 

 La référence   est l'identifiant unique à l'intérieur de Fauna et la  ts  est l'heure (en tant qu'horodatage Unix) du document a été créé / mis à jour. 
 Après avoir créé notre données, nous voulons un moyen facile de saisir toutes ces données et de les utiliser dans notre site. Dans Fauna, le moyen le plus efficace pour obtenir des données est via un index. Nous allons créer un index appelé  allSignatures . Cela va récupérer et retourner tous nos documents de signature dans la collection. 
 Maintenant que nous avons un moyen efficace d'accéder aux données dans Gatsby, nous avons besoin de Gatsby pour savoir où les obtenir. 
 Configuration du plug-in de source de données Fauna Gatsby 
 npm install gatsby-source-faunadb 
 Après avoir installé ce plugin sur notre site Web, Gatsby possède un référentiel de plug-ins qui peuvent récupérer des données à partir de diverses sources. projet, nous devons le configurer dans notre fichier  gatsby-config.js . Dans le tableau  plugins  de notre projet, nous allons ajouter un nouvel élément. 

 {
    résoudre: `gatsby-source-faunadb`,
    options: {
    // Le secret de la clé que vous utilisez pour vous connecter à votre base de données Fauna.
    // Vous pouvez en générer sur l'onglet "Sécurité" de votre console Fauna.
        secret: process.env.YOUR_FAUNADB_SECRET,
    // Le nom de l'index que vous souhaitez interroger
    // Vous pouvez créer un index dans l'onglet "Index" de votre console Fauna.
        index: `allSignatures`,
    // C'est le nom sous lequel vos données apparaîtront dans les requêtes Gatsby GraphQL
    // Ce qui suit créera des requêtes appelées `allBird` et` bird`.
        type: "Signatures",
    // Si vous devez limiter le nombre de documents retournés, vous pouvez spécifier un
    // Nombre maximum facultatif à lire.
    // taille: 100
    },
},


 Dans cette configuration, vous lui fournissez votre clé secrète de faune, le nom d'index que nous avons créé et le «type» auquel nous voulons accéder dans notre requête Gatsby GraphQL. 
 Où est-ce que  process.env.YOUR_FAUNADB_SECRET 
 Dans votre projet, créez un fichier  .env  - et incluez ce fichier dans votre .gitignore! Ce fichier donnera à la configuration Webpack de Gatsby la valeur secrète. Cela gardera vos informations sensibles en sécurité et non stockées dans GitHub. 
 YOUR_FAUNADB_SECRET = "valeur de la faune" 
  Nous pouvons ensuite nous diriger vers l'onglet "Sécurité" de notre base de données et créer une nouvelle clé. Comme il s'agit d'un secret protégé, il est sûr d'utiliser un rôle de «serveur». Lorsque vous enregistrez la clé, elle vous fournira votre secret. Assurez-vous de saisir cela maintenant, car vous ne pouvez pas l'obtenir à nouveau (sans recréer la clé).  
 Une fois la configuration établie, nous pouvons écrire une requête GraphQL dans nos composants pour récupérer les données à la construction 
 Obtention des données et création du modèle 
 Nous allons ajouter cette requête à notre composant Midsection pour la rendre accessible à nos deux composants. 
 const Midsection = () => {
 const data = useStaticQuery (
 graphql`
            requête GetSignatures {
                allSignatures {
                  nœuds {
                    Nom
                    message
                    _ts
                    _id
                  }
                }
            } `
        );
// ... reste du composant
} 
 Ceci accède au type  Signatures  que nous avons créé dans la configuration. Il saisira toutes les signatures et fournira un tableau de nœuds. Ces nœuds contiendront les données dont nous avons besoin:  nom  message  ts  id . 
 Nous allons définir ces données dans notre état - cela facilitera leur mise à jour plus tard. 
 const [sigData, setSigData] = useState (data.allSignatures.nodes); 
 Maintenant, nous pouvons passer  sigData  comme accessoire dans   et  setSigData  dans . 
  


  
 Configurons notre composant Signatures pour utiliser ces données! 

 importez React depuis 'react';
importer la signature à partir de './signature'

const Signatures = (props) => {
    const SignatureMarkup = () => {
        return props.sigData.map ((signature, index) => {
            revenir (
                
            )
        }).inverser()
    }

    revenir (
        
    )
}

exporter les signatures par défaut


 Dans cette fonction, nous allons  .map ()  sur nos données de signature et créer un tableau de balisage basé sur un nouveau composant   dans lequel nous transmettons les données. 
 Le  Le composant Signature  gérera le formatage de nos données et le renvoi d'un ensemble approprié de code HTML. 

 importez React de 'react';

const Signature = ({signature}) => {
    const dateObj = nouvelle date (signature._ts / 1000);
    let dateString = `$ {dateObj.toLocaleString ('default', {semaine: 'long'})}, $ {dateObj.toLocaleString ('default', {mois: 'long'})} $ {dateObj.getDate () } à $ {dateObj.toLocaleTimeString ('défaut', {heure: '2 chiffres', minute: '2 chiffres', heure12: faux})} `

    revenir (
    
      
        
 {signature.name} - {dateString} 
        

             {signature.message}
        
    
)};

exporter la signature par défaut;


 À ce stade, si vous démarrez votre serveur de développement Gatsby, vous devriez avoir une liste de signatures existant actuellement dans votre base de données. Exécutez la commande suivante pour être opérationnel: 
 gatsby develop 
 Toute signature stockée dans notre base de données créera du HTML dans ce composant. Mais comment pouvons-nous obtenir des signatures dans notre base de données? 
 Configurons un composant de formulaire de signature pour envoyer des données et mettre à jour notre liste de signatures. 
 Faisons en sorte que notre JAMstack Guestbook soit interactif 
 Premièrement, nous allons configurer la base structure pour notre composant. Il affichera un formulaire simple sur la page avec une entrée de texte, une zone de texte et un bouton pour la soumission. 

 import React from 'react';

import faunadb, {requête as q} from "faunadb"

var client = new faunadb.Client ({secret: process.env.GATSBY_FAUNA_CLIENT_SECRET})

exporter la classe par défaut SignForm étend React.Component {
    constructeur (accessoires) {
        super (accessoires)
        this.state = {
            sigName: "",
            sigMessage: ""
        }
    }

    handleSubmit = async event => {
        // Gérer la soumission
    }

    handleInputChange = event => {
        // Lorsqu'une entrée change, mettez à jour l'état
    }

    render () {
        revenir (
            

                

                    

                  Étiquette
                    
                    
                    
                
                

                    
                         Votre message:
                        

                    
                
                

                     Signer le livre d'or 
                
            
        )
    }

}


 Pour commencer, nous allons configurer notre état pour inclure le nom et le message. Nous les remplacerons par défaut par des chaînes vides et les insérerons dans nos   et . 
 Lorsqu'un utilisateur modifie la valeur de l'un de ces champs, nous utilisons la méthode  handleInputChange . Lorsqu'un utilisateur soumet le formulaire, nous utilisons la méthode  handleSubmit . 
 Décomposons ces deux fonctions. 
 handleInputChange = event => {
 const target = event.target
 const value = target.value
 nom const = target.name
 this.setState ({
            [name]: valeur,
        })
    }

 Le changement d'entrée acceptera l'événement. À partir de cet événement, il obtiendra la valeur et le nom de la cible actuelle. Nous pouvons ensuite modifier l'état des propriétés de notre objet d'état - sigName, sigMessage ou toute autre chose. 
 Une fois que l'état a changé, nous pouvons utiliser l'état dans notre méthode  handleSubmit . 

 handleSubmit = async event => {
        event.preventDefault ();
 const placeSig = attendre this.createSignature (this.state.sigName, this.state.sigMessage);
 this.addSignature (placeSig);
    }


 Cette fonction appellera une nouvelle méthode  createSignature () . Ceci se connectera à Fauna pour créer un nouveau document à partir de nos éléments d'état. 
 La méthode  addSignature ()  mettra à jour nos données de liste de signatures avec la réponse que nous recevons de Fauna. 
 Afin de écrire dans notre base de données, nous devrons configurer une nouvelle clé dans Fauna avec des autorisations minimales. Notre clé de serveur bénéficie d'autorisations plus élevées, car elle n'est utilisée que pendant la génération et ne sera pas visible dans notre source. 
 Cette clé doit uniquement autoriser la possibilité de créer uniquement de nouveaux éléments dans notre collection de signatures  . . 
  Remarque :  Un utilisateur peut toujours être malveillant avec cette clé, mais il ne peut faire autant de dégâts qu'un bot soumettant ce formulaire, c'est donc un compromis que je souhaite à faire pour cette application. 

 Pour cela, nous allons créer un nouveau "Rôle" dans l'onglet "Sécurité" de notre tableau de bord. Nous pouvons ajouter des autorisations sur une ou plusieurs de nos collections. Dans cette démo, nous n'avons besoin que de  signatures  et nous pouvons sélectionner la fonctionnalité "Créer". 
 Après cela, nous générons une nouvelle clé qui utilise ce rôle. 
 Pour utiliser cette clé, nous ' ll instancier une nouvelle version du SDK JavaScript Fauna. Ceci est une dépendance du plugin Gatsby que nous avons installé, nous y avons donc déjà accès. 

 import faunadb, {query as q} from "faunadb"

var client = new faunadb.Client ({secret: process.env.GATSBY_FAUNA_CLIENT_SECRET}) 

 En utilisant une variable d'environnement préfixée par  GATSBY_ nous y avons accès dans notre navigateur JavaScript (assurez-vous d'ajouter dans votre fichier  .env ). 
 En important l'objet  query  depuis le SDK, nous avons accès à toutes les méthodes disponibles dans le langage de requête de Fauna de Fauna ( FQL). Dans ce cas, nous voulons utiliser la méthode Create pour créer un nouveau document sur notre collection. 

 createSignature = async (sigName, sigMessage) => {
 essayez {
 const queryResponse = attendre client.query (
                q.Créer (
                    q.Collection («signatures»),
                    {
                        Les données: {
                            nom: sigName,
                            message: sigMessage
                        }
                    }
                )
            )
 const signatureInfo = {nom: queryResponse.data.name, message: queryResponse.data.message, _ts: queryResponse.ts, _id: queryResponse.id}
 retourner la signatureInfo
        } catch (err) {
            console.log (err);
        }
    } 

 Nous passons la fonction Create à la méthode  client.query () . Créer prend une référence de collection et un objet d'information à transmettre à un nouveau document. Dans ce cas, nous utilisons  q.Collection  et une chaîne du nom de notre collection pour obtenir la référence à la collection. Le deuxième argument concerne nos données. Vous pouvez passer d'autres éléments dans l'objet, nous devons donc dire à Fauna que nous lui envoyons spécifiquement la propriété  data  sur cet objet. 
 Ensuite, nous lui transmettons le nom et le message que nous avons collectés dans notre état. La réponse que nous recevons de Fauna est tout l'objet de notre Document. Cela inclut nos données dans un objet  data ainsi qu'un identifiant de faune et un horodatage. Nous reformatons ces données de manière à ce que notre liste de signatures puisse les utiliser et les renvoyons à notre fonction  handleSubmit . 
 Notre gestionnaire de soumission transmettra ensuite ces données à notre  setSigData  prop qui notifiera notre composant Signatures pour effectuer un nouveau rendu avec ces nouvelles données. Cela permet à notre utilisateur de savoir immédiatement que sa soumission a été acceptée. 
 Reconstruction du site 
 Tout fonctionne dans le navigateur, mais les données n'ont pas encore été mises à jour dans notre application statique. 
 À partir d'ici, nous devons dire à notre hôte JAMstack de reconstruire notre site. Beaucoup ont la possibilité de spécifier un webhook pour déclencher un déploiement. Puisque j'héberge cette démo sur Netlify, je peux créer un nouveau "Déployer le webhook" dans leur administrateur et créer une nouvelle fonction  triggerBuild . Cette fonction utilisera la méthode native JavaScript  fetch ()  et enverra une demande de publication à cette URL. Netlify reconstruira ensuite l'application et récupérera les dernières signatures. 

 triggerBuild = async () => {
 réponse const = attente de récupération (process.env.GATSBY_BUILD_HOOK, {méthode: "POST", corps: "{}"});
 réponse de retour;
    } 

   Gatsby Cloud  et  Netlify  ont mis en œuvre des méthodes de gestion des constructions «incrémentielles» avec Gatsby, ce qui accélère considérablement les temps de construction. Ce type de construction peut se produire très rapidement maintenant et se sentir presque aussi vite qu'un site rendu par un serveur traditionnel.  
  Chaque signature qui est ajoutée obtient un retour rapide à l'utilisateur qu'elle a été soumise, est perpétuellement stockée dans une base de données, et a servi de code HTML via un processus de génération.  
 Vous vous sentez toujours un peu trop comme un site Web typique? Prenons tous ces concepts un peu plus loin. 



                                  

                                


 Créer une application Mindful avec Auth0, Identité de la faune et fonctions définies par l'utilisateur de la faune (UDF) 
 Être attentif est une compétence importante à cultiver. Qu'il s'agisse de penser à vos relations, à votre carrière, à votre famille ou simplement à vous promener dans la nature, il est important d'être attentif aux personnes et aux endroits qui vous entourent. 

 Cette application a pour but de vous aider à vous concentrer sur une idée aléatoire chaque jour et à passer en revue les différentes idées des derniers jours. 
 Pour ce faire, nous devons introduire un élément clé pour la plupart des applications: authentification. Avec l'authentification, vient des problèmes de sécurité supplémentaires. Bien que ces données ne soient pas particulièrement sensibles, vous ne voulez pas qu'un utilisateur accède à l'historique d'un autre utilisateur. 
 Étant donné que nous étendrons les données à un utilisateur spécifique, nous ne voulons pas non plus stocker de secret. clés sur le code du navigateur, car cela ouvrirait d'autres failles de sécurité. 
 Nous pourrions créer un flux d'authentification complet en utilisant rien d'autre que notre intelligence et une base de données utilisateur avec Fauna. Cela peut sembler intimidant et nous éloigne des fonctionnalités que nous voulons écrire. La grande chose est qu'il y a certainement une API pour cela dans JAMstack! Dans cette démo, nous allons explorer l'intégration d'Auth0 avec Fauna. Nous pouvons utiliser l'intégration de plusieurs façons. 
 Configuration d'Auth0 pour se connecter à Fauna 
 De nombreuses implémentations d'authentification avec JAMstack reposent fortement sur des fonctions sans serveur. Cela déplace une grande partie des problèmes de sécurité d'une entreprise axée sur la sécurité comme Auth0 vers le développeur individuel. 

 Le flux typique serait d'envoyer une demande de connexion à une fonction sans serveur. Cette fonction demanderait un utilisateur à Auth0. Auth0 fournirait le jeton Web JSON (JWT) de l'utilisateur et la fonction fournirait toute information supplémentaire sur l'utilisateur dont notre application a besoin. La fonction regrouperait alors tout et l'enverrait au navigateur. 
 Il y a beaucoup d'endroits dans ce flux d'authentification où un développeur pourrait introduire une faille de sécurité. 
 Au lieu de cela, demandons à Auth0 de tout regrouper pour nous à l'intérieur du JWT qu'il envoie. 

 Nous le ferons en utilisant la fonctionnalité de règles d'Auth0 pour demander à Fauna un jeton utilisateur à encoder dans notre JWT. Cela signifie que contrairement à notre livre d'or, nous n'aurons aucune clé Fauna dans notre code frontal. Tout sera géré en mémoire à partir de ce jeton JWT. 
 Configuration de l'application Auth0 et de la règle 
 Tout d'abord, nous devons configurer les bases de notre application Auth0. 
 Après  les étapes de configuration  dans leur procédure pas à pas de base obtient les informations de base importantes remplies. Assurez-vous de remplir le port localhost approprié pour votre fournisseur de choix comme l'un de vos domaines autorisés. 
 Une fois les bases de l'application configurées, nous ' Je vais dans la section "Règles" de notre compte. 
 Cliquez sur "Créer une règle" et sélectionnez "Règle vide" (ou commencez à partir de l'un de leurs nombreux modèles qui sont des points de départ utiles). 
 Voici notre code de règle [19659038] fonction asynchrone (utilisateur, contexte, rappel) {

  const FAUNADB_SECRET = 'Votre secret serveur';

  const faunadb = require ('faunadb@2.11.1 ');

  const {query: q} = faunadb;

  const client = new faunadb.Client ({secret: FAUNADB_SECRET});

  essayez {

    jeton const = attendre client.query (

      q.Call ('user_login_or_create', user.email, user) // Appeler UDF dans la faune

    );

    laissez newClient = new faunadb.Client ({secret: token.secret});
    context.idToken ['https://faunadb.com/id/secret'] = token.secret;

    rappel (null, utilisateur, contexte);

  } catch (erreur) {

    console.log ('->', erreur);

    rappel (erreur, utilisateur, contexte);

  }

}

 Requête (
  Lambda (
    ["userEmail", "userObj"]// Arguments
    Laisser(
      {user: Match (Index ("user_by_email"), Var ("userEmail"))}, // Définir la variable utilisateur
      Si(
        Existe (Var ("utilisateur")), // Vérifier si l'utilisateur existe
        Create (Tokens (null), {instance: Select ("ref", Get (Var ("user")))}), // Renvoie un jeton pour cet élément dans la collection des utilisateurs (en d'autres termes, l'utilisateur)
        Let (// Else: définir une variable
          {
            newUser: Create (Collection ("users"), {data: Var ("userObj")}), // Créez un nouvel utilisateur et obtenez sa référence
            token: Create (Tokens (null), {// Créez un token pour cet utilisateur
              instance: Select ("ref", Var ("newUser"))
            })
          },
          Var ("token") // retourne le token
        )
      )
    )
  )
)

 import create createAuth0Client de '@ auth0 / auth0-spa -js ';
importer {changeToHome} à partir de './layouts/home'; // Disposition de la maison
importer {changeToMission} à partir de './layouts/myMind'; // Présentation actuelle de la mission de pleine conscience

laissez auth0 = null;
var currentUser = null;
const configureClient = async () => {
    // Configure le SDK Auth0
    auth0 = attendre createAuth0Client ({
      domaine: "mindfulness.auth0.com",
      client_id: "32i3ylPhup47PYKUtZGRnLNsGVLks3M6"
    });
};

const checkUser = async () => {
    // retourne les informations utilisateur de n'importe quelle méthode
    const isAuthenticated = attendre auth0.isAuthenticated ();
    if (isAuthenticated) {
        renvoyer attendre auth0.getUser ();
    }
}

const loadAuth = async () => {
    // Charge et vérifie l'auth
    attendre configureClient ();
    
    const isAuthenticated = attendre auth0.isAuthenticated ();
    if (isAuthenticated) {
        // affiche le contenu fermé
        currentUser = attendre auth0.getUser ();
        changeToMission (); // Afficher l'écran "Aujourd'hui"
        revenir;
    } autre {
        changeToHome (); // Afficher la "page d'accueil" déconnectée
    }

    const query = window.location.search;
    if (query.includes ("code =") && query.includes ("state =")) {

        // Traite l'état de connexion
        attendre auth0.handleRedirectCallback ();
       
        currentUser = attendre auth0.getUser ();
        changeToMission ();

        // Utilisez replaceState pour rediriger l'utilisateur et supprimer les paramètres de chaîne de requête
        window.history.replaceState ({}, document.title, "/");
    }
}

const login = async () => {
    attendre auth0.loginWithRedirect ({
        redirect_uri: window.location.origin
    });
}
const logout = async () => {
    auth0.logout ({
        returnTo: window.location.origin
    });
    window.localStorage.removeItem ('currentMindfulItem')
    changeToHome (); // Retour à l'état déconnecté
}

export {auth0, loadAuth, currentUser, checkUser, login, logout}

 const AUTH_PROP_KEY = "https://faunad.com/id/secret ";
var faunadb = require ('faunadb'),
q = faunadb.query;

fonction asynchrone getUserClient (currentUser) {
    renvoie un nouveau faunadb.Client ({secret: currentUser [AUTH_PROP_KEY]})
}

 {
   "title": "Carrière",
   "description": "Pensez aux prochaines étapes que vous voulez faire dans votre carrière. Quelle est la prochaine étape facilement réalisable que vous pouvez faire?",
   "color": "# C6D4FF",
   "textColor": "noir"
 } 

 fonction async getRandomMindfulFromFauna (userObj) {
    client const = attendre getUserClient (userObj);

    essayez {
        laissez mindfulThings = attendre client.query (
            p. paginer (
                q.Documents (q.Collection ('mindful_things'))
            )
        )
        laissez randomMindful = mindfulThings.data [Math.floor(Math.random()*mindfulThings.data.length)];
        laisser création = attendre client.query (q.Call ('addUserMindful', randomMindful));
        
        return creation.data.mindful;

    } catch (erreur) {
        console.log (erreur)
    }
}

Query(
  Lambda(
    [],
    If( // Check if there is at least 1 in the index
      GT(
        Count(
          Select(
            "data",
            Paginate(Match(Index("getMindfulByUserReverse"), Identity()))
          )
        ),
        0
      ),
      Let( // if more than 0
        {
          match: Paginate(
            Match(Index("getMindfulByUserReverse"), Identity()) // Search the index by our User
          ),
          latestObj: Take(1, Var("match")), // Grab the first item from our match
          latestRef: Select(
            ["data"],
            Get(Select(["data", 0, 1]Var("latestObj"))) // Get the data object from the item
          ),
          latestTime: Select(["data", 0, 0]Var("latestObj")), // Get the time
          merged: Merge( // merge those items into one object to return
            { latestTime: Var("latestTime") },
            { latestMindful: Var("latestRef") }
          )
        },
        Var("merged")
      ),
      Let({ error: { err: "No data" } }, Var("error")) // if there aren't any, return an error.
    )
  )
)

Query(
  Lambda(
    ["count"]// Number of items to return
    If( // Check if there are any objects
      GT( 
        Count(
          Select(
            "data",
            Paginate(Match(Index("getMindfulByUserReverse"), Identity(null)))
          )
        ),
        0
      ),
      Let(
        {
          match: Paginate(
            Match(Index("getMindfulByUserReverse"), Identity(null)) // Search the Index by our User
          ),
          latestObjs: Select("data", Take(Var("count"), Var("match"))), // Get the data that is returned
          mergedObjs: Map( // Loop over the objects
            Var("latestObjs"),
            Lambda(
              "latestArray",
              Let( // Build the data like we did in the LatestMindful function
                {
                  ref: Select(["data"]Get(Select([1]Var("latestArray")))),
                  latestTime: Select(0, Var("latestArray")),
                  merged: Merge(
                    { latestTime: Var("latestTime") },
                    Select("mindful", Var("ref"))
                  )
                },
                Var("merged") // Return this to our new array
              )
            )
          )
        },
        Var("mergedObjs") // return the full array
      ),
      { latestMindful: [{ title: "No additional data" }] } // if there are no items, send back a message to display
    )
  )
)