feat(frontend): buttonWithDropdown component added (no hookups yet)

src/components/Common/ButtonWithDropdown/index.tsx

@@ -0,0 +1,99 @@
+import React, {
+  useState,
+  useRef,
+  AnchorHTMLAttributes,
+  ReactNode,
+  ButtonHTMLAttributes,
+} from 'react';
+import useClickOutside from '../../../hooks/useClickOutside';
+import Transition from '../../Transition';
+import { withProperties } from '../../../utils/typeHelpers';
+
+const DropdownItem: React.FC<AnchorHTMLAttributes<HTMLAnchorElement>> = ({
+  children,
+  ...props
+}) => (
+  <a
+    className="cursor-pointer flex items-center px-4 py-2 text-sm leading-5 text-white bg-indigo-600 hover:bg-indigo-500 hover:text-white focus:outline-none focus:border-indigo-700 focus:text-white"
+    {...props}
+  >
+    {children}
+  </a>
+);
+
+interface ButtonWithDropdownProps
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  text: ReactNode;
+  dropdownIcon?: ReactNode;
+}
+
+const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
+  text,
+  children,
+  dropdownIcon,
+  ...props
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const buttonRef = useRef<HTMLSpanElement>(null);
+  useClickOutside(buttonRef, () => setIsOpen(false));
+
+  return (
+    <span
+      className="relative z-0 inline-flex shadow-sm rounded-md"
+      ref={buttonRef}
+    >
+      <button
+        type="button"
+        className={`relative inline-flex items-center px-4 py-2 text-white bg-indigo-600 hover:bg-indigo-500 text-sm leading-5 font-medium hover:text-white focus:shadow-outline-indigo active:bg-indigo-700 focus:z-10 focus:outline-none focus:shadow-outline-blue transition ease-in-out duration-150 ${
+          children ? 'rounded-l-md' : 'rounded-md'
+        }`}
+        {...props}
+      >
+        {text}
+      </button>
+      <span className="-ml-px relative block">
+        {children && (
+          <button
+            type="button"
+            className="relative inline-flex items-center px-2 py-2 rounded-r-md bg-indigo-700 hover:bg-indigo-500 text-sm leading-5 font-medium text-white focus:z-10 focus:outline-none active:bg-indigo-700 border border-indigo-600 focus:shadow-outline-blue transition ease-in-out duration-150"
+            aria-label="Expand"
+            onClick={() => setIsOpen((state) => !state)}
+          >
+            {dropdownIcon ? (
+              dropdownIcon
+            ) : (
+              <svg
+                className="h-5 w-5"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            )}
+          </button>
+        )}
+        <Transition
+          show={isOpen}
+          enter="transition ease-out duration-100"
+          enterFrom="transform opacity-0 scale-95"
+          enterTo="transform opacity-100 scale-100"
+          leave="transition ease-in duration-75"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95"
+        >
+          <div className="origin-top-right absolute right-0 mt-2 -mr-1 w-56 rounded-md shadow-lg">
+            <div className="rounded-md bg-indigo-600 shadow-xs">
+              <div className="py-1">{children}</div>
+            </div>
+          </div>
+        </Transition>
+      </span>
+    </span>
+  );
+};
+export default withProperties(ButtonWithDropdown, { Item: DropdownItem });

src/components/MovieDetails/index.tsx

@@ -21,6 +21,7 @@ import { useUser, Permission } from '../../hooks/useUser';
 import { MediaStatus } from '../../../server/constants/media';
 import RequestModal from '../RequestModal';
 import Badge from '../Common/Badge';
+import ButtonWithDropdown from '../Common/ButtonWithDropdown';
 
 const messages = defineMessages({
   releasedate: 'Release Date',
@@ -81,9 +82,6 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
     return <div>Broken?</div>;
   }
 
-  console.log(MediaStatus);
-  console.log(data);
-
   const activeRequest = data?.mediaInfo?.requests?.[0];
 
   return (
@@ -143,8 +141,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
         </div>
         <div className="flex-1 flex justify-end mt-4 md:mt-0">
           {(!data.mediaInfo ||
-            data.mediaInfo?.status === MediaStatus.UNKNOWN ||
-            activeRequest) && (
+            data.mediaInfo?.status === MediaStatus.UNKNOWN) && (
             <Button
               buttonType="primary"
               onClick={() => setShowRequestModal(true)}
@@ -178,11 +175,80 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                   />
                 </svg>
               )}
-              <FormattedMessage
-                {...(activeRequest ? messages.viewrequest : messages.request)}
-              />
+              <FormattedMessage {...messages.request} />
             </Button>
           )}
