feat(api): plex tv sync and recently added sync

src/components/Layout/UserDropdown/index.tsx

@@ -50,20 +50,6 @@ const UserDropdown: React.FC = () => {
             aria-orientation="vertical"
             aria-labelledby="user-menu"
           >
-            <a
-              href="#"
-              className="block px-4 py-2 text-sm text-gray-200 hover:bg-gray-600 transition ease-in-out duration-150"
-              role="menuitem"
-            >
-              Your Profile
-            </a>
-            <a
-              href="#"
-              className="block px-4 py-2 text-sm text-gray-200 hover:bg-gray-600 transition ease-in-out duration-150"
-              role="menuitem"
-            >
-              Settings
-            </a>
             <a
               href="#"
               className="block px-4 py-2 text-sm text-gray-200 hover:bg-gray-600 transition ease-in-out duration-150"

src/components/RequestModal/TvRequestModal.tsx

@@ -71,18 +71,32 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
     }
   };
 
-  const getAllRequestedSeasons = (): number[] =>
-    (data?.mediaInfo?.requests ?? []).reduce((requestedSeasons, request) => {
-      return [
-        ...requestedSeasons,
-        ...request.seasons.map((sr) => sr.seasonNumber),
-      ];
-    }, [] as number[]);
+  const getAllRequestedSeasons = (): number[] => {
+    const requestedSeasons = (data?.mediaInfo?.requests ?? []).reduce(
+      (requestedSeasons, request) => {
+        return [
+          ...requestedSeasons,
+          ...request.seasons.map((sr) => sr.seasonNumber),
+        ];
+      },
+      [] as number[]
+    );
 
-  const isSelectedSeason = (seasonNumber: number): boolean => {
-    return selectedSeasons.includes(seasonNumber);
+    const availableSeasons = (data?.mediaInfo?.seasons ?? [])
+      .filter(
+        (season) =>
+          (season.status === MediaStatus.AVAILABLE ||
+            season.status === MediaStatus.PARTIALLY_AVAILABLE) &&
+          !requestedSeasons.includes(season.seasonNumber)
+      )
+      .map((season) => season.seasonNumber);
+
+    return [...requestedSeasons, ...availableSeasons];
   };
 
+  const isSelectedSeason = (seasonNumber: number): boolean =>
+    selectedSeasons.includes(seasonNumber);
+
   const toggleSeason = (seasonNumber: number): void => {
     // If this season already has a pending request, don't allow it to be toggled
     if (getAllRequestedSeasons().includes(seasonNumber)) {
@@ -241,6 +255,9 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
                       const seasonRequest = getSeasonRequest(
                         season.seasonNumber
                       );
+                      const mediaSeason = data?.mediaInfo?.seasons.find(
+                        (sn) => sn.seasonNumber === season.seasonNumber
+                      );
                       return (
                         <tr key={`season-${season.id}`}>
                           <td className="px-4 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-100">
@@ -248,6 +265,7 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
                               role="checkbox"
                               tabIndex={0}
                               aria-checked={
+                                !!mediaSeason ||
                                 !!seasonRequest ||
                                 isSelectedSeason(season.seasonNumber)
                               }
@@ -258,12 +276,13 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
                                 }
                               }}
                               className={`group relative inline-flex items-center justify-center flex-shrink-0 h-5 w-10 cursor-pointer focus:outline-none ${
-                                seasonRequest ? 'opacity-50' : ''
+                                mediaSeason || seasonRequest ? 'opacity-50' : ''
                               }`}
                             >
                               <span
                                 aria-hidden="true"
                                 className={`${
+                                  !!mediaSeason ||
                                   !!seasonRequest ||
                                   isSelectedSeason(season.seasonNumber)
                                     ? 'bg-indigo-500'
@@ -273,6 +292,7 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
                               <span
                                 aria-hidden="true"
                                 className={`${
+                                  !!mediaSeason ||
                                   !!seasonRequest ||
                                   isSelectedSeason(season.seasonNumber)
                                     ? 'translate-x-5'
@@ -290,17 +310,25 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
                             {season.episodeCount}
                           </td>
                           <td className="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-200">
-                            {!seasonRequest && <Badge>Not Requested</Badge>}
-                            {seasonRequest?.status ===
-                              MediaRequestStatus.PENDING && (
-                              <Badge badgeType="warning">Pending</Badge>
+                            {!seasonRequest && !mediaSeason && (
+                              <Badge>Not Requested</Badge>
                             )}
-                            {seasonRequest?.status ===
-                              MediaRequestStatus.APPROVED && (
-                              <Badge badgeType="danger">Unavailable</Badge>
-                            )}
-                            {seasonRequest?.status ===
-                              MediaRequestStatus.AVAILABLE && (
+                            {!mediaSeason &&
+                              seasonRequest?.status ===
+                                MediaRequestStatus.PENDING && (
+                                <Badge badgeType="warning">Pending</Badge>
+                              )}
+                            {!mediaSeason &&
+                              seasonRequest?.status ===
+                                MediaRequestStatus.APPROVED && (
+                                <Badge badgeType="danger">Unavailable</Badge>
+                              )}
+                            {!mediaSeason &&
+                              seasonRequest?.status ===
+                                MediaRequestStatus.AVAILABLE && (
+                                <Badge badgeType="success">Available</Badge>
+                              )}
+                            {mediaSeason?.status === MediaStatus.AVAILABLE && (
                               <Badge badgeType="success">Available</Badge>
                             )}
                           </td>

src/components/Settings/LibraryItem.tsx

@@ -18,7 +18,6 @@ const LibraryItem: React.FC<LibraryItemProps> = ({
           {name}
         </div>
         <div className="flex-shrink-0 pr-2">
-          {/* <!-- On: "bg-indigo-600", Off: "bg-gray-200" --> */}
           <span
             role="checkbox"
             tabIndex={0}
@@ -33,14 +32,12 @@ const LibraryItem: React.FC<LibraryItemProps> = ({
               isEnabled ? 'bg-indigo-600' : 'bg-cool-gray-700'
             } relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:shadow-outline`}
           >
-            {/* <!-- On: "translate-x-5", Off: "translate-x-0" --> */}
             <span
               aria-hidden="true"
               className={`${
                 isEnabled ? 'translate-x-5' : 'translate-x-0'
               } relative inline-block h-5 w-5 rounded-full bg-white shadow transform transition ease-in-out duration-200`}
             >
-              {/* <!-- On: "opacity-0 ease-out duration-100", Off: "opacity-100 ease-in duration-200" --> */}
               <span
                 className={`${
                   isEnabled
@@ -62,7 +59,6 @@ const LibraryItem: React.FC<LibraryItemProps> = ({
                   />
                 </svg>
               </span>
-              {/* <!-- On: "opacity-100 ease-in duration-200", Off: "opacity-0 ease-out duration-100" --> */}
               <span
                 className={`${
                   isEnabled

src/components/Settings/SettingsJobs.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import useSWR from 'swr';
+import LoadingSpinner from '../Common/LoadingSpinner';
+import Badge from '../Common/Badge';
+import { FormattedDate, FormattedRelativeTime } from 'react-intl';
+import Button from '../Common/Button';
+import { hasPermission } from '../../../server/lib/permissions';
+import { Permission } from '../../hooks/useUser';
+
+const SettingsJobs: React.FC = () => {
+  const { data, error } = useSWR<{ name: string; nextExecutionTime: string }[]>(
+    '/api/v1/settings/jobs'
+  );
+
+  if (!data && !error) {
+    return <LoadingSpinner />;
+  }
+
+  return (
+    <div className="flex flex-col">
+      <div className="my-2 overflow-x-auto -mx-6 sm:-mx-6 md:mx-4 lg:mx-4">
+        <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
+          <div className="shadow overflow-hidden sm:rounded-lg">
+            <table className="min-w-full">
+              <thead>
+                <tr>
+                  <th className="px-6 py-3 bg-cool-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
+                    Job Name
+                  </th>
+                  <th className="px-6 py-3 bg-cool-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
+                    Next Execution
+                  </th>
+                  <th className="px-6 py-3 bg-cool-gray-500"></th>
+                </tr>
+              </thead>
+              <tbody className="bg-cool-gray-600 divide-y divide-cool-gray-700">
+                {data?.map((job, index) => (
+                  <tr key={`job-list-${index}`}>
+                    <td className="px-6 py-4 whitespace-no-wrap">
+                      <div className="text-sm leading-5 text-white">
+                        {job.name}
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-no-wrap">
+                      <div className="text-sm leading-5 text-white">
+                        <FormattedRelativeTime
+                          value={Math.floor(
+                            (new Date(job.nextExecutionTime).getTime() -
+                              Date.now()) /
+                              1000
+                          )}
+                          updateIntervalInSeconds={1}
+                        />
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-no-wrap text-right text-sm leading-5 font-medium">
+                      <Button buttonType="primary">Run Now</Button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SettingsJobs;

src/components/UserList/index.tsx

@@ -7,8 +7,10 @@ import { FormattedDate } from 'react-intl';
 import Button from '../Common/Button';
 import { hasPermission } from '../../../server/lib/permissions';
 import { Permission } from '../../hooks/useUser';
+import { useRouter } from 'next/router';
 
 const UserList: React.FC = () => {
+  const router = useRouter();
   const { data, error } = useSWR<User[]>('/api/v1/user');
 
   if (!data && !error) {
@@ -94,7 +96,13 @@ const UserList: React.FC = () => {
                         <FormattedDate value={user.updatedAt} />
                       </td>
                       <td className="px-6 py-4 whitespace-no-wrap text-right text-sm leading-5 font-medium">
-                        <Button buttonType="warning" className="mr-2">
+                        <Button
+                          buttonType="warning"
+                          className="mr-2"
+                          onClick={() =>
+                            router.push('/users/[userId]', `/users/${user.id}`)
+                          }
+                        >
                           Edit
                         </Button>
                         <Button buttonType="danger">Delete</Button>

src/components/UserProfile/index.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import useSWR from 'swr';
+import LoadingSpinner from '../Common/LoadingSpinner';
+import type { User } from '../../../server/entity/User';
+
+const UserProfile: React.FC = () => {
+  const router = useRouter();
+  const { data, error } = useSWR<User>(`/api/v1/user/${router.query.userId}`);
+
+  if (!data && !error) {
+    return <LoadingSpinner />;
+  }
+
+  return (
+    <div className="py-6 px-4 space-y-6 sm:p-6 lg:pb-8">
+      <div className="md:flex md:items-center md:justify-between mt-8 mb-6">
+        <div className="flex-1 min-w-0">
+          <h2 className="text-2xl font-bold leading-7 text-cool-gray-100 sm:text-3xl sm:leading-9 sm:truncate">
+            User Profile
+          </h2>
+        </div>
+      </div>
+
+      <div className="flex flex-col space-y-6 lg:flex-row lg:space-y-0 lg:space-x-6 text-white">
+        <div className="flex-grow space-y-6">
+          <div className="space-y-1">
+            <label
+              htmlFor="username"
+              className="block text-sm font-medium leading-5 text-cool-gray-400"
+            >
+              Username
+            </label>
+            <div className="rounded-md shadow-sm flex">
+              <input
+                id="username"
+                className="form-input flex-grow block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-cool-gray-700 border border-cool-gray-500"
+                value={data?.username}
+                readOnly
+              />
+            </div>
+          </div>
+          <div className="space-y-1">
+            <label
+              htmlFor="email"
+              className="block text-sm font-medium leading-5 text-cool-gray-400"
+            >
+              Email
+            </label>
+            <div className="rounded-md shadow-sm flex">
+              <input
+                id="email"
+                className="form-input flex-grow block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-cool-gray-700 border border-cool-gray-500"
+                value={data?.email}
+                readOnly
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="flex-grow space-y-1 lg:flex-grow-0 lg:flex-shrink-0">
+          <p
+            className="block text-sm leading-5 font-medium text-cool-gray-400"
+            aria-hidden="true"
+          >
+            Avatar
+          </p>
+          <div className="lg:hidden">
+            <div className="flex items-center">
+              <div
+                className="flex-shrink-0 inline-block rounded-full overflow-hidden h-12 w-12"
+                aria-hidden="true"
+              >
+                <img
+                  className="rounded-full h-full w-full"
+                  src={data?.avatar}
+                  alt=""
+                />
+              </div>
+            </div>
+          </div>
+
+          <div className="hidden relative rounded-full overflow-hidden lg:block transition duration-150 ease-in-out">
+            <img
+              className="relative rounded-full w-40 h-40"
+              src={data?.avatar}
+              alt=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UserProfile;