add member-only public pages

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;