DEV Community: jagarkin

upload image file into a HasMany relation model

jagarkin — Sun, 09 May 2021 18:01:38 +0000

hello i am using laravel 8, i have a product and image table and i want to be able to upload 3 images with each product

product model*

class Product extends Model implements Auditable
{
    use HasFactory, AuditableTrait;

    const FILLABLE = ['name','price','description'];
    protected $fillable = ['name','price','description'];

    public function images()
    {
        return $this->hasMany(Image::class, 'id');
    }
}

product migration

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateProductsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->double('price');
            $table->text('description');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('products');
    }
}

image model

class Image extends Model
{
    use HasFactory;

    protected $fillable = ['product_id', 'file_path'];

}

image migration

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateImagesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('images', function (Blueprint $table) {
            $table->id();
            $table->foreignId('product_id')->constrained();
            $table->string('file_path');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('images');
    }
}

and this the methode inside my product controller that supposed to store data

public function store(Request $request)
    {
        $product = Product::create($request->only('name','price','description'));
        if($images = $request->file('images')){
            foreach($images as $image){
                $image->store('product','public');
                Image::create([
                    'product_id' => $product->id,
                    'file_path' => $image->hashName()
                ]); 
            }
        }
        return $product;
    }

when i test this method with postman i was able to store data into product
but the image table stays empty it did not receive any data
any help please!

Happy New Year Developer

jagarkin — Thu, 31 Dec 2020 19:31:22 +0000

so this year has been rough for everyone and I wanted to wish you a happy new year in a stylish way



const sendNewYearWishes = ( message = 'Happy new Year' ) => {
     console.log(`${message}`)
}
sendNewYearWishes();

to sum this up this year to me was unlike any other year - I used to pandemic and lack of school session to improve my coding skills as last year I was hit by the reality of what a coder should have.

I improved my JavaScript skills and learned React on top of Angular 2.0 and now I am learning TypeScript

as for Backend I learned Express and Spring Boots and mobile Android and React Native

I also took interest in AI from computer Vision to Machine learning and currently working on a project with NLP

small steps due I want to focus on one thing and get good at it while maintaining a good regime for my uni studies

I made a lot of project

Todo app
E commerce ( still not complete )
Computer vision Sudoku Solver with backtracking algorithm
My own Portfolio
Java mail manager you can check them all in my Github Repos

I see this as a big progress when I compare my first website to what I'm capable of now so thanks to everyone played a role in my improvement as I was to prove myself in some of freelance job I had

also I sat a goal this year to have more presence on the Internet and Contribute more and more to open Source.
you'll find me under the username { Jagarkin }.

I just made a Buy Me a Coffee account and I'll appreciate it If you help me even a little

Firebase auth with React

jagarkin — Wed, 23 Dec 2020 19:43:58 +0000

hello today I'll be talking on how I build a simple yet minimalistic to do app with react and firebase your see the app here devdo I will be highlighting the most important stuff feel free to check the code for more.

let's start by installing our dependencies

npm install react-icons --save
npm install --save styled-components
npm install react-tabs
npm i firebase

this is the tree for the code

I started by creating a router with three component:

Log in
Sign UP
Reset Password
Dashboard
Update Profiles

then I initialized the firebase SDK in in the Firebase.js folder I left the config in the code as it was only for testing

import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/auth";

const app = firebase.initializeApp({
  apiKey: "Xxxx Xxxx Xxxx Xxxx Xxxx",
  authDomain: "Xxxx.firebaseapp.com",
  projectId: "Xxxx",
  storageBucket: "Xxxx Xxxx.appspot.com",
  messagingSenderId: "Xxxx Xxxx ",
  appId: "Xxxx Xxxx Xxxx Xxxx Xxxx"
});

export const auth = app.auth();
export const useFireStore = firebase.firestore();

export default app;

don't forgert to activate our auth methode from the firebase console in our case it's only email and password

create an AuthProvider so that we have firebase auth on top

import React, { useContext, useEffect, useState } from "react";
import { auth } from "./Firebase";

const AuthContext = React.createContext();

export function useAuth() {
  return useContext(AuthContext);
}

export default function AuthProvider({ children }) {
  const [loading, setLoading] = useState(true);
  const [currentUser, setCurrentUser] = useState();

  const signup = (email, password) => {
    return auth.createUserWithEmailAndPassword(email, password);
  };

  const login = (email, password) => {
    return auth.signInWithEmailAndPassword(email, password);
  };

  const logout = () => {
    return auth.signOut();
  };

  const resetPassword = email => {
    return auth.sendPasswordResetEmail(email);
  };

  const updateEmail = email => {
    return auth.updateEmail(email);
  };

  const updatePassword = password => {
    return currentUser.updatePassword(password);
  };

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(user => {
      setCurrentUser(user);
      setLoading(false);
    });
    return unsubscribe;
  }, []);

  const value = {
    currentUser,
    signup,
    login,
    logout,
    resetPassword,
    updateEmail,
    updatePassword
  };

  return (
    <AuthContext.Provider value={value}>
      {!loading && children}
    </AuthContext.Provider>
  );
}

