Add link validation to SearchBar component

components/SearchBar.tsx

@@ -1,18 +1,63 @@
 'use client'
 
+import { FormEvent, useState } from 'react'
+
+const isValidAmazonProductUrl = (url: string) => {
+ try {
+ const parsedUrl = new URL(url)
+ const hostname = parsedUrl.hostname
+
+ if (
+ hostname.includes('amazon.com') ||
+ hostname.includes('amazon.') ||
+ hostname.endsWith('amazon.com')
+ ) {
+ return true
+ }
+ } catch (error) {
+ return false
+ }
+ return false
+}
+
 const SearchBar = () => {
- const handleSubmit = () => {}
+ const [searchPrompt, setSearchPrompt] = useState('')
+ const [isLoading, setIsLoading] = useState(false)
+
+ const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+ event.preventDefault()
+
+ const isValidLink = isValidAmazonProductUrl(searchPrompt)
+
+ if (!isValidLink) return alert('Please provide a valid Amazon product link')
+
+ try {
+ setIsLoading(true)
+
+ //scrape the product page
+ } catch (error) {
+ console.error(error)
+ } finally {
+ setIsLoading(false)
+ }
+ }
 
  return (
  <form className="flex flex-wrap gap-4 mt-12" onSubmit={handleSubmit}>
  <input
  type="text"
+ value={searchPrompt}
+ onChange={(e) => setSearchPrompt(e.target.value)}
  placeholder="Enter product link"
  className="searchbar-input"
  />
 
- <button type="submit" className="searchbar-btn">
- Search
+ <button
+ type="submit"
+ className="searchbar-btn"
+ disabled={searchPrompt === ''}
+ >
+ {isLoading ? 'Searching...' : 'Search'}
  </button>
  </form>
  )