Merge pull request #26 from irfanullahjan/more-ux-and-ui-improvements

More ux and UI improvements
irfanullahjan · Sep 11, 2021 · 6b59c63 · 6b59c63 · vercel · Sep 11, 2021
2 parents 64ca2f6 + 24db98a
commit 6b59c63
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 52 deletions.
diff --git a/client/src/common/components/PropertyForm.tsx b/client/src/common/components/PropertyForm.tsx
@@ -65,39 +65,43 @@ export function PropertyForm(props: Props) {
           ? new Date(propertyData.dateAvailable).toISOString().slice(0, 10)
           : '',
     },
-    onSubmit: values => {
-      fetch(`/api/properties${propertyId ? `/${propertyId}` : ''}`, {
-        method: propertyId ? 'PUT' : 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          ...values,
-          installments: values.offer === 'sale' ? values.installments : false,
-          dateAvailable: new Date(values.dateAvailable),
-          userId: user.id,
-        }),
-      })
-        .then(res => {
-          formik.setSubmitting(false);
-          if (res.status === 200 || res.status === 204) {
-            router.push('/');
-            setFormFeedback({
-              accent: 'success',
-              message:
-                'Property saved successfully. Redirecting you to home page.',
-            });
-          } else {
-            throw res;
-          }
-        })
-        .catch(err => {
+    onSubmit: async values => {
+      setFormFeedback(undefined);
+      try {
+        const res = await fetch(
+          `/api/properties${propertyId ? `/${propertyId}` : ''}`,
+          {
+            method: propertyId ? 'PUT' : 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+              ...values,
+              installments:
+                values.offer === 'sale' ? values.installments : false,
+              dateAvailable: new Date(values.dateAvailable),
+              userId: user.id,
+            }),
+          },
+        );
+
+        if (res.status === 200 || res.status === 204) {
           setFormFeedback({
-            accent: 'danger',
-            message: 'Signup failed due to a network or server issue.',
+            accent: 'success',
+            message:
+              'Property saved successfully. Redirecting you to your properties.',
           });
-          console.error(err);
+          setTimeout(() => router.push(`/user/${user.id}`), 1000);
+        } else {
+          throw res;
+        }
+      } catch (err) {
+        setFormFeedback({
+          accent: 'danger',
+          message: 'Signup failed due to a network or server issue.',
         });
+        console.error(err);
+      }
     },
     validationSchema,
   });

diff --git a/client/src/common/components/lib/PropertiesGrid.tsx b/client/src/common/components/lib/PropertiesGrid.tsx
@@ -1,6 +1,8 @@
 import Link from 'next/link';
