add member-only public pages

src/Components/Public/ProfilePage.js

@@ -157,7 +157,7 @@ export default function ProfilePage(props) {
             { !member.banner || !localStorage.getItem("bottombanners") ? "" : 
               <BS.Image rounded className="mb-2" style={{width: '100%', maxHeight: '15rem', objectFit: 'cover'}} src={banner}/>
             }
-            <BS.Row><BS.Col><Link to={location.pathname.substring(0, location.pathname.lastIndexOf('/'))}><BS.Button variant="primary" className="float-right">Back</BS.Button></Link></BS.Col></BS.Row>
+            { props.list ? <BS.Row><BS.Col><Link to={location.pathname.substring(0, location.pathname.lastIndexOf('/'))}><BS.Button variant="primary" className="float-right">Back</BS.Button></Link></BS.Col></BS.Row> : ""}
             </BS.Card.Body>
         </BS.Card>
         </>

src/Pages/MemberProfile.js

@@ -0,0 +1,54 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import  * as BS from 'react-bootstrap';
+
+import Loading from '../Components/Loading';
+import API_URL from '../Constants/constants';
+import ProfilePage from '../Components/Public/ProfilePage';
+
+const MemberProfile = () => {
+    const { memberID } = useParams();
+
+    const [isLoading, setIsLoading ] = useState(false);
+    const [isError, setIsError ] = useState(false);
+    const [isForbidden, setIsForbidden ] = useState(false);
+    const [ member, setMember ] = useState({});
+
+    const fetchMember = useCallback( () => {
+        setIsLoading(true);
+        setIsError(false);
+    
+         fetch(`${API_URL}m/${memberID}`,{
+        method: 'GET',
+        }).then ( res => {
+          if (res.status === 403) {
+            throw new Error('Access denied!');
+          }
+          return res.json()
+        }
+        ).then (data => { 
+        setMember(data)
+          setIsLoading(false);
+      })
+        .catch (error => {
+          if (error.message === 'Access denied!') {
+            setIsForbidden(true);
+          } else {
+            console.log(error);
+            setIsError(true);
+          }
+          setIsLoading(false);
+        })
+      }, [memberID])
+    
+      useEffect(() => {
+        fetchMember();
+      }, [fetchMember])
+
+      return (
+          isLoading ? <Loading /> : isError ? 
+          <BS.Alert variant="danger">Error fetching member.</BS.Alert> : isForbidden ? <BS.Alert variant="danger">This member is private.</BS.Alert> : <ProfilePage member={member} list={false}/>
+      );
+}
+
+export default MemberProfile;

src/Pages/Public.js

@@ -5,31 +5,55 @@ import { useForm } from "react-hook-form";
 import history from "../History.js";
 import { Switch, Route, useRouteMatch } from 'react-router-dom';
 import Profile from '../Components/Public/Profile.js'
+import MemberProfile from '../Pages/MemberProfile.js'
 
 export default function Public () {
     const { path, url } = useRouteMatch();
-    const { register, handleSubmit } = useForm();
+    const { register: registerSys, handleSubmit: handleSys } = useForm();
 
-    const submitID = (data) => {
+    const submitSysID = (data) => {
         history.push(`${url}/${data.sysID}`);
     }
 
+    const { register: registerMember, handleSubmit: handleMember } = useForm();
+
+    const submitMemberID = (data) => {
+        history.push(`${url}/m/${data.memberID}`);
+    }
+
     return (
 
         <Switch>
         <Route exact path={path}>
-        <BS.Card>
+        <BS.Card className="mb-3">
             <BS.Card.Header>
             <BS.Card.Title><FaStar className="mr-3" />Profile</BS.Card.Title>
             </BS.Card.Header>
             <BS.Card.Body>
-                <BS.Form onSubmit={handleSubmit(submitID)}>
+                <BS.Form onSubmit={handleSys(submitSysID)}>
                     <BS.Form.Label>
-                        Submit a system ID to view to that system's profile.
+                        Submit a <b>system ID</b> to view to that system's profile.
                     </BS.Form.Label>
                     <BS.Form.Row>
                         <BS.Col className="mb-1"  xs={12} lg={10}>
-                            <BS.Form.Control name="sysID" {...register("sysID")} defaultValue="" />
+                            <BS.Form.Control name="sysID" {...registerSys("sysID")} defaultValue="" placeholder="Enter system ID here..."/>
+                        </BS.Col>
+                        <BS.Col>
+                            <BS.Button variant="primary" type="submit" block >Submit</BS.Button>
+                        </BS.Col>
+                    </BS.Form.Row>
+                </BS.Form>
+            </BS.Card.Body>
+        </BS.Card>
+        <BS.Card>
+            <BS.Card.Body>
+                <BS.Form onSubmit={handleMember(submitMemberID)}>
+                    <BS.Form.Label>
+                        Alternatively, submit a <b>member ID</b> to view that member.
+                    </BS.Form.Label>
+                    <BS.Form.Row>
+                        <BS.Col className="mb-1"  xs={12} lg={10}>
+                            <BS.Form.Control name="memberID" {...registerMember("memberID")} defaultValue="" placeholder="Enter member ID here..." />
                         </BS.Col>
                         <BS.Col>
                             <BS.Button variant="primary" type="submit" block >Submit</BS.Button>
@@ -39,9 +63,12 @@ export default function Public () {
             </BS.Card.Body>
         </BS.Card>
         </Route>
+        <Route path={`${path}/m/:memberID`}>
+            <MemberProfile />
+        </Route>
         <Route path={`${path}/:sysID`}>
             <Profile />
-              </Route>
+        </Route>
         </Switch>
     )
 }