added host config to automatically use origin as hostname.

For development, auto needs to be disabled
renamed host config file

Signed-off-by: Raul Kele <raulkeleblk@gmail.com>

src/components/Explore.jsx

@@ -12,7 +12,7 @@ import makeStyles from '@mui/styles/makeStyles';
 
 // utility
 import {api, endpoints} from '../api';
-import {host} from '../constants';
+import {host} from '../host';
 import {isEmpty} from 'lodash';
 import FilterCard from './FilterCard.jsx';
 //
@@ -45,7 +45,7 @@ function Explore ({ keywords, data, updateData }) {
     const classes = useStyles();
 
     useEffect(() => {
-        api.get(`${host}${endpoints.imageList}`)
+        api.get(`${host()}${endpoints.imageList}`)
           .then(response => {
             if (response.data && response.data.data) {
                 let imageList = response.data.data.ImageListWithLatestTag;

src/components/Home.jsx

@@ -1,7 +1,7 @@
 import { Grid, Stack, Typography } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 import { api, endpoints } from 'api';
-import { host } from '../constants';
+import { host } from '../host';
 import {isEmpty} from 'lodash';
 import React, { useEffect, useState } from 'react';
 import PreviewCard from './PreviewCard';
@@ -54,7 +54,7 @@ function Home ({ keywords, data, updateData }) {
   const classes = useStyles();
 
   useEffect(() => {
-    api.get(`${host}${endpoints.imageList}`)
+    api.get(`${host()}${endpoints.imageList}`)
       .then(response => {
         if (response.data && response.data.data) {
             let imageList = response.data.data.ImageListWithLatestTag;

src/components/RepoDetails.jsx

@@ -10,7 +10,7 @@ import mockData from '../utilities/mockData';
 import Tags from './Tags.jsx'
 import {Box, Card, CardContent, CardMedia, Chip, FormControl, Grid, IconButton, InputAdornment, OutlinedInput, Stack, Tab, Typography} from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
-import { host } from '../constants';
+import { host } from '../host';
 import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutlineOutlined';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import BookmarkIcon from '@mui/icons-material/Bookmark';
@@ -115,7 +115,7 @@ function RepoDetails (props) {
   const {description, overviewTitle, dependencies, dependents} = props;
 
   useEffect(() => {
-      api.get(`${host}${endpoints.detailedRepoInfo(name)}`)
+      api.get(`${host()}${endpoints.detailedRepoInfo(name)}`)
         .then(response => {
           if (response.data && response.data.data) {
               let imageList = response.data.data.ExpandedRepoInfo;

src/components/SignIn.jsx

@@ -1,7 +1,7 @@
 // react global
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from "react-router-dom";
-import { host } from '../constants';
+import { host } from '../host';
 // utility
 import { api, endpoints } from '../api';
 
@@ -73,7 +73,7 @@ export default function SignIn({ isAuthEnabled, setIsAuthEnabled, isLoggedIn, se
     if (isAuthEnabled && isLoggedIn) {
       navigate("/home");
     } else {
-      api.get(`${host}/v2/`)
+      api.get(`${host()}/v2/`)
         .then(response => {
           if (response.status === 200) {
             setIsAuthEnabled(false);
@@ -99,7 +99,7 @@ export default function SignIn({ isAuthEnabled, setIsAuthEnabled, isLoggedIn, se
         }
       };
     }
-    api.get(`${host}${endpoints.imageList}`, cfg)
+    api.get(`${host()}${endpoints.imageList}`, cfg)
       .then(response => {
         if (response.data && response.data.data) {
           if (isAuthEnabled) {

src/constants.js

@@ -1,3 +0,0 @@
-const host = 'http://localhost:5000'
-
-export {host};

src/host.js

@@ -0,0 +1,15 @@
+const hostConfig = {
+  auto:false, 
+  default:'http://localhost:5000'
+}
+
+const host = (manualHost = null) => {
+  if (hostConfig.auto) {
+    return window.location.origin;
+  } else if (manualHost) {
+    return manualHost;
+  }
+  return hostConfig.default;
+}
+
+export {host};