shpaq/sct-overseerr
1
0
Fork 0
mirror of https://github.com/sct/overseerr.git synced 2025-09-17 17:24:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(frontend): initial search functionality (#78)

Browse Source
This commit is contained in:
sct
2020-09-12 10:49:48 +09:00
committed by GitHub
parent 3722a495dd
commit 342d1a3c75
14 changed files with 450 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/Layout/SearchInput/index.tsx Normal file
View File

@@ -0,0 +1,38 @@
import React from 'react';
import useSearchInput from '../../../hooks/useSearchInput';
const SearchInput: React.FC = () => {
const { searchValue, setSearchValue, setIsOpen } = useSearchInput();
return (
<div className="flex-1 flex">
<form className="w-full flex md:ml-0" action="#" method="GET">
<label htmlFor="search_field" className="sr-only">
Search
</label>
<div className="relative w-full text-white focus-within:text-gray-200">
<div className="absolute inset-y-0 left-0 flex items-center pointer-events-none">
<svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
/>
</svg>
</div>
<input
id="search_field"
className="block w-full h-full pl-8 pr-3 py-2 rounded-md bg-cool-gray-600 text-white placeholder-gray-300 focus:outline-none focus:placeholder-gray-400 sm:text-sm"
placeholder="Search"
type="search"
value={searchValue}
onChange={(e) => setSearchValue(e.target.value)}
onFocus={() => setIsOpen(true)}
onBlur={() => setIsOpen(false)}
/>
</div>
</form>
</div>
);
};
export default SearchInput;

79
src/components/Layout/Sidebar/index.tsx
View File

@@ -1,5 +1,6 @@
import React from 'react';
import Transition from '../../Transition';
import Link from 'next/link';
interface SidebarProps {
open?: boolean;
@@ -62,26 +63,25 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
</span>
</div>
<nav className="mt-5 px-2 space-y-1">
<a
href="#"
className="group flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md text-white bg-gray-900 focus:outline-none focus:bg-gray-700 transition ease-in-out duration-150"
>
<svg
className="mr-3 h-6 w-6 text-gray-300 group-hover:text-gray-300 group-focus:text-gray-300 transition ease-in-out duration-150"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"
/>
</svg>
Dashboard
</a>
<Link href="/">
<a className="group flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md text-white bg-gray-900 focus:outline-none focus:bg-gray-700 transition ease-in-out duration-150">
<svg
className="mr-3 h-6 w-6 text-gray-300 group-hover:text-gray-300 group-focus:text-gray-300 transition ease-in-out duration-150"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"
/>
</svg>
Dashboard
</a>
</Link>
</nav>
</div>
</div>
@@ -102,26 +102,25 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
<span className="text-2xl text-cool-gray-50">Overseerr</span>
</div>
<nav className="mt-5 flex-1 px-2 bg-gray-800 space-y-1">
<a
href="#"
className="group flex items-center px-2 py-2 text-sm leading-5 font-medium text-white rounded-md bg-gray-900 focus:outline-none focus:bg-gray-700 transition ease-in-out duration-150"
>
<svg
className="mr-3 h-6 w-6 text-gray-300 group-hover:text-gray-300 group-focus:text-gray-300 transition ease-in-out duration-150"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"
/>
</svg>
Dashboard
</a>
<Link href="/">
<a className="group flex items-center px-2 py-2 text-sm leading-5 font-medium text-white rounded-md bg-gray-900 focus:outline-none focus:bg-gray-700 transition ease-in-out duration-150">
<svg
className="mr-3 h-6 w-6 text-gray-300 group-hover:text-gray-300 group-focus:text-gray-300 transition ease-in-out duration-150"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"
/>
</svg>
Dashboard
</a>
</Link>
</nav>
</div>
</div>

10
src/components/Layout/UserDropdown/index.tsx
View File

@@ -1,11 +1,14 @@
import React, { useState } from 'react';
import React, { useState, useRef } from 'react';
import Transition from '../../Transition';
import { useUser } from '../../../hooks/useUser';
import axios from 'axios';
import useClickOutside from '../../../hooks/useClickOutside';
const UserDropdown: React.FC = () => {
const dropdownRef = useRef<HTMLDivElement>(null);
const { user, revalidate } = useUser();
const [isDropdownOpen, setDropdownOpen] = useState(false);
useClickOutside(dropdownRef, () => setDropdownOpen(false));
const logout = async () => {
const response = await axios.get('/api/v1/auth/logout');
@@ -37,7 +40,10 @@ const UserDropdown: React.FC = () => {
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<div className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg">
<div
className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg"
ref={dropdownRef}
>
<div
className="py-1 rounded-md bg-white shadow-xs"
role="menu"

4
src/components/Layout/index.tsx
View File

@@ -1,5 +1,5 @@
import React, { useState } from 'react';
import Search from '../Search';
import SearchInput from './SearchInput';
import UserDropdown from './UserDropdown';
import Sidebar from './Sidebar';
import Notifications from './Notifications';
@@ -33,7 +33,7 @@ const Layout: React.FC = ({ children }) => {
</svg>
</button>
<div className="flex-1 px-4 flex justify-between">
<Search />
<SearchInput />
<div className="ml-4 flex items-center md:ml-6">
<Notifications />
<UserDropdown />