Invitations system

admin/.gitignore

@@ -3,3 +3,4 @@ node_modules/
 .eslintcache
 package-lock.json
 yarn.lock
+.DS_Store

admin/.nvmrc

@@ -0,0 +1 @@
+v16.19.1

admin/package.json

@@ -1,12 +1,13 @@
 {
   "name": "petio-admin",
-  "version": "0.5.4-alpha",
+  "version": "0.5.6-alpha",
   "private": true,
   "homepage": ".",
   "dependencies": {
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "moment": "^2.30.1",
     "react": "^17.0.2",
     "react-charts": "^2.0.0-beta.7",
     "react-dom": "^17.0.2",

admin/src/App.js

@@ -14,6 +14,7 @@ import Issues from "./page/Issues";
 import Reviews from "./page/Reviews";
 import Profile from "./page/Profile";
 import User from "./data/User";
+import Invitation from "./page/Invitation";
 
 class App extends React.Component {
   constructor(props) {
@@ -313,6 +314,15 @@ class App extends React.Component {
                     />
                   </div>
                 </Route>
+                <Route path="/invitations">
+                  <div className="page-wrap">
+                    <Invitation
+                      user={this.props.user}
+                      api={this.props.api}
+                      msg={this.msg}
+                    />
+                  </div>
+                </Route>
                 <Route path="/reviews">
                   <div className="page-wrap">
                     <Reviews

admin/src/components/Sidebar.js

@@ -6,6 +6,7 @@ import { ReactComponent as PersonIcon } from "../assets/svg/people.svg";
 import { ReactComponent as ReviewIcon } from "../assets/svg/star.svg";
 import { ReactComponent as RequestIcon } from "../assets/svg/bookmark.svg";
 import { ReactComponent as SettingsIcon } from "../assets/svg/settings.svg";
+import { ReactComponent as InvitationIcon } from "../assets/svg/invitation.svg";
 import { ReactComponent as AdminIcon } from "../assets/svg/admin.svg";
 import { ReactComponent as IssueIcon } from "../assets/svg/issue.svg";
 import pjson from "../../package.json";
@@ -125,6 +126,20 @@ class Sidebar extends React.Component {
               <PersonIcon />
             </div>
           </Link>
+          <Link
+            to="/invitations"
+            className={
+              "menu--item " +
+              (current === "/invitations" || current.startsWith("/invitations/")
+                ? "active"
+                : "")
+            }
+          >
+            <p>Invitations</p>
+            <div className="icon">
+              <InvitationIcon />
+            </div>
+          </Link>
           <Link
             to="/settings"
             className={

admin/src/data/Api/actions.js

@@ -710,3 +710,28 @@ export async function testPlex() {
     throw "Unable to test, please try again later";
   }
 }
+
+export async function getPlexLibraries() {
+  return api.getPlexLibraries();
+}
+export async function getInvitations() {
+  return api.getInvitations();
+}
+export async function addInvitation(invitation) {
+  return api.addInvitation(invitation);
+}
+export async function deleteInvitation(id) {
+  return api.deleteInvitation(id);
+}
+export async function updateInvitation(invitation) {
+  return api.updateInvitation(invitation);
+}
+export async function acceptInvitation(acceptedBy, invitCode) {
+  return api.deleteInvitation(acceptedBy, invitCode);
+}
+export function getUrlRedirection() {
+  return api.getUrlRedirection();
+}
+export function updateUrlRedirection(urlRedirection) {
+  return api.updateUrlRedirection(urlRedirection);
+}

admin/src/data/Api/api.js

@@ -1,4 +1,4 @@
-import { get, post, upload } from "../http";
+import { get, post, put, upload } from "../http";
 
 export async function popular() {
   return get("/trending");
@@ -223,3 +223,38 @@ export function testPlex() {
 export function updatePlexToken() {
   return get(`/plex/update_token`);
 }
+
+export async function getPlexLibraries() {
+  return get(`/invitations/libraries`);
+}
+
+export async function getInvitations() {
+  return get(`/invitations`, undefined, "handle");
+}
+
+export async function getInvitation(id) {
+  return post(`/invitations`, id, "handle");
+}
+
+export async function addInvitation(invitation) {
+  return put(`/invitations`, invitation, "handle");
+}
+
+export async function deleteInvitation(id) {
+  return post(`/invitations/delete`, { id }, "handle");
+}
+
+export async function updateInvitation(invitation) {
+  return post(`/invitations`, invitation, "handle");
+}
+
+export async function acceptInvitation(acceptedBy, invitCode) {
+  return post(`/invitations/accept`, { acceptedBy, invitCode }, "handle");
+}
+
+export function getUrlRedirection() {
+  return get(`/invitations/redirectUrl`, undefined, "handle");
+}
+export function updateUrlRedirection(urlRedirection) {
+  return post(`/invitations/redirectUrl`, { urlRedirection }, "handle");
+}

admin/src/data/Api/index.js

@@ -48,6 +48,14 @@ import {
   testDiscord,
   testTelegram,
   testPlex,
+  getPlexLibraries,
+  getInvitations,
+  addInvitation,
+  deleteInvitation,
+  updateInvitation,
+  acceptInvitation,
+  getUrlRedirection,
+  updateUrlRedirection,
 } from "./actions";
 
 export default {
@@ -100,4 +108,12 @@ export default {
   testDiscord,
   testTelegram,
   testPlex,
+  getPlexLibraries,
+  getInvitations,
+  addInvitation,
+  deleteInvitation,
+  updateInvitation,
+  acceptInvitation,
+  getUrlRedirection,
+  updateUrlRedirection,
 };

admin/src/data/http.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-undef
 const isDev = process.env.NODE_ENV === "development";
 const origin = isDev ? "http://localhost:7778" : "";
 const basePath = isDev
@@ -51,7 +52,18 @@ function parseResponse(response) {
     .catch(() => response.text());
 }
 
-export function get(path, options = {}) {
+function handleResponse(response) {
+  if (response.ok) {
+    return response.clone().json();
+  }
+
+  return response.json().then((err) => {
+    console.error(`[API ${response.status}]`, err);
+    throw err;
+  });
+}
+
+export function get(path, options = {}, handleType = "parse") {
   const mergedOptions = {
     credentials: "include",
     ...options,
@@ -60,10 +72,12 @@ export function get(path, options = {}) {
       ...options.headers,
     },
   };
-  return fetch(API_URL + path, mergedOptions).then(parseResponse);
+  return fetch(API_URL + path, mergedOptions).then(
+    handleType === "parse" ? parseResponse : handleResponse
+  );
 }
 
-export function post(path, data, options = {}) {
+export function post(path, data, options = {}, handleType = "parse") {
   const mergedOptions = {
     credentials: "include",
     method: "POST",
@@ -75,10 +89,12 @@ export function post(path, data, options = {}) {
     },
     body: JSON.stringify(data),
   };
-  return fetch(API_URL + path, mergedOptions).then(parseResponse);
+  return fetch(API_URL + path, mergedOptions).then(
+    handleType === "parse" ? parseResponse : handleResponse
+  );
 }
 
-export function put(path, data, options = {}) {
+export function put(path, data, options = {}, handleType = "parse") {
   const mergedOptions = {
     credentials: "include",
     method: "PUT",
@@ -90,10 +106,12 @@ export function put(path, data, options = {}) {
     },
     body: JSON.stringify(data),
   };
-  return fetch(API_URL + path, mergedOptions).then(parseResponse);
+  return fetch(API_URL + path, mergedOptions).then(
+    handleType === "parse" ? parseResponse : handleResponse
+  );
 }
 
-export function del(path, options = {}) {
+export function del(path, options = {}, handleType = "parse") {
   const mergedOptions = {
     credentials: "include",
     method: "DELETE",
@@ -103,10 +121,12 @@ export function del(path, options = {}) {
       ...options.headers,
     },
   };
-  return fetch(API_URL + path, mergedOptions).then(parseResponse);
+  return fetch(API_URL + path, mergedOptions).then(
+    handleType === "parse" ? parseResponse : handleResponse
+  );
 }
 
-export function upload(path, data, options = {}) {
+export function upload(path, data, options = {}, handleType = "parse") {
   const mergedOptions = {
     credentials: "include",
     method: "POST",
@@ -117,5 +137,7 @@ export function upload(path, data, options = {}) {
     },
     body: data,
   };
-  return fetch(API_URL + path, mergedOptions).then(parseResponse);
+  return fetch(API_URL + path, mergedOptions).then(
+    handleType === "parse" ? parseResponse : handleResponse
+  );
 }

admin/src/index.css

@@ -1,13 +1,13 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }