refactored to work on codio

src/components/account.js

@@ -23,7 +23,6 @@ function Account(props) {
   if (!profile.username) {
     let headers = new Headers();
     headers.append('Authorization', user.Authorization);
-
     fetch(user.links.self, {headers:headers})
     .then(status)
     .then(json)

src/components/adddog.js

@@ -27,10 +27,10 @@ class AddDog extends React.Component{
         console.log(values)
         values.authorID=this.context.user.ID
         if(values.imageURL){
-            values.imageURL=values.imageURL.file.response.links.path
+            values.imageURL="https://melody-annex-3000.codio-box.uk"+values.imageURL.file.response.links.path
         }
         const { confirm, ...data } = values;
-        fetch(`http://localhost:3000/api/v1/dogs/`, {
+        fetch(`https://melody-annex-3000.codio-box.uk/api/v1/dogs/`, {
             method: "POST",
             body: JSON.stringify(data),
             headers: {
@@ -58,7 +58,7 @@ class AddDog extends React.Component{
         }
         const uploadProps = {
             name: 'upload',
-            action: 'http://localhost:3000/api/v1/images',
+            action: 'https://melody-annex-3000.codio-box.uk/api/v1/images',
             headers: {
               authorization: this.context.user.Authorization
             },

src/components/deletedog.js

@@ -18,7 +18,7 @@ class DeleteDog extends React.Component{
             );
         }
         const id = this.props.match.params.id;
-        fetch(`http://localhost:3000/api/v1/dogs/${id}`, {
+        fetch(`https://melody-annex-3000.codio-box.uk/api/v1/dogs/${id}`, {
             method: "DELETE",
             headers: {
                 "Authorization": this.context.user.Authorization,

src/components/doggrid.js

@@ -15,7 +15,7 @@ class BlogGrid extends React.Component {
 
 
   componentDidMount() {
-    fetch('http://localhost:3000/api/v1/dogs')
+    fetch('https://melody-annex-3000.codio-box.uk/api/v1/dogs')
     .then(status)
     .then(json)
     .then(data=>{

src/components/dogs.js

@@ -10,7 +10,7 @@ function Dogs(props) {
     const context = useContext(UserContext);
 
     if (!dog.Name) {
-        fetch(`http://localhost:3000/api/v1/dogs/${id}`)
+        fetch(`https://melody-annex-3000.codio-box.uk/api/v1/dogs/${id}`)
         .then(status)
         .then(json)
         .then(data => {
@@ -19,24 +19,32 @@ function Dogs(props) {
         })
         .catch(err => console.error(err));
     }  
-
-    if(context.user.role!=='admin'){
-        return ( 
-            <> 
-                <h1>Dog ID: {id}</h1> 
-                {Object.keys(dog).map(key => <li key={key}>{key}: {dog[key]}</li>)}
-                <button><Link to ={{pathname: `/message/${id}`,state:{data:dog}}} >Message us</Link></button>
-            </> 
-        );
-    } else {
-        return ( 
-            <> 
-                <h1>Dog ID: {id}</h1> 
-                {Object.keys(dog).map(key => <li key={key}>{key}: {dog[key]}</li>)}
-                <button><Link to ={`/editdog/${id}`}>Edit</Link></button>
-                <button><Link to ={`/deletedog/${id}`}>Delete</Link></button>
-            </> 
-        );
+    if(!context.user.loggedIn){
+      return ( 
+              <> 
+                  <h1>Dog ID: {id}</h1> 
+                  {Object.keys(dog).map(key => <li key={key}>{key}: {dog[key]}</li>)}
+              </> 
+          );
+    }else{
+      if(context.user.role!=='admin'){
+          return ( 
+              <> 
+                  <h1>Dog ID: {id}</h1> 
+                  {Object.keys(dog).map(key => <li key={key}>{key}: {dog[key]}</li>)}
+                  <button><Link to ={{pathname: `/message/${id}`,state:{data:dog}}} >Message us</Link></button>
+              </> 
+          );
+      } else {
+          return ( 
+              <> 
+                  <h1>Dog ID: {id}</h1> 
+                  {Object.keys(dog).map(key => <li key={key}>{key}: {dog[key]}</li>)}
+                  <button><Link to ={`/editdog/${id}`}>Edit</Link></button>
+                  <button><Link to ={`/deletedog/${id}`}>Delete</Link></button>
+              </> 
+          );
+      }
     }
 }
 

src/components/editdog.js

@@ -29,10 +29,10 @@ class EditDog extends React.Component{
         console.log(values)
         values.authorID=this.context.user.ID
         if(values.imageURL){
-            values.imageURL=`http://localhost:3000${values.imageURL.file.response.links.path}`
+            values.imageURL=`https://melody-annex-3000.codio-box.uk${values.imageURL.file.response.links.path}`
         }
         const { confirm, ...data } = values;
-        fetch(`http://localhost:3000/api/v1/dogs/${id}`, {
+        fetch(`https://melody-annex-3000.codio-box.uk/api/v1/dogs/${id}`, {
             method: "PUT",
             body: JSON.stringify(data),
             headers: {
@@ -60,7 +60,7 @@ class EditDog extends React.Component{
         }
         const uploadProps = {
             name: 'upload',
-            action: 'http://localhost:3000/api/v1/images',
+            action: 'https://melody-annex-3000.codio-box.uk/api/v1/images',
             headers: {
               authorization: this.context.user.Authorization
             },

src/components/favourite.js

@@ -17,7 +17,7 @@ class Favourite extends React.Component {
   static contextType = UserContext;
 
   componentDidMount() {
-    fetch('http://localhost:3000/api/v1/dogs')
+    fetch('https://melody-annex-3000.codio-box.uk/api/v1/dogs')
     .then(status)
     .then(json)
     .then(data=>{
@@ -28,7 +28,7 @@ class Favourite extends React.Component {
 
     let headers = new Headers();
     headers.append('Authorization', this.context.user.Authorization);
-    fetch(`http://localhost:3000/api/v1/dogs/favourite`, {
+    fetch(`https://melody-annex-3000.codio-box.uk/api/v1/dogs/favourite`, {
       headers:headers
   })
     .then(status)

src/components/loginform.js

@@ -39,7 +39,7 @@ class LoginForm extends React.Component {
     login(values){
         const { username, password} = values;
         console.log(`logging in user: ${username}`)
-        fetch('http://localhost:3000/api/v1/users/login', {
+        fetch('https://melody-annex-3000.codio-box.uk/api/v1/users/login', {
             method: "POST",
             headers: {
                 "Authorization": "Basic " + btoa(username + ":" + password)

src/components/message.js

@@ -26,7 +26,7 @@ class Message extends React.Component{
         console.log(values)
         values.recieverID=this.props.location.state.data.authorID
         const { confirm, ...data } = values;
-        fetch(`http://localhost:3000/api/v1/dogs/${this.props.location.state.data.ID}/message`, {
+        fetch(`https://melody-annex-3000.codio-box.uk/api/v1/dogs/${this.props.location.state.data.ID}/message`, {
             method: "POST",
             body: JSON.stringify(data),
             headers: {

src/components/messages.js

@@ -16,7 +16,7 @@ class Messages extends React.Component{
     static contextType = UserContext;
 
     componentDidMount(){
-        fetch(`http://localhost:3000/api/v1/message`, {
+        fetch(`https://melody-annex-3000.codio-box.uk/api/v1/message`, {
             headers: {
                 "Authorization": this.context.user.Authorization,
             }
@@ -34,7 +34,7 @@ class Messages extends React.Component{
         });
 
 
-        fetch(`http://localhost:3000/api/v1/message/${this.context.user.ID}`, {
+        fetch(`https://melody-annex-3000.codio-box.uk/api/v1/message/${this.context.user.ID}`, {
             headers: {
                 "Authorization": this.context.user.Authorization,
             }
@@ -56,7 +56,7 @@ class Messages extends React.Component{
 
 
     delete(ID){
-        fetch(`http://localhost:3000/api/v1/message/${ID}`, {
+        fetch(`https://melody-annex-3000.codio-box.uk/api/v1/message/${ID}`, {
             method: "DELETE",
             headers: {
                 "Authorization": this.context.user.Authorization,

src/components/registrationform.js

@@ -53,7 +53,7 @@ class RegistrationForm extends React.Component {
     onFinish = (values) => {
         console.log(values);
         const { confirm, ...data } = values; // ignore the 'confirm' value
-        fetch('http://localhost:3000/api/v1/users', {
+        fetch('https://melody-annex-3000.codio-box.uk/api/v1/users', {
             method: "POST",
             body: JSON.stringify(data),
             headers: {

src/components/reply.js

@@ -26,7 +26,7 @@ class Reply extends React.Component{
         console.log(values)
         console.log(this.props.location.state.data)
         const { confirm, ...data } = values;
-        fetch(`http://localhost:3000/api/v1/message/${this.props.location.state.data}`, {
+        fetch(`https://melody-annex-3000.codio-box.uk/api/v1/message/${this.props.location.state.data}`, {
             method: "POST",
             body: JSON.stringify(data),
             headers: {