+import { SessionContext } from '../../../pages/_app';
 import {
   Badge,
+  Button,
   Card,
   CardBody,
   CardImg,
@@ -10,14 +12,33 @@ import {
   Col,
   Row,
 } from 'reactstrap';
+import { mutate } from 'swr';
+import { useContext } from 'react';
 
 type Props = {
   properties: { [key: string]: any }[];
   editable?: boolean;
+  mutateUrl?: string | null;
 };
 
 export function PropertiesGrid(props: Props) {
-  const { properties, editable } = props;
+  const { user } = useContext(SessionContext);
+  const { properties, editable, mutateUrl } = props;
+
+  const handleDelete = (id: number) => {
+    if (confirm('Are you sure you wnat to delete this property?')) {
+      fetch(`/api/properties/${id}`, { method: 'DELETE' })
+        .then(res => {
+          if (res.status === 204) {
+            if (mutateUrl) mutate(mutateUrl);
+          } else {
+            alert('Deleting property failed.');
+          }
+        })
+        .catch(() => alert('Error making network call.'));
+    }
+  };
+
   return (
     <Row className="my-4">
       {properties.map((property, i) => (
@@ -49,9 +70,16 @@ export function PropertiesGrid(props: Props) {
                 <a className="btn btn-primary mr-2">View</a>
               </Link>
               {editable && (
-                <Link href={`/${property.id}/edit`} passHref>
-                  <a className="btn btn-secondary">Edit</a>
-                </Link>
+                <>
+                  <Link href={`/${property.id}/edit`} passHref>
+                    <a className="btn btn-secondary mr-2">Edit</a>
+                  </Link>
+                  <Button
+                    color="danger"
+                    onClick={() => handleDelete(property.id)}>
+                    Delete
+                  </Button>
+                </>
               )}
             </CardBody>
           </Card>

diff --git a/client/src/pages/[id]/index.tsx b/client/src/pages/[id]/index.tsx
@@ -2,7 +2,7 @@ import { Spinner } from 'components/lib/Spinner';
 import { useRouter } from 'next/dist/client/router';
 import { SessionContext } from '../_app';
 import { useContext } from 'react';
-import { Badge, Table } from 'reactstrap';
+import { Badge, Button, Table } from 'reactstrap';
 import { getAsString } from 'utils/getAsString';
 import Link from 'next/link';
 import useSWR from 'swr';
@@ -30,6 +30,20 @@ export default function ViewProperty() {
   if (error)
     return <Error statusCode={error.status} title={error.statusText} />;
 
+  const handleDelete = () => {
+    if (confirm('Are you sure you wnat to delete this property?')) {
+      fetch(`/api/properties/${getAsString(id)}`, { method: 'DELETE' })
+        .then(res => {
+          if (res.status === 204) {
+            router.push(`/user/${user.id}`);
+          } else {
+            alert('Deleting property failed.');
+          }
+        })
+        .catch(() => alert('Error making network call.'));
+    }
+  };
+
   return (
     <>
       <h1>View Property</h1>
@@ -119,9 +133,14 @@ export default function ViewProperty() {
           </Table>
           {user &&
             (user.id === property?.userId ? (
-              <Link href={`/${property.id}/edit`} passHref>
-                <a className="btn btn-primary">Edit</a>
-              </Link>
+              <>
+                <Link href={`/${property.id}/edit`} passHref>
+                  <a className="btn btn-primary mr-3">Edit</a>
+                </Link>
+                <Button color="danger" onClick={handleDelete}>
+                  Delete
+                </Button>
+              </>
             ) : (
               <Link href={`/${property?.id}/report`} passHref>
                 <a className="btn btn-danger">Report</a>

diff --git a/client/src/pages/[id]/report.tsx b/client/src/pages/[id]/report.tsx
@@ -45,12 +45,12 @@ export default function ReportProperty() {
         });
         const json = await res.json();
         if (json?.id) {
-          router.push('/');
           setFormFeedback({
             accent: 'success',
             message:
               'Reported the property successfully. Redirecting you to home page.',
           });
+          setTimeout(() => router.push('/'), 1000);
         } else {
           throw res;
         }

diff --git a/client/src/pages/login.tsx b/client/src/pages/login.tsx
@@ -15,7 +15,6 @@ export default function Login() {
   }>();
 
   const router = useRouter();
-  if (user) router.push('/');
 
   const formik = useFormik<{
     email: string;
@@ -26,6 +25,7 @@ export default function Login() {
       password: '',
     },
     onSubmit: async values => {
+      setFormFeedback(undefined);
       try {
         const res = await fetch('/api/user/login', {
           method: 'POST',
@@ -72,6 +72,16 @@ export default function Login() {
     },
   });
 
+  if (user) {
+    if (!formFeedback) {
+      setFormFeedback({
+        accent: 'info',
+        message: 'You are already logged in. Redirecting you to home page.',
+      });
+    }
+    setTimeout(() => router.push('/'), 1000);
+  }
+
   return (
     <>
       <h1>Login</h1>

diff --git a/client/src/pages/reports/[id]/index.tsx b/client/src/pages/reports/[id]/index.tsx
@@ -39,6 +39,9 @@ export default function ReportedProperty() {
       />
     );
 
+  if (error)
+    return <Error statusCode={error.status} title={error.statusText} />;
+
   const handleDelete = async () => {
     if (confirm('Are you sure you want to delete this property?')) {
       const res = await fetch(`/api/properties/${id}`, {

diff --git a/client/src/pages/signup.tsx b/client/src/pages/signup.tsx
@@ -28,6 +28,7 @@ export default function Signup() {
       verifyPassword: '',
     },
     onSubmit: async values => {
+      setFormFeedback(undefined);
       try {
         const formData = {
           ...values,
@@ -41,11 +42,11 @@ export default function Signup() {
           body: JSON.stringify(formData),
         });
         if (res.status === 200) {
-          router.push('/login');
           setFormFeedback({
             accent: 'success',
             message: 'Signup successful. Redirecting you to login page.',
           });
+          setTimeout(() => router.push('/login'), 1000);
         } else if (res.status === 409) {
           setFormFeedback({
             accent: 'danger',
@@ -84,7 +85,15 @@ export default function Signup() {
     },
   });
 
-  if (user) router.push('/');
+  if (user) {
+    if (!formFeedback) {
+      setFormFeedback({
+        accent: 'info',
+        message: 'You are already logged in. Redirecting you to home page.',
+      });
+    }
+    setTimeout(() => router.push('/'), 1000);
+  }
 
   return (
     <>

diff --git a/client/src/pages/user/[id].tsx b/client/src/pages/user/[id].tsx
@@ -15,16 +15,11 @@ export default function UserByIdProperties() {
   const router = useRouter();
   const { id } = router.query;
 
-  const {
-    data: properties,
-    error,
-    isValidating,
-  } = useSWR(
-    id
-      ? `/api/properties?filter[where][userId]=${id}&filter[include][]=user`
-      : null,
-    fetcher,
-  );
+  const fetchUrl = id
+    ? `/api/properties?filter[where][userId]=${id}&filter[include][]=user&filter[order][]=createStamp DESC`
+    : null;
+
+  const { data: properties, error, isValidating } = useSWR(fetchUrl, fetcher);
 
   if (error)
     return <Error statusCode={error.status} title={error.statusText} />;
@@ -41,6 +36,7 @@ export default function UserByIdProperties() {
             <PropertiesGrid
               properties={properties}
               editable={id === user?.id}
+              mutateUrl={fetchUrl}
             />
           ) : (
             <p>This user has no properties.</p>