diff --git a/README.md b/README.md
index e760b06..2ff20da 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Crabfit
+# Crabfit
Align your schedules to find the perfect time that works for everyone.
@@ -8,3 +8,13 @@ Align your schedules to find the perfect time that works for everyone.
2. Run `yarn` in both folders.
3. Run `node index.js` in the backend folder to start the API.
4. Run `yarn start` in the frontend folder to start the front end.
+
+## Deploy
+
+### Frontend
+1. In the frontend folder `cd crabfit-frontend`
+2. Run `./deploy.sh` to compile and deploy.
+
+### Backend
+1. Deploy the backend `cd crabfit-backend && gcloud app deploy --project=crabfit`
+2. Deploy the endpoints service `cd crabfit-backend && gcloud endpoints services deploy swagger.yaml`
diff --git a/crabfit-backend/index.js b/crabfit-backend/index.js
index e53d03b..9100ca9 100644
--- a/crabfit-backend/index.js
+++ b/crabfit-backend/index.js
@@ -22,7 +22,7 @@ const datastore = new Datastore({
});
app.use(cors({
- origin: 'http://localhost:3000',
+ origin: process.env.NODE_ENV === 'production' ? 'https://crab.fit' : 'http://localhost:3000',
}));
app.use(express.json());
app.use((req, res, next) => {
diff --git a/crabfit-frontend/public/index.html b/crabfit-frontend/public/index.html
index 11686e0..3b7827a 100644
--- a/crabfit-frontend/public/index.html
+++ b/crabfit-frontend/public/index.html
@@ -1,23 +1,31 @@
-
-
-
-
+
+
+
+
+
-
-
+ content="Enter your availability to find a time that works for everyone!"
+ >
+
+
-
+
+
+
+
+
Crab Fit
-
+
diff --git a/crabfit-frontend/src/App.tsx b/crabfit-frontend/src/App.tsx
index 10331af..28cb828 100644
--- a/crabfit-frontend/src/App.tsx
+++ b/crabfit-frontend/src/App.tsx
@@ -22,7 +22,7 @@ const App = () => {
return (
-
+ {process.env.NODE_ENV !== 'production' && }
({
html: {
@@ -38,6 +38,25 @@ const App = () => {
a: {
color: theme.primary,
},
+ '*::-webkit-scrollbar': {
+ width: 16,
+ height: 16,
+ },
+ '*::-webkit-scrollbar-track': {
+ background: `${theme.primaryBackground}`,
+ },
+ '*::-webkit-scrollbar-thumb': {
+ borderRadius: 100,
+ border: `4px solid ${theme.primaryBackground}`,
+ width: 12,
+ background: `${theme.primaryLight}AA`,
+ },
+ '*::-webkit-scrollbar-thumb:hover': {
+ background: `${theme.primaryLight}CC`,
+ },
+ '*::-webkit-scrollbar-thumb:active': {
+ background: `${theme.primaryLight}`,
+ },
})}
/>
diff --git a/crabfit-frontend/src/components/SelectField/SelectField.tsx b/crabfit-frontend/src/components/SelectField/SelectField.tsx
index afe6fcb..be2079c 100644
--- a/crabfit-frontend/src/components/SelectField/SelectField.tsx
+++ b/crabfit-frontend/src/components/SelectField/SelectField.tsx
@@ -11,6 +11,7 @@ const SelectField = ({
id,
options = [],
inline = false,
+ defaultOption,
register,
...props
}) => (
@@ -23,7 +24,7 @@ const SelectField = ({
ref={register}
{...props}
>
-
+ {defaultOption && }
{options.map((value, i) =>
)}
diff --git a/crabfit-frontend/src/pages/Event/Event.tsx b/crabfit-frontend/src/pages/Event/Event.tsx
index f82317d..0f1f2c0 100644
--- a/crabfit-frontend/src/pages/Event/Event.tsx
+++ b/crabfit-frontend/src/pages/Event/Event.tsx
@@ -68,10 +68,10 @@ const Event = (props) => {
setEvent(response.data);
document.title = `${response.data.name} | Crab Fit`;
- setIsLoading(false);
} catch (e) {
console.error(e);
- //TODO: 404
+ } finally {
+ setIsLoading(false);
}
};
@@ -249,137 +249,150 @@ const Event = (props) => {
Create your own
- {event?.name}
- https://crab.fit/{id}
-
- {!!event?.name &&
- <>Copy the link to this page, or share via email.
- }
-
+ {(!!event || isLoading) ? (
+ <>
+ {event?.name}
+ https://crab.fit/{id}
+
+ {!!event?.name &&
+ <>Copy the link to this page, or share via email.
+ }
+
+
+ ) : (
+
+ Event not found
+ Check that the url you entered is correct.
+
+
+
+
+
+
+
+
+ {error && setError(null)}>{error}}
+ These details are only for this event. Use a password to prevent others from changing your availability.
+
+ )}
+
+ setTimezone(event.currentTarget.value)}
+ options={timezones}
+ />
+
+
+
+
+
+ {
+ e.preventDefault();
+ if (user) {
+ setTab('you');
+ }
+ }}
+ selected={tab === 'you'}
+ disabled={!user}
+ title={user ? '' : 'Login to set your availability'}
+ >Your availability
+ {
+ e.preventDefault();
+ setTab('group');
+ }}
+ selected={tab === 'group'}
+ >Group availability
+
+
+
+ {tab === 'group' ? (
+
+
+
+ p.availability.length > 0)}
+ min={min}
+ max={max}
+ />
+
) : (
- <>
-
Sign in to add your availability
-
-
-
-
-
-
-
- {error && setError(null)}>{error}}
- These details are only for this event. Use a password to prevent others from changing your availability.
-
+
+
+
Click and drag the calendar below to set your availabilities
Align your schedules to find the perfect time that works for everyone.
@@ -8,3 +8,13 @@ Align your schedules to find the perfect time that works for everyone.
2. Run `yarn` in both folders.
3. Run `node index.js` in the backend folder to start the API.
4. Run `yarn start` in the frontend folder to start the front end.
+
+## Deploy
+
+### Frontend
+1. In the frontend folder `cd crabfit-frontend`
+2. Run `./deploy.sh` to compile and deploy.
+
+### Backend
+1. Deploy the backend `cd crabfit-backend && gcloud app deploy --project=crabfit`
+2. Deploy the endpoints service `cd crabfit-backend && gcloud endpoints services deploy swagger.yaml`
diff --git a/crabfit-backend/index.js b/crabfit-backend/index.js
index e53d03b..9100ca9 100644
--- a/crabfit-backend/index.js
+++ b/crabfit-backend/index.js
@@ -22,7 +22,7 @@ const datastore = new Datastore({
});
app.use(cors({
- origin: 'http://localhost:3000',
+ origin: process.env.NODE_ENV === 'production' ? 'https://crab.fit' : 'http://localhost:3000',
}));
app.use(express.json());
app.use((req, res, next) => {
diff --git a/crabfit-frontend/public/index.html b/crabfit-frontend/public/index.html
index 11686e0..3b7827a 100644
--- a/crabfit-frontend/public/index.html
+++ b/crabfit-frontend/public/index.html
@@ -1,23 +1,31 @@
-
-
-
-
+
+
+
+
+
-
-
+ content="Enter your availability to find a time that works for everyone!"
+ >
+
+
-
+
+
+
+
+