The VibeBP framework uses Bulma for its internal styling so we recommend re-using Bulma components to keep your CSS and scripts size to a minimum
Here's a sample extenstion which you can use to develop your custom features in the WPLMS / VibeBP framework.
Now, install this plugin and activate the addon.
2. Refresh BuddyPress navigation from WP admin - Vibebp - Settings - BuddyPress
​
Now you can start building the extension.
1.. open the Vibe boilerplate plugin folder in the terminal or vscode
2. Now move to folder assets/boilerplate , if you open package.json there are 2 commands.
3. To initialise the react project, run
Initialise : npm install
3. Start development mode.
Development mode : npm run dev
understanding projkect strucutre
A sample API call looks like :
const APICall = () =>{setisLoading(true);//Args is arguments from state//Your endpoint as defined in the class.api.phpfetch(`${window.vibeboilerplate.api.url}/ENDPOINT`, {method: 'post',body: JSON.stringify({ ...args , token: select('vibebp').getToken() })}).then((res) => res.json()).then((data) => {setisLoading(false);if (data.status) {//Do struff}}})}
The handler in includes/class.api.php
the rest API init we define the API call
private function __construct(){​add_action('rest_api_init',array($this,'register_api_endpoints'));}​​function register_api_endpoints(){​register_rest_route( VIBE_BOILERPLATE_API_NAMESPACE, '/endpoint', array(array('methods' => 'POST','callback' => array( $this, 'get_endpoint' ),'permission_callback' => array( $this, 'user_permissions_check' ),),));}​
and its handler.
function get_endpoint(){​$request = json_decode($request->get_body(),true);//do all the processing here, $this->user is the user object$return = array('status'=>1,'user'=>$this->user);return new WP_REST_Response($return, 200);}
the permissions to validate the request is handled by VibeBP as this logged in area. It will also initialise a class object and assign the user value in the form as described below :
function user_permissions_check($request){$body = json_decode($request->get_body(),true);​if(!empty($body['token'])){global $wpdb;//This filter expands the token and captures the user_id​$this->user = apply_filters('vibebp_api_get_user_from_token','',$body['token']);​/*$this->user = array('id' => $user->data->ID,'username'=>$user->data->user_login,'slug'=>$user->data->user_nicename,'email'=>$user->data->user_email,'avatar'=> (function_exists('bp_core_fetch_avatar')?bp_core_fetch_avatar(array('item_id' => $user->data->ID,'object' => 'user','type'=>'full','html' => false)):get_avatar($user->data->user_email,240)),'displayname'=>$user->data->display_name,'roles'=> $user->roles,'caps'=> apply_filters('vibebp_user_caps',$user->allcaps),'profile_link'=>vibebp_get_profile_link($user->data->user_nicename)),*/if(!empty($this->user)){return true;}}​return false;}
so the subsequent functions in a successful REST API call have the object $this->user as the validated user object passed from Vibebp to API call.