Merge pull request #14 from gwu-libraries/basic-interface-rework

Basic interface rework

rails/app/graphql/mutations/sign_in.rb

@@ -14,7 +14,13 @@ def resolve(**attributes)
         if user.valid_password?(attributes[:password])
           context[:current_user] = user
 
-          MutationResult.call(obj: { object: user }, success: true)
+          MutationResult.call(
+            obj: {
+              object: user
+            },
+            success: true,
+            errors: user.errors
+          )
         else
           GraphQL::ExecutionError.new('Incorrect Email/Password')
         end

react/src/components/pages/InvestigationPage.tsx

@@ -1,37 +1,35 @@
-import { useParams } from 'react-router'
-import SideBar from '../SideBar.tsx'
-import InvestigationGraph from '../graph/InvestigationGraph.tsx'
-import Header from '../Header.tsx'
-import { useInvestigationGraph } from '../../hooks/useInvestigationGraph.tsx'
+import { useParams } from "react-router";
+import SideBar from "../SideBar.tsx";
+import InvestigationGraph from "../graph/InvestigationGraph.tsx";
+import Header from "../Header.tsx";
+import { useInvestigationGraph } from "../../hooks/useInvestigationGraph.tsx";
 
 interface Props {
-  name: string
-  created_at: string
+  name: string;
+  created_at: string;
 }
 
 type InvestigationParams = {
-  investigationId: string
-}
+  investigationId: string;
+};
 
 function InvestigationPage() {
-  const { investigationId } = useParams<InvestigationParams>()
-  const { error, data, loading } = useInvestigationGraph(investigationId)
-
-  if (loading) return <div>loading....</div>
-  if (error) return <div>uh oh error...</div>
+  const { investigationId } = useParams<InvestigationParams>();
+  const { error, data, loading } = useInvestigationGraph(investigationId);
 
-  console.log(data)
+  if (loading) return <div>loading....</div>;
+  if (error) return <div>uh oh error...</div>;
 
   return (
     <>
       <Header />
       <h1>Investigation: {data.investigation.name}</h1>
       <div className="border-4 border-solid border-indigo-500">
         <div className="flex flex-row">
-          <div className="basis-1/4">
+          <div className="basis-1/8">
             <SideBar />
           </div>
-          <div className="basis-3/4">
+          <div className="basis-7/8">
             <InvestigationGraph
               workNodes={data.investigation.workNodes}
               authorNodes={data.investigation.authorNodes}
@@ -43,7 +41,7 @@ function InvestigationPage() {
         </div>
       </div>
     </>
-  )
+  );
 }
 
-export default InvestigationPage
+export default InvestigationPage;

react/src/components/pages/SignInPage.tsx

@@ -2,10 +2,12 @@ import { useMutation } from "@apollo/client";
 
 import { SetStateAction, useState } from "react";
 import { SIGN_IN } from "../../hooks/SIGN_IN";
+import { useNavigate } from "react-router-dom";
 
 function SignInPage() {
   const [emailInput, setEmail] = useState("");
   const [passwordInput, setPassword] = useState("");
+  const navigate = useNavigate();
 
   let emailInputHandler = (e: {
     target: { value: SetStateAction<string> };
@@ -20,10 +22,19 @@ function SignInPage() {
   };
 
   const [signIn] = useMutation(SIGN_IN, {
+    errorPolicy: "ignore", // TO-DO: fix this
     variables: {
       email: emailInput,
       password: passwordInput,
     },
+    onCompleted: (data) => {
+      localStorage.setItem("token", data.signIn.authenticationToken);
+      localStorage.setItem("email", "SIGNED IN");
+      navigate("/investigations");
+    },
+    onError: (error) => {
+      console.log(error);
+    },
   });
 
   if (localStorage.getItem("email")) {

react/src/hooks/SIGN_IN.tsx

@@ -3,11 +3,8 @@ import { gql } from "@apollo/client";
 export const SIGN_IN = gql`
   mutation ($email: String!, $password: String!) {
     signIn(input: { email: $email, password: $password }) {
-      user {
-        id
-        email
-        authenticationToken
-      }
+      authenticationToken
+      id
     }
   }
 `;

react/src/root.css

@@ -1,5 +1,5 @@
 #root {
-  max-width: 1280px;
+  /* max-width: 1280px; */
   margin: 0 auto;
   padding: 2rem;
   text-align: center;

react/src/root.tsx

@@ -1,9 +1,15 @@
-import './root.css'
+import { Link } from "react-router-dom";
+import "./root.css";
 
 export default function Root() {
   return (
     <>
       <h1>ey i'm a homepage</h1>
+      <Link to="/register"> Register </Link>
+      <br />
+      <Link to="/signin"> Sign In </Link>
+      <br />
+      <Link to="/investigations"> My investigations </Link>
     </>
-  )
+  );
 }

react/src/signOutButton.tsx

@@ -1,25 +1,14 @@
 import { useMutation, gql } from "@apollo/client";
 import { useNavigate } from "react-router-dom";
 
-const SIGN_OUT = gql`
-  mutation signOut {
-    signOut(input: {}) {
-      success
-      errors
-    }
-  }
-`;
-
 function SignOutButton() {
   const navigate = useNavigate();
-  const [signOut] = useMutation(SIGN_OUT, {
-    errorPolicy: "ignore", // TO-DO: fix this
-    onCompleted: () => {
-      localStorage.setItem("token", "");
-      localStorage.setItem("email", "");
-      navigate("/");
-    },
-  });
+
+  function signOut() {
+    localStorage.setItem("token", "");
+    localStorage.setItem("email", "");
+    navigate("/");
+  }
 
   return (
     <button