Merge pull request #8 from purshink/master

mobile dev opt

Author: purshink

Hobbie_fullstack/react-frontend/.github/workflows/main.yml

@@ -0,0 +1,46 @@
+# This is a basic workflow to help you get started with Actions
+
+name: DEPLOY REACT APP
+
+# Controls when the workflow will run
+on:
+ # Triggers the workflow on push request events but only for the main branch
+ push:
+ branches: [ main ]
+
+ # Allows you to run this workflow manually from the Actions tab
+ workflow_dispatch:
+ inputs:
+ job_name:
+ description: "Run Job"
+ required: true
+ default: 'build_deploy'
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+ # This workflow contains a single job called "build"
+ build_deploy:
+ # The type of runner that the job will run on
+ runs-on: ubuntu-latest
+
+ # Steps represent a sequence of tasks that will be executed as part of the job
+ steps:
+ # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+ - uses: actions/checkout@v2
+
+ # Runs a single command using the runners shell
+ - name: Npm Install Packages
+ run: npm install
+ 
+ - name: Test and Code Coverage
+ run: npm test -- --coverage
+ 
+ - name: Upload Code Coverage
+ uses: codecov/codecov-action@v1
+ with:
+ token: ${{ secrets.CODECOV_TOKEN }}
+ 
+ - name: Build Package
+ env:
+ CI: false
+ run: npm run build

Hobbie_fullstack/react-frontend/src/App.css

@@ -4,7 +4,6 @@
  font-family: "Poppins", sans-serif;
  border: 1px solid transparent;
  padding-bottom: 20px;
- height: 100%;
 }
 #root {
  height: 100%;
@@ -36,7 +35,7 @@ h3 {
 }
 
 form {
- width: 50%;
+ /* width: 50%; */
  border: none;
  margin-top: 20px;
 }

Hobbie_fullstack/react-frontend/src/components/root/home/Home.jsx

@@ -2,17 +2,19 @@ import React from "react";
 import BackgroundCover from "./BackgroundCover";
 import Presentation from "./Presentation";
 import Cover from "./Cover";
-import  Footer from "../fragments/footer/Footer";
+import Footer from "../fragments/footer/Footer";
 import style from "../../../css/Footer.module.css";
 
 const Home = () => {
  return (
- <main>
- <Presentation />
- <Cover />
- <Footer class={style.footer_cover}/>
- <BackgroundCover />
- </main>
+ <>
+ <main>
+ <Presentation />
+ <Cover />
+ <BackgroundCover />
+ </main>
+ <Footer class={style.footer_cover} />
+ </>
  );
 };
 

Hobbie_fullstack/react-frontend/src/components/root/users/UsersHome.jsx

@@ -102,7 +102,7 @@ const UserHome = () => {
  <div className={styles.intro_text}>
  {isUserLoggedIn && (
  <div>
- <p>You have no hobby matches.</p>
+ <p className={styles.intro}>You have no hobby matches.</p>
  <div className={styles.buttuns}>
  <button className={styles.link}>
  <Link to="/test" className={styles.btn}>
@@ -114,7 +114,7 @@ const UserHome = () => {
  )}
  {isBusinessLoggedIn && (
  <div>
- <p>You have no hobby offers.</p>
+ <p className={styles.intro}>You have no hobby offers.</p>
  <div className={styles.buttuns}>
  <button className={styles.link}>
  <Link to="/create-offer" className={styles.btn}>

Hobbie_fullstack/react-frontend/src/components/root/users/business/AccountBusiness/AccountBusiness.jsx

@@ -93,14 +93,14 @@ const AccountBusiness = () => {
  onClick={handleDelete(business)}
  className={styles.account_btn}
  >
- Delete profile
+ Delete
  </Link>
  <Link
  to="#"
  onClick={handleEdit(business)}
  className={styles.account_btn}
  >
- Edit profile
+ Edit
  </Link>
  </article>
  </div>

Hobbie_fullstack/react-frontend/src/components/root/users/business/AccountBusiness/EditBusinessProfile.jsx

@@ -7,10 +7,12 @@ import UpdateBusinessDataService from "../../../../../api/users/UpdateBusinessDa
 import styles from "../../../../../css/Forms.module.css";
 import style from "../../../../../css/Footer.module.css";
 import { useLocation } from "react-router-dom";
+import LoadingDots from "../Offer/animation/LoadingDots";
 
 const EditBusinessProfile = () => {
  const navigate = useNavigate();
  const location = useLocation();
+ const [loading, setLoading] = useState(false);
 
  const [error, setError] = useState(false);
  const [info, setInfo] = useState({
@@ -56,6 +58,7 @@ const EditBusinessProfile = () => {
 
  if (Object.keys(errors).length === 0) {
  console.log(info);
+ setLoading(true);
  await UpdateBusinessDataService(info)
  .then((response) => {
  if (response.status === 201) {
@@ -145,13 +148,17 @@ const EditBusinessProfile = () => {
  </section>
 
  <article className={styles.form_field}>
- <button type="submit" className={styles.button}>
- Save
- </button>
+ {loading && <LoadingDots />}
+
+ {!loading && (
+ <button type="submit" className={styles.button}>
+ Save
+ </button>
+ )}
  </article>
  </form>
  </main>
- <Footer class={style.footer_cover} />
+ <Footer class={style.footer} />
  <Background />
  </>
  );

Hobbie_fullstack/react-frontend/src/components/root/users/business/Offer/CreateOffer.jsx

@@ -60,16 +60,14 @@ const CreateOffer = () => {
 
  if (!info.intro) {
  errors.intro = "Intro is required";
- }
- else if (info.intro.length > 900 ) {
- errors.intro = "Text has to be maximum 900 characters long"
+ } else if (info.intro.length > 900) {
+ errors.intro = "Text has to be maximum 900 characters long";
  }
 
  if (!info.description) {
  errors.description = "Description is required";
- }
- else if (info.description.length > 900) {
- errors.description = "Text has to be maximum 900 characters long"
+ } else if (info.description.length > 900) {
+ errors.description = "Text has to be maximum 900 characters long";
  }
 
  if (!info.price) {
@@ -91,9 +89,8 @@ const CreateOffer = () => {
 
  if (!info.contactInfo) {
  errors.contactInfo = "Contact info is required";
- }
- else if (info.contactInfo.length < 20 || info.contactInfo.length > 900) {
- errors.contactInfo = "Text has to be between 20 and 900 characters long"
+ } else if (info.contactInfo.length < 20 || info.contactInfo.length > 900) {
+ errors.contactInfo = "Text has to be between 20 and 900 characters long";
  }
  return errors;
  };
@@ -228,7 +225,12 @@ const CreateOffer = () => {
  label="Intro"
  name="intro"
  error={errors.intro}
- onChange={(e) => setInfo({ ...info, intro: e.target.value.replace(/\n\r?/g, "\n") })}
+ onChange={(e) =>
+ setInfo({
+ ...info,
+ intro: e.target.value.replace(/\n\r?/g, "\n"),
+ })
+ }
  />
 
  <OfferTextaria
@@ -355,7 +357,7 @@ const CreateOffer = () => {
  </form>
  </main>
 
- <Footer class={style.footer_hobbie_details}/>
+ <Footer class={style.footer_hobbie_details} />
  </>
  );
 };