add match function

[tszyuloveyou]

https://github.com/Mensa-Hong-Kong/New-Official-Website/pull/110/files#diff-8459b0aa95c878f3fcec2452a009295922ccd4a2c79d32cf02171c0c1c7ba41c On my project, I using axios to submit form, than I need get the item id on the callback, so, I want to add match function to easly get the id from response.request.responseURL

and than, laravel also has same function on php https://stackoverflow.com/questions/40690202/previous-route-name-in-laravel-5-1-5-8

[tszyuloveyou]

on my project, the changed code is word, now

[bakerkretzmar]

Can you share an example of some code showing how you would use this?

[tszyuloveyou]

Can you share an example of some code showing how you would use this?

sure, I have been updated the readme

I also can demo a sample example

This is my project submit form helper: resources/js/submitForm.js

const token = document.querySelector("meta[name='csrf-token']").getAttribute("content");

function failHandle(error, callback) {
    switch(error.status) {
        case 401:
            alert('Unauthorized, please login first');
            window.location = route('login');
            break;
        case 403:
            alert('Sorry, you have no permission');
            break;
        case 419:
            alert('Cross-site request forgery alert, may be the domain is not mensa.org.hk, or you hold on this page longer than the CSRF token lifetime');
            break;
        case 500:
            alert('Unexpected error, please contact I.T.');
            break;
        case 503:
            alert('Database connect fail, please try again later, or contact I.T.');
            break;
        default:
            if(error.response.data.message) {
                alert(error.response.data.message);
            }
            break;
    }
    callback(error);
}

export function post(action, successCallback, failCallback, method="POST", data = {}) {
    data['_token'] = token;
    if(method.toUpperCase() != 'POST') {
        data['_method'] = method;
    }
    axios.post(action, data).then(function (response) {
        successCallback(response);
    }).catch(function(error) {
        failHandle(error, failCallback)}
    );
}

export function get(action, successCallback, failCallback, parameters = {}) {
    axios.get(action, {params: parameters}).then(function (response) {
        successCallback(response);
    }).catch(function(error) {
        failHandle(error, failCallback)}
    );
}

and than I set resources/js to alias @ I try to use svelte component to demo ajax control candidate status

<script>
import { post } from "@/submitForm";

let submitting = $state(false);

let {candidates: initCandidates} = $props();
const candidates = $state([]);

for (const data of initCandidates) {
    candidates.push(data);
}

function getIndex(id) {
    return candidates.findIndex(
        function(element) {
            return element.id == id;
        }
    );
}

function updatePresentSuccessCallback(response) {
    alert(response.data.success);
    let location = new URL(response.request.responseURL);
    let id = route().match(location.host + location.pathname, 'PUT').params.candidate;
    candidates[getIndex(id)]['is_present'] = response.data.is_present;
    submitting = false;
}

function updatePresentFailCallback(error) {
    if(error.status == 422) {
      alert(error.data.errors.status);
    }
    submitting = false;
}

function updateStatus(id, status) {
    if(! submitting) {
        let submitAt = Date.now();
        submitting = 'updateAction'+submitAt;
        if(submitting == 'updateAction'+submitAt) {
            post(
                route(
                    'admin.tests.candidate.present.update',
                    {
                        test: route().params.test,
                        candidate: id,
                    }
                ),
                updatePresentSuccessCallback,
                updatePresentFailCallback,
                'put',
                {status: status}
            );
        }
    }
}
</script>
<h1>Candidate List</h1>
<table>
    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Is Present</th>
        </tr>
    </thead>
    <tbody>
        {#each candidates as candidate, index{
            <tr>
                <th>{candidate.id}</th>
                <td>{candidate.name}</td>
                <td>
                    <button onclick:{() => updateStatus(candidate.id, ! candidate.is_present)} class={[
                        'btn', {
                            'btn-success' => candidate.is_present,
                            'btn-danger' => ! candidate.is_present,
                        }
                    ]} disabled="{submittibg}">{candidate.is_present ? 'Present' : 'Absent'}</button>
                </td>
            </tr>
        {/each}
    </tbody>
</table>

because too many page need to use ajax, if each page witre one time submit form logic too duplicate, and not each also has id, so, add id params and callback pass id is not good idea, so, I think use route match to get route params may be better.

you also can see my project:

1. https://github.com/Mensa-Hong-Kong/New-Official-Website/pull/110/files#diff-8459b0aa95c878f3fcec2452a009295922ccd4a2c79d32cf02171c0c1c7ba41c this page has OtherPaymentGateway.svelte updateNameSuccessCallback and updateNameFailCallback function using the route().match(......) function
2. https://github.com/Mensa-Hong-Kong/New-Official-Website/pull/111/files#diff-8459b0aa95c878f3fcec2452a009295922ccd4a2c79d32cf02171c0c1c7ba41c this page has OtherPaymentGateway.svelte updateActionSuccessCallback function using the route().match(......) function
3. https://github.com/Mensa-Hong-Kong/New-Official-Website/pull/112/files#diff-8459b0aa95c878f3fcec2452a009295922ccd4a2c79d32cf02171c0c1c7ba41c this page show submit form no id pass to callbace(not for demo using the route().match(......), just show for why cannot on submitForm.js request id param and pass id to callback)