then we need a protected route to prevent non logged users to access certain component

import React from "react";
import { Redirect, Route } from "react-router-dom";
import { useAuth } from "../utils/AuthContext";

const PrivateRoute = ({ component: Component, ...rest }) => {
  const { currentUser } = useAuth();

  return (
    <>
      <Route
        {...rest}
        render={props => {
          return currentUser ? (
            <Component {...props} />
          ) : (
            <Redirect to='/login' />
          );
        }}></Route>
    </>
  );
};

export default PrivateRoute;

then in our App.js we create our routing as you'll notice that we wrapped everything in an app provider

import Login from "./components/services/Login";
import Signup from "./components/services/Signup";
import Dashboard from "./components/pages/Dashboard";
import PrivateRoute from "./components/utils/PrivateRoute";
import AuthProvider from "./components/utils/AuthContext";
import UpdateProfile from "./components/services/UpdateProfile";
import ForgotPassword from "./components/services/ForgotPassword";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

function App() {
  return (
    <>
      <AuthProvider>
        <Router>
          <Switch>
            <PrivateRoute exact path='/' component={Dashboard} />
            <PrivateRoute path='/update-profile' component={UpdateProfile} />
            <Route path='/signup' component={Signup} />
            <Route path='/login' component={Login} />
            <Route path='/forgot-password' component={ForgotPassword} />
          </Switch>
        </Router>
      </AuthProvider>
    </>
  );
}

export default App;

now after creating our auth service let's hover on something and it's how each user will have it's own data ? it's easy our collection will be the same uid of the currentUser and we need subcollection beceause we have different sections for the notes taken
in Input.js should be an async methode like this

const nametRef = useRef();
  const textRef = useRef();

  const { currentUser } = useAuth();
  const [error, setError] = useState("");

  const pushData = async e => {
    e.preventDefault();

    if (nametRef.current.value === "" && textRef.current.value === "") {
      setError("take note");
    } else {
      setError("");
      try {
        return await useFireStore
          .collection(`${currentUser.uid}`)
          .doc("socket")
          .collection(`${docs}`)
          .add({
            noteName: nametRef.current.value,
            contentNote: textRef.current.value,
            createdAt: firebase.firestore.FieldValue.serverTimestamp()
          });
      } catch {
        setError("please verify your connection");
      }
    }
  };

it goes the same for fetching data from the firestore as we saved the name of our collection with the same current user id
note that our methode must be async so it will always listen to the change from the server side

const { currentUser } = useAuth();
  const [error, setError] = useState("");
  const [sockets, setSockets] = useState([]);

  const pullData = async () => {
    return await useFireStore
      .collection(`${currentUser.uid}`)
      .doc("socket")
      .collection(`${docus}`)
      .orderBy("createdAt", "desc")
      .onSnapshot(snapshot => {
        const data = snapshot.docs.map(doc => ({
          id: doc.id,
          ...doc.data()
        }));
        data.length === 0 ? setError("no notes yet") : setError("");
        setSockets(data);
      });
  };

  useEffect(() => {
    // we use pull effect to ovoid memory leak
    pullData();
  }, []);

and to delete a document in the jsx we add this code

{sockets.map((socket, index) => {
          return (
            <Fetched key={index}>
              <Div>
                <Text>{socket.noteName}</Text>
                <Disc>{socket.contentNote}</Disc>
              </Div>

              <Delete
                onClick={() => {
                  useFireStore
                    .collection(`${currentUser.uid}`)
                    .doc("socket")
                    .collection(`${docus}`)
                    .doc(`${socket.id}`)
                    .delete();
                }}
              />
            </Fetched>
          );
        })}
        {error && <p>{error}</p>}

and voila like that we have a fully functioning to do app with auth and each user have the abilty to see it's own data and delete it
PS: code it not fully explained as I said on top, I am highlighting the important thing i did to make it fully function

How I Built my portfolio

jagarkin — Thu, 03 Dec 2020 09:25:56 +0000

I am a Student who used to code in Angular but since Angular 9 has been released I switched to Reactjs and was so passionate about coding in react.
Today I present my portfolio which you can check here walees.

I used Styled-Components for styling React component systems
Implementation of Dark Mode and useLocalStorage Hook so dark mode will be saved in browser
React-plx and React-Reveal for some fancy animation
Netlify for hosting

this is my portfolio's repo I am keeping it public Github so people can contribute and help me improve it