1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
import React, { useState, useEffect, useCallback } from 'react';
import axios from 'axios';
function Influencers({ adminPassword }) {
const [profiles, setProfiles] = useState([]);
const [newProfile, setNewProfile] = useState('');
const fetchProfiles = useCallback(async () => {
try {
const response = await axios.get('http://localhost:5001/profiles', {
headers: { Authorization: `Bearer ${adminPassword}` }
});
console.log('Fetched profiles:', response.data);
setProfiles(response.data);
} catch (error) {
console.error('Error fetching profiles:', error);
}
}, [adminPassword]);
useEffect(() => {
fetchProfiles();
}, [fetchProfiles]);
const addProfile = async () => {
try {
await axios.post(
'http://localhost:5001/profiles',
{ username: newProfile },
{ headers: { Authorization: `Bearer ${adminPassword}` } }
);
setNewProfile('');
fetchProfiles();
} catch (error) {
console.error('Error adding profile:', error);
}
};
const handleJsonUpload = async (event) => {
const file = event.target.files[0];
if (file) {
const formData = new FormData();
formData.append('file', file);
try {
await axios.post('http://localhost:5001/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data',
Authorization: `Bearer ${adminPassword}`
}
});
fetchProfiles();
} catch (error) {
console.error('Error uploading JSON file:', error);
}
}
};
const exportJson = async () => {
try {
const response = await axios.get('http://localhost:5001/export', {
headers: { Authorization: `Bearer ${adminPassword}` },
responseType: 'blob'
});
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'influencers.json');
document.body.appendChild(link);
link.click();
} catch (error) {
console.error('Error exporting JSON file:', error);
}
};
return (
<div>
<h2>Add Influencers</h2>
<input
type="text"
value={newProfile}
onChange={(e) => setNewProfile(e.target.value)}
placeholder="Enter Instagram username"
/>
<button onClick={addProfile}>Add</button>
<h3>Current Influencers</h3>
<ul>
{profiles.map((profile, index) => (
<li key={index}>{profile}</li>
))}
</ul>
<h3>Import/Export Influencers</h3>
<input
type="file"
accept="application/json"
onChange={handleJsonUpload}
/>
<button onClick={exportJson}>Export JSON</button>
</div>
);
}
export default Influencers;
|