+          {activeRequest && (
+            <ButtonWithDropdown
+              dropdownIcon={
+                <svg
+                  className="w-5 h-5"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+              }
+              text={
+                <>
+                  <svg
+                    className="w-4 mr-1"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                  <FormattedMessage {...messages.viewrequest} />
+                </>
+              }
+              onClick={() => setShowRequestModal(true)}
+            >
+              {hasPermission(Permission.MANAGE_REQUESTS) && (
+                <>
+                  <ButtonWithDropdown.Item>
+                    <svg
+                      className="w-4 mr-1"
+                      fill="currentColor"
+                      viewBox="0 0 20 20"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                    Approve
+                  </ButtonWithDropdown.Item>
+                  <ButtonWithDropdown.Item>
+                    <svg
+                      className="w-4 mr-1"
+                      fill="currentColor"
+                      viewBox="0 0 20 20"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                    Decline
+                  </ButtonWithDropdown.Item>
+                </>
+              )}
+            </ButtonWithDropdown>
+          )}
           {hasPermission(Permission.MANAGE_REQUESTS) && (
             <Button buttonType="default" className="ml-2">
               <svg

src/components/RequestModal/MovieRequestModal.tsx

@@ -69,8 +69,6 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
 
   const activeRequest = data?.mediaInfo?.requests?.[0];
 
-  console.log(activeRequest);
-
   const cancelRequest = async () => {
     if (onUpdating) {
       onUpdating(true);
@@ -79,7 +77,7 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
       `/api/v1/request/${activeRequest?.id}`
     );
 
-    if (response.data) {
+    if (response.status === 204) {
       if (onComplete) {
         onComplete(MediaStatus.UNKNOWN);
       }

src/components/TitleCard/index.tsx

@@ -176,7 +176,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
                     }
                     as={mediaType === 'movie' ? `/movie/${id}` : `/tv/${id}`}
                   >
-                    <a className="cursor-pointer flex w-full h-7 text-center text-white bg-indigo-500 rounded-sm mr-1 hover:bg-indigo-400 focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150">
+                    <a className="cursor-pointer flex w-full h-7 text-center text-white bg-indigo-500 rounded-sm hover:bg-indigo-400 focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150">
                       <svg
                         className="w-4 mx-auto"
                         fill="none"
@@ -202,7 +202,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
                   {!currentStatus && (
                     <button
                       onClick={() => setShowRequestModal(true)}
-                      className="w-full h-7 text-center text-white bg-indigo-500 rounded-sm ml-1 hover:bg-indigo-400 focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150"
+                      className="w-full h-7 text-center text-white bg-indigo-500 rounded-sm ml-2 hover:bg-indigo-400 focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150"
                     >
                       <svg
                         className="w-4 mx-auto"
@@ -221,7 +221,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
                     </button>
                   )}
                   {currentStatus === MediaStatus.PENDING && (
-                    <button className="w-full h-7 text-center text-white bg-orange-400 hover:bg-orange-300 rounded-sm ml-1 focus:border-orange-700 focus:shadow-outline-orange active:bg-orange-700 transition ease-in-out duration-150">
+                    <button className="w-full h-7 text-center text-white bg-orange-400 hover:bg-orange-300 rounded-sm ml-2 focus:border-orange-700 focus:shadow-outline-orange active:bg-orange-700 transition ease-in-out duration-150">
                       <svg
                         className="w-4 mx-auto"
                         fill="none"
@@ -239,7 +239,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
                     </button>
                   )}
                   {currentStatus === MediaStatus.PROCESSING && (
-                    <button className="w-full h-7 text-center text-white bg-red-500 rounded-sm ml-1">
+                    <button className="w-full h-7 text-center text-white bg-red-500 rounded-sm ml-2">
                       <svg
                         className="w-4 mx-auto"
                         fill="none"
@@ -257,7 +257,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
                     </button>
                   )}
                   {currentStatus === MediaStatus.AVAILABLE && (
-                    <button className="w-full h-7 text-center text-white bg-green-400 rounded-sm ml-1">
+                    <button className="w-full h-7 text-center text-white bg-green-400 rounded-sm ml-2">
                       <svg
                         className="w-4 mx-auto"
                         fill="none"