rabbitmqphp_example/follow_artists.php at master · johnnasseh/rabbitmqphp_example · GitHub

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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<?php
require_once('vendor/autoload.php');
require('nav.php');
use Firebase\JWT\JWT;
use Firebase\JWT\Key;

$env = parse_ini_file('.env');
$jwt_secret = $env['JWT_SECRET'] ?? '';
$username = "";


if ($_SERVER['REQUEST_METHOD'] == 'POST') {
	$token = $_POST['token'] ?? '';
	if (!$token) {
    	http_response_code(401);
    	echo json_encode(["status" => "fail", "message" => "Token not provided"]);
    	exit;
	}

	try {
    	$decoded = JWT::decode($token, new Key($jwt_secret, 'HS256'));
    	$username = $decoded->data->username;
	} catch (Exception $e) {
    	http_response_code(401);
    	echo json_encode(["status" => "fail", "message" => "Invalid or expired token"]);
    	exit;
	}
}
?>

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Follow Artists</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
	<div class="container mt-5">
    	<h1>Follow Artists</h1>
    	<form id="searchForm" class="d-flex mb-3" role="search">
        	<input class="form-control me-2" type="search" id="query" placeholder="Search Artist" aria-label="Search">
        	<button class="btn btn-outline-success" type="submit">Search</button>
    	</form>

    	<div id="results" class="row gy-4"></div>
	</div>

	<script>
    	const token = localStorage.getItem("token");

    	function performSearch(query) {
        	fetch("follow_artists_sender.php", {
            	method: "POST",
            	headers: { "Content-Type": "application/x-www-form-urlencoded" },
            	body: `type=search&query=${encodeURIComponent(query)}&token=${encodeURIComponent(token)}`
        	})
        	.then(response => response.json())
        	.then(data => {
            	if (data.status === "success") {
                	displayResults(data.artists);
            	} else {
                	document.getElementById("results").innerHTML = `<p>Error: ${data.message}</p>`;
            	}
        	})
        	.catch(error => console.error("Error during search:", error));
    	}

    	function displayResults(artists) {
        	const resultsContainer = document.getElementById("results");
        	resultsContainer.innerHTML = "";

        	if (!artists || artists.length === 0) {
            	resultsContainer.innerHTML = "<p>No artists found.</p>";
            	return;
        	}

        	artists.forEach(artist => {
            	const artistCard = `
                	<div class="col-md-4">
                    	<div class="card shadow-sm">
                        	<div class="card-body">
                            	<h5 class="card-title">${artist.name}</h5>
                            	<p class="card-text">${artist.disambiguation || ''}</p>
                            	<button class="btn btn-primary" onclick="followArtist('${artist.id}', '${artist.name}')">Follow</button>
                        	</div>
                    	</div>
                	</div>`;
            	resultsContainer.insertAdjacentHTML("beforeend", artistCard);
        	});
    	}

    	function followArtist(artistId, artistName) {
        	fetch("follow_artists_sender.php", {
            	method: "POST",
            	headers: { "Content-Type": "application/x-www-form-urlencoded" },
            	body: `type=follow&artist_id=${encodeURIComponent(artistId)}&artist_name=${encodeURIComponent(artistName)}&token=${encodeURIComponent(token)}`
        	})
        	.then(response => response.json())
        	.then(data => {
            	if (data.status === "success") {
                	alert("Artist followed successfully!");
            	} else {
                	alert(`Error: ${data.message}`);
            	}
        	})
        	.catch(error => console.error("Error during follow request:", error));
    	}

    	document.getElementById("searchForm").addEventListener("submit", function(e) {
        	e.preventDefault();
        	const query = document.getElementById("query").value;
        	performSearch(query);
    	});
	</script>
</body>
</html>