refactor decorators

3 files changed, 30 insertions, 29 deletions

diff --git a/Makefile b/Makefile
index 7ce24d6..c1a1e18 100644
--- a/Makefile
+++ b/Makefile
@@ -1,22 +1,27 @@
-run:
+.DEFAULT_GOAL := help
+
+help: ## Show all Makefile targets
+	@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}'
+
+run: ## Start backend
 	cd backend && go run .
-lint:
+lint: ## Lint backend
 	cd backend && golangci-lint run
-docker-build:
+docker-build: ## Docker build backend
 	docker build -t jzhao2k19/ctrl-v:latest ./backend
-docker-run: docker-build
+docker-run: docker-build ## Start dockerized backend
 	docker run -p 8080:8080 jzhao2k19/ctrl-v:latest
-gcr: docker-build
+gcr: docker-build ## Push to GCR
 	docker tag jzhao2k19/ctrl-v:latest gcr.io/ctrl-v-278404/backend && docker push gcr.io/ctrl-v-278404/backend
-docker-push:
+docker-push: ## Push to Docker Hub
 	docker push jzhao2k19/ctrl-v:latest
-fe-run:
+fe-run: ## Start Frontend
 	cd frontend && yarn start
-fe-build:
+fe-build: ## Productionize Frontend
 	cd frontend && yarn build
-fe-deploy: fe-build
+fe-deploy: fe-build ## Deploy frontend to Firebase
 	cd frontend && firebase deploy
-dev:
+dev: ## Start backend and frontend
 	make -j 2 run fe-run
-deploy:
+deploy: ## Deploy backend and frontend
 	gcr && fe-deploy
\ No newline at end of file
diff --git a/frontend/src/components/decorators/CharLimit.js b/frontend/src/components/decorators/CharLimit.js
index 623b378..5a6fdca 100644
--- a/frontend/src/components/decorators/CharLimit.js
+++ b/frontend/src/components/decorators/CharLimit.js
@@ -26,12 +26,10 @@ const Chars = styled.p`
     `};
 `;
 
-class CharLimit extends React.Component {
-    render() {
-        return (
-            <Chars {...this.props} >{this.props.maxLength - this.props.content.length}/{this.props.maxLength}</Chars>
-        );
-    }
+const CharLimit = (props) => {
+    return (
+        <Chars {...props} >{props.maxLength - props.content.length}/{props.maxLength}</Chars>
+    );
 }
 
 export default CharLimit
\ No newline at end of file
diff --git a/frontend/src/components/decorators/FloatingLabel.js b/frontend/src/components/decorators/FloatingLabel.js
index e1fc0ba..ef56b44 100644
--- a/frontend/src/components/decorators/FloatingLabel.js
+++ b/frontend/src/components/decorators/FloatingLabel.js
@@ -17,18 +17,16 @@ const StyledLabel = styled.label`
     `};
 `
 
-class FloatingLabel extends React.Component {
-    render() {
-        return (
-            <StyledLabel 
-                label={this.props.label}
-                value={this.props.value}
-                className={this.props.id}
-                htmlFor={this.props.id}>
-                    {this.props.label}
-            </StyledLabel>
-        );
-    }
+const FloatingLabel = (props) => {
+    return (
+        <StyledLabel 
+            label={props.label}
+            value={props.value}
+            className={props.id}
+            htmlFor={props.id}>
+                {props.label}
+        </StyledLabel>
+    );
 }
 
 export default FloatingLabel
\ No newline at end of file