# Axios API Calls

### How does it work?

Axios has been configured in the folder `src\utils\axios.ts`

To use Axios on a page, you need to import it and make a call. After that, you need to make calls to Axios using **axios.get('path')** or **axios.post('path')** see below implementation.

#### axios.ts

{% code title="axios.ts" %}

```typescript
import { defineStore } from 'pinia'; // import pinia
import axios from '@/utils/axios'; // import axios

export const useContactStore = defineStore('contact', {
  state: (): contactType => ({
    contact: [],
    selectedContact: 0
  }),
  getters: {},
  actions: {
    // Fetch contacts
    async fetchContacts() {
      try {
        const data = await axios.get('/api/contact/list');
        this.contact = data.data;
      } catch (error) {
        alert(error);
      }
    },
    // Fetch contacts
    async editContacts(contact: UserProfile) {
      try {
        const response = await axios.post('/api/contact/modify', contact);
        this.contact = response.data;
      } catch (error) {
        alert(error);
      }
    },
    // Fetch contacts
    async addContacts(contact: UserProfile) {
      try {
        const response = await axios.post('/api/contact/add', contact);
        this.contact = response.data;
      } catch (error) {
        alert(error);
      }
    },

    //select chat
    SelectContact(itemID: number) {
      this.selectedContact = itemID - 1;
    }
  }
});
```

{% endcode %}

Berry has all dummy data in a folder `src\_mockApis.` For API, **api/contact/list**, the following data is configured in `..\src\_mockApis\contact\index.ts`

```typescript
import mock from '../mockAdapter';

...

const contacts = [
  {
    id: 1,
    name: 'Alene',
    company: 'ABC Pvt Ltd',
    role: 'Sr. Customer Manager',
    work_email: 'alene_work@company.com',
    personal_email: 'alene@company.com',
    work_phone: '380-293-0177',
    personal_phone: '380-293-0177',
    location: 'Port Narcos',
    avatar: user1,
    status: 'Technical Department',
    lastMessage: '2h ago',
    birthdayText: 'happy Birthday Alene',
    unReadChatCount: 2,
    online_status: 'available'
  },
  {
    id: 2,
    name: 'Keefe',
    company: 'ABC Pvt Ltd',
    role: 'Dynamic Operations Officer',
    work_email: 'keefe_work@gmil.com',
    personal_email: 'keefe@gmil.com',
    work_phone: '253-418-5940',
    personal_phone: '253-418-5940',
    location: 'Afghanistan',
    avatar: user2,
    status: 'Support Executive',
    lastMessage: '1:20 AM',
    birthdayText: 'happy Birthday Keefe',
    unReadChatCount: 3,
    online_status: 'available'
  },
    ...
    ...
];
...
...
];
mock.onGet('/api/contact/list').reply(() => {
...
...
});

export default contacts;
```

{% hint style="info" %}
You can configure the same for post methods as well.
{% endhint %}