How to Build an Admin Functionality in Sharetribe Flex

Sharetribe has a built-in dashboard for triggering particular actions for the marketplace. You can manage all the users, listings, reviews and transactions there. The management includes transitioning particular transactions to next steps, editing data entities and editing your marketplace settings.

What’s missing in all those functionalities is the possibility to trigger actions on the platform or even in a 3rd party tool. For example, if you want to notify the user that the listing they posted was approved by the marketplace operators - you need to do it manually. This can be an inconvenient problem.

To solve the blocker you can easily implement a custom admin dashboard in the app. All you need is the Integration API set and some environment variables configurations. 

1. Create admin user

First, you need to create a user, that we’ll be acting as the admin. All the desired admin actions should be done via his account. After the user creation go to the dashboard (screen from user data entity view in flex console below) and copy the user’s ID. It will be stored in the environment file.

So in this case the ID would be 60781ed8-a89d-470a-b64b-21e30d21f20e. 

2. Create new variable

Go to your .env file and create a new variable. The name can be whatever you want, just remember it should begin with REACT_APP to use it on the browser side. For this example let’s name it REACT_APP_ADMIN_ID. 

REACT_APP_ADMIN_ID=60781ed8-a89d-470a-b64b-21e30d21f20e

After you rebuild the app you should be able to access the variable from the code. 

3. Adjust based on your needs

Now it all depends on what you want to achieve. Let me show you an example of triggering a mail after you approve the listing.

First, you need to create an event that will trigger the listing approval and mail sending.

onApproveListing = () => {

 } 

const approveButton = 

        <SecondaryButton onClick={() => onApproveListing()}>   

        Approve     

  </SecondaryButton>

You need to add a display condition for the button - the user has to be the admin. 

onApproveListing = () => {

} 

const isAdmin = currentUser.id.uuid === process.env.REACT_APP_ADMIN_ID; 


const approveButton = isAdmin    

             && <SecondaryButton onClick={() => onApproveListing()}>   

                   Approve  

  </SecondaryButton>

Now what’s left to do is to call the desired functions in the onApproveListing method.

onApproveListing = () => {

       approveListing(listing.id.uuid)

            .then(() =>       

               triggerListingApprovedMail(listing)   

               )   

               .catch(e =>       

                 console.log(e)   

                 ) 

}


const isAdmin = currentUser.id.uuid === process.env.REACT_APP_ADMIN_ID; 


const approveButton = isAdmin   

           && <SecondaryButton onClick={() => onApproveListing()}>   

                 Approve 

</SecondaryButton>

And that’s it. What’s else to do? Allowing admin to message other users limitless, adding particular types of listings or giving the functionality to export processed data in CSV for more complex marketplaces are just a few of the many possibilities that can be implemented for admin usage.