প্রতিক্রিয়া হুক সহ ফায়ারবেস শ্রোতা

Question

আমি ফায়ারবেস শ্রোতাদের কীভাবে ব্যবহার করব তা জানার চেষ্টা করছি যাতে ক্লাউড ফায়ারস্টোরের ডেটা রিয়েক্ট হুক আপডেটের সাথে সতেজ হয়।

প্রাথমিকভাবে, আমি ফায়ার স্টোর ডেটা পাওয়ার জন্য একটি কম্পোনেন্টডিডমাউন্ট ফাংশন সহ একটি শ্রেণি উপাদান ব্যবহার করে এটি তৈরি করেছি।

this.props.firebase.db
    .collection('users')
    // .doc(this.props.firebase.db.collection('users').doc(this.props.firebase.authUser.uid))
.doc(this.props.firebase.db.collection('users').doc(this.props.authUser.uid))
.get()
.then(doc => {
    this.setState({ name: doc.data().name });
    // loading: false,
  });  
}

পৃষ্ঠাটি আপডেট হওয়ার পরে এটি বিরতি দেয়, তাই আমি শ্রোতাদের কীভাবে প্রতিক্রিয়ার প্রতিক্রিয়াতে স্থানান্তরিত করতে পারি তা নির্ধারণ করার চেষ্টা করছি।

আমি প্রতিক্রিয়া-ফায়ারবেস-হুকস সরঞ্জাম ইনস্টল করেছি - যদিও এটি কার্যকর করতে সক্ষম হবার নির্দেশগুলি কীভাবে পড়ব তা আমি বুঝতে পারি না।

আমার নীচে একটি ফাংশন উপাদান রয়েছে:

import React, { useState, useEffect } from 'react';
import { useDocument } from 'react-firebase-hooks/firestore';

import {
    BrowserRouter as Router,
    Route,
    Link,
    Switch,
    useRouteMatch,
 } from 'react-router-dom';
import * as ROUTES from '../../constants/Routes';
import { compose } from 'recompose';
import { withFirebase } from '../Firebase/Index';
import { AuthUserContext, withAuthorization, withEmailVerification, withAuthentication } from '../Session/Index';

function Dashboard2(authUser) {
    const FirestoreDocument = () => {

        const [value, loading, error] = useDocument(
          Firebase.db.doc(authUser.uid),
          //firebase.db.doc(authUser.uid),
          //firebase.firestore.doc(authUser.uid),
          {
            snapshotListenOptions: { includeMetadataChanges: true },
          }
        );
    return (

        <div>    



                <p>
                    {error && <strong>Error: {JSON.stringify(error)}</strong>}
                    {loading && <span>Document: Loading...</span>}
                    {value && <span>Document: {JSON.stringify(value.data())}</span>}
                </p>




        </div>

    );
  }
}

export default withAuthentication(Dashboard2);

এই উপাদানটি রুট স্তরে কোনও লেখক ব্যবহারকারী মোড়কে নিম্নরূপে আবৃত রয়েছে:

<Route path={ROUTES.DASHBOARD2} render={props => (
          <AuthUserContext.Consumer>
             { authUser => ( 
                <Dashboard2 authUser={authUser} {...props} />  
             )}
          </AuthUserContext.Consumer>
        )} />

আমার কাছে ফায়ারবেস.জেএস ফাইল রয়েছে, যা ফায়ার স্টোরটিতে নিম্নলিখিত হিসাবে প্লাগ হয়:

class Firebase {
  constructor() {
    app.initializeApp(config).firestore();
    /* helpers */
    this.fieldValue = app.firestore.FieldValue;


    /* Firebase APIs */
    this.auth = app.auth();
    this.db = app.firestore();


  }

এটি যখন শ্রোতার লেখক কখন পরিবর্তিত হয় তা জানতে শ্রোতার সংজ্ঞা দেয়:

onAuthUserListener(next, fallback) {
    // onUserDataListener(next, fallback) {
      return this.auth.onAuthStateChanged(authUser => {
        if (authUser) {
          this.user(authUser.uid)
            .get()
            .then(snapshot => {
            let snapshotData = snapshot.data();

            let userData = {
              ...snapshotData, // snapshotData first so it doesn't override information from authUser object
              uid: authUser.uid,
              email: authUser.email,
              emailVerified: authUser.emailVerifed,
              providerData: authUser.providerData
            };

            setTimeout(() => next(userData), 0); // escapes this Promise's error handler
          })

          .catch(err => {
            // TODO: Handle error?
            console.error('An error occured -> ', err.code ? err.code + ': ' + err.message : (err.message || err));
            setTimeout(fallback, 0); // escapes this Promise's error handler
          });

        };
        if (!authUser) {
          // user not logged in, call fallback handler
          fallback();
          return;
        }
    });
  };

তারপরে, আমার ফায়ারবেস প্রসঙ্গ সেটআপে:

import FirebaseContext, { withFirebase } from './Context';
import Firebase from '../../firebase';
export default Firebase;
export { FirebaseContext, withFirebase };

প্রসঙ্গটি নীচে ফায়ারবেস র‍্যাপারের সাথে সেটআপ করা হয়েছে:

import React from 'react';
const FirebaseContext = React.createContext(null);

export const withFirebase = Component => props => (
  <FirebaseContext.Consumer>
    {firebase => <Component {...props} firebase={firebase} />}
  </FirebaseContext.Consumer>
);
export default FirebaseContext;

তারপরে, প্রমাণীকরণের এইচওসি সহ আমার সাথে আমার একটি প্রসঙ্গ সরবরাহকারী রয়েছে:

import React from 'react';
import { AuthUserContext } from '../Session/Index';
import { withFirebase } from '../Firebase/Index';

const withAuthentication = Component => {
  class WithAuthentication extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        authUser: null,
      };  
    }

    componentDidMount() {
      this.listener = this.props.firebase.auth.onAuthStateChanged(
        authUser => {
           authUser
            ? this.setState({ authUser })
            : this.setState({ authUser: null });
        },
      );
    }

    componentWillUnmount() {
      this.listener();
    };  

    render() {
      return (
        <AuthUserContext.Provider value={this.state.authUser}>
          <Component {...this.props} />
        </AuthUserContext.Provider>
      );
    }
  }
  return withFirebase(WithAuthentication);

};
export default withAuthentication;

বর্তমানে - যখন আমি এটি চেষ্টা করি তখন আমি ড্যাশবোর্ড 2 উপাদানটিতে একটি ত্রুটি পেয়েছি যা বলে:

ফায়ারবেস 'সংজ্ঞায়িত করা হয় না

আমি লোয়ারকেস ফায়ারবেস চেষ্টা করেছি এবং একই ত্রুটি পেয়েছি।

আমি ফায়ারবেস.ফায়ার স্টোর এবং ফায়ারবেস.ফায়ার স্টোরও চেষ্টা করেছিলাম। আমি একই ত্রুটি পেয়েছি।

আমি ভাবছি যদি আমি আমার HOC কোনও ফাংশন উপাদান দিয়ে ব্যবহার করতে পারি না?

আমি এই ডেমো অ্যাপ্লিকেশন এবং এই ব্লগ পোস্ট দেখেছি ।

ব্লগের পরামর্শ অনুসরণ করে, আমি একটি নতুন ফায়ারবেস / প্রসঙ্গে রেডার.জেএসএক্স তৈরি করেছি:

 import React, { useEffect, useContext } from 'react';
import Firebase from '../../firebase';



export const userContext = React.createContext({
    user: null,
  })

export const useSession = () => {
    const { user } = useContext(userContext)
    return user
  }

  export const useAuth = () => {
    const [state, setState] = React.useState(() => 
        { const user = firebase.auth().currentUser 
            return { initializing: !user, user, } 
        }
    );
    function onChange(user) {
      setState({ initializing: false, user })
    }

    React.useEffect(() => {
      // listen for auth state changes
      const unsubscribe = firebase.auth().onAuthStateChanged(onChange)
      // unsubscribe to the listener when unmounting
      return () => unsubscribe()
    }, [])

    return state
  }  

তারপরে আমি আমার অ্যাপ.জেএসএক্সটিকে সেই পাঠকের সাথে মোড়ানোর চেষ্টা করব:

function App() {
  const { initializing, user } = useAuth()
  if (initializing) {
    return <div>Loading</div>
  }

    // )
// }
// const App = () => (
  return (
    <userContext.Provider value={{ user }}> 


    <Router>
        <Navigation />
        <Route path={ROUTES.LANDING} exact component={StandardLanding} />

আমি যখন এটি চেষ্টা করি তখন আমি একটি ত্রুটি পাই যা বলে:

প্রকারের ত্রুটি: _ফায়ারবেস__উইবপ্যাক_আইএমপোর্টটি_মোডিএল_2 __। ডিফল্ট.অথ কোনও ফাংশন নয়

আমি এই পোস্টটি সেই ত্রুটিটি মোকাবেলা করতে দেখেছি এবং সুতা আনইনস্টল ও পুনরায় ইনস্টল করার চেষ্টা করেছি। এতে কোন পার্থক্য নেই.

আমি যখন ডেমো অ্যাপ্লিকেশনটি দেখি, তখন এটি পরামর্শ দেয় যে একটি 'ইন্টারফেস' পদ্ধতি ব্যবহার করে প্রসঙ্গ তৈরি করা উচিত। আমি কোথা থেকে আসছি তা দেখতে পাচ্ছি না - ডকুমেন্টেশনে এটি ব্যাখ্যা করার জন্য কোনও রেফারেন্স খুঁজে পাচ্ছি না।

এটিকে প্লাগ ইন করার জন্য আমি কী করেছি তা চেষ্টা করার পরিবর্তে আমি নির্দেশাবলীর অনুধাবন করতে পারি না।

আমি এই পোস্টটি দেখেছি যা প্রতিক্রিয়া-ফায়ারবেস-হুক ব্যবহার না করে ফায়ারস্টোর শোনার চেষ্টা করে। উত্তরগুলি কীভাবে এই সরঞ্জামটি ব্যবহার করতে হবে তা বোঝার চেষ্টা করে।

আমি এই দুর্দান্ত ব্যাখ্যাটি পড়েছি যা এইচওসি থেকে হুকগুলিতে কীভাবে সরানো যায় তার মধ্যে যায়। আমি কীভাবে ফায়ারবেস শ্রোতাদের সংহত করতে পারি তার সাথে আটকে আছি।

আমি এই পোস্টটি দেখেছি যা এটির জন্য কীভাবে চিন্তা করা যায় তার একটি সহায়ক উদাহরণ সরবরাহ করে। আমার যদি লেখকলিস্টেনার উপাদানডিডমাউন্ট - বা ড্যাশবোর্ড উপাদান যা এটি ব্যবহারের চেষ্টা করছে তা করতে চেষ্টা করা উচিত কিনা তা নিশ্চিত নয়।

নেক্সট এটেম্পট আমি এই পোস্টটি পেয়েছি , যা একই সমস্যা সমাধানের চেষ্টা করছে।

আমি যখন শুভম খাতরীর প্রস্তাবিত সমাধানটি প্রয়োগ করার চেষ্টা করি, আমি ফায়ারবেস কনফিগারেশনটি নীচে সেট আপ করেছিলাম:

একটি প্রসঙ্গে সরবরাহকারী: আমদানি প্রতিক্রিয়া, 'রিঅ্যাক্ট' থেকে} useContext;; '../../ffirebase' থেকে ফায়ারবেস আমদানি করুন;

const FirebaseContext = React.createContext(); 

export const FirebaseProvider = (props) => ( 
   <FirebaseContext.Provider value={new Firebase()}> 
      {props.children} 
   </FirebaseContext.Provider> 
); 

এরপরে কনটেক্সট হুকটি রয়েছে:

import React, { useEffect, useContext, useState } from 'react';

const useFirebaseAuthentication = (firebase) => {
    const [authUser, setAuthUser] = useState(null);

    useEffect(() =>{
       const unlisten = 
firebase.auth.onAuthStateChanged(
          authUser => {
            authUser
              ? setAuthUser(authUser)
              : setAuthUser(null);
          },
       );
       return () => {
           unlisten();
       }
    });

    return authUser
}

export default useFirebaseAuthentication;

তারপরে ইনডেক্স.জেজে আমি অ্যাপ্লিকেশনটিকে সরবরাহকারীর মতো করে গুটিয়ে রাখি:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App/Index';
import {FirebaseProvider} from './components/Firebase/ContextHookProvider';

import * as serviceWorker from './serviceWorker';


ReactDOM.render(

    <FirebaseProvider> 
    <App /> 
    </FirebaseProvider>,
    document.getElementById('root')
);

    serviceWorker.unregister();

তারপরে, যখন আমি আমার থাকা উপাদানটিতে শ্রোতাদের ব্যবহার করার চেষ্টা করব:

import React, {useContext} from 'react';
import { FirebaseContext } from '../Firebase/ContextHookProvider';
import useFirebaseAuthentication from '../Firebase/ContextHook';


const Dashboard2 = (props) => {
    const firebase = useContext(FirebaseContext);
    const authUser = 
useFirebaseAuthentication(firebase);

    return (
        <div>authUser.email</div>
    )
 }

 export default Dashboard2;

এবং আমি এটির কোনও উপাদান বা লেখক মোড়ক ছাড়াই একটি রুট হিসাবে ব্যবহার করার চেষ্টা করছি:

<Route path={ROUTES.DASHBOARD2} component={Dashboard2} />

আমি যখন এটি চেষ্টা করি তখন আমি একটি ত্রুটি পাই যা বলে:

চেষ্টা করা আমদানি ত্রুটি: 'ফায়ারবেস কনটেক্সট' '../Firebase/ContextHookProvider' থেকে রফতানি হয় না।

এই ত্রুটি বার্তাটি অর্থবোধ করে, কারণ কনটেক্সটহুকপ্রাইডার ফায়ারবেস কনটেক্সট রফতানি করে না - এটি ফায়ারবেসপ্রাইভেটর রফতানি করে - তবে আমি যদি ড্যাশবোর্ড 2 এ এটি আমদানি করার চেষ্টা না করি - তবে আমি এটি যে ফাংশনটিতে এটি ব্যবহার করার চেষ্টা করে তাতে এটি অ্যাক্সেস করতে পারি না।

এই প্রয়াসের একটি পার্শ্ব প্রতিক্রিয়া হ'ল আমার সাইন আপ পদ্ধতিটি আর কাজ করে না। এটি এখন একটি ত্রুটি বার্তা উত্পন্ন করে যা বলে:

প্রকারের ত্রুটি: নালীর সম্পত্তি 'doCreateUserWithEmailAndPassword' পড়তে পারে না

আমি এই সমস্যাটি পরে সমাধান করব but তবে ফায়ারবেসের সাথে কীভাবে প্রতিক্রিয়া জানাতে হবে তা বুঝতে একটি উপায় থাকতে হবে যা কয়েক মাস ধরে এই লুপের সাথে জড়িত না যে মৌলিক লেখক সেটআপ পেতে কাজ করে না। ফায়ারবেস (ফায়ার স্টোর) এর জন্য স্টার্টার কিট রয়েছে যা প্রতিক্রিয়া হুকের সাথে কাজ করে?

পরবর্তী প্রয়াসটি আমি এই udemy কোর্সে পদ্ধতির অনুসরণ করার চেষ্টা করেছি - তবে এটি কেবল একটি ফর্ম ইনপুট তৈরির কাজ করে - প্রমাণীকরণকারী ব্যবহারকারীর সাথে সামঞ্জস্য করার জন্য কোনও শ্রোতা নেই the

আমি এই ইউটিউব টিউটোরিয়ালটিতে পদ্ধতির অনুসরণ করার চেষ্টা করেছি - যা থেকে এই রেপোটি কাজ করতে পারে। এটি হুকগুলি কীভাবে ব্যবহার করতে হয় তা দেখায়, তবে কীভাবে প্রসঙ্গে ব্যবহার করতে হয় তা নয়।

নেক্সট এটেম্পট আমি এই রেপোটি পেয়েছি যা ফায়ার স্টোর সহ হুক ব্যবহার করার জন্য একটি ভাল চিন্তাভাবনা পদ্ধতির বলে মনে হচ্ছে। যাইহোক, আমি কোডটি বুঝতে পারি না।

আমি এটি ক্লোন করেছি - এবং সমস্ত পাবলিক ফাইলগুলি যুক্ত করার চেষ্টা করেছি এবং তারপরে যখন আমি এটি চালাব - আমি আসলে কোডটি পরিচালনা করতে পারি না। আমি নিশ্চিত নই যে এই কোডটি চালানোর জন্য কীভাবে নির্দেশনা রয়েছে যা এই সমস্যাটি সমাধানে সহায়তা করতে পারে এমন কোডের পাঠ রয়েছে কিনা তা দেখার জন্য।

পরবর্তী মনোযোগ

আমি ডিভজয় টেম্পলেটটি কিনেছি, যা ফায়ারবেস সেটআপ হিসাবে বিজ্ঞাপন করা হয়েছে (অন্য কেউ যদি এটিকে বিকল্প হিসাবে বিবেচনা করে তবে এটি ফায়ার স্টোরের জন্য সেটআপ নয়)।

এই টেম্পলেটটি এমন একটি রথের মোড়কে প্রস্তাব দেয় যা অ্যাপ্লিকেশনটির কনফিগারেশন সূচনা করে - তবে কেবল লেখার পদ্ধতিগুলির জন্য - তাই ফায়ার স্টোরের জন্য অন্য প্রসঙ্গ সরবরাহকারীর অনুমতি দেওয়ার জন্য এটি পুনর্গঠন করা দরকার। আপনি যখন সেই প্রক্রিয়াটির মধ্যে বিশৃঙ্খলা সৃষ্টি করেন এবং এই পোস্টে প্রদর্শিত প্রক্রিয়াটি ব্যবহার করেন , তখন কী কল্পনা থাকে তা নিম্নলিখিত কলব্যাকটিতে একটি ত্রুটি:

useEffect(() => {
    const unsubscribe = firebase.auth().onAuthStateChanged(user => {
      if (user) {
        setUser(user);
      } else {
        setUser(false);
      }
    });

ফায়ারবেস কী তা তা জানে না। এর কারণ এটি ফায়ারবেস প্রসঙ্গ সরবরাহকারীর মধ্যে সংজ্ঞায়িত করা হয়েছে যা আমদানি করা এবং সংজ্ঞায়িত (ইউজপ্রাইভাইডউথ () ফাংশনে) হিসাবে:

  const firebase = useContext(FirebaseContext)

কলব্যাকের সম্ভাবনা ছাড়াই ত্রুটিটি বলে:

প্রতিক্রিয়া হুক ব্যবহারের প্রভাবটির অনুপস্থিতি রয়েছে: 'ফায়ারবেস'। হয় এটি অন্তর্ভুক্ত করুন বা নির্ভরতা অ্যারে সরান

বা, যদি আমি চেষ্টা করি এবং কলব্যাকটিতে সেই সংঘাতটি যুক্ত করি তবে আমি একটি ত্রুটি পেয়েছি যা বলছে:

প্রতিক্রিয়া হুক "useContext" কলব্যাকের ভিতরে কল করা যায় না। প্রতিক্রিয়া হুক্স অবশ্যই একটি প্রতিক্রিয়া ফাংশন উপাদান বা একটি কাস্টম প্রতিক্রিয়া হুক ফাংশন কল করা উচিত

পরবর্তী মনোযোগ

আমি আমার ফায়ারবেস কনফিগারেশন ফাইলটি কেবলমাত্র ভেরিয়েবলগুলিতে কনফিগার করে রেখেছি (আমি যে প্রতিটি প্রসঙ্গে ব্যবহার করতে চাই তার প্রসঙ্গের সরবরাহকারীগুলিতে সাহায্যকারী লিখব)।

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

const devConfig = {
    apiKey: process.env.REACT_APP_DEV_API_KEY,
    authDomain: process.env.REACT_APP_DEV_AUTH_DOMAIN,
    databaseURL: process.env.REACT_APP_DEV_DATABASE_URL,
    projectId: process.env.REACT_APP_DEV_PROJECT_ID,
    storageBucket: process.env.REACT_APP_DEV_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_DEV_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_DEV_APP_ID

  };


  const prodConfig = {
    apiKey: process.env.REACT_APP_PROD_API_KEY,
    authDomain: process.env.REACT_APP_PROD_AUTH_DOMAIN,
    databaseURL: process.env.REACT_APP_PROD_DATABASE_URL,
    projectId: process.env.REACT_APP_PROD_PROJECT_ID,
    storageBucket: process.env.REACT_APP_PROD_STORAGE_BUCKET,
    messagingSenderId: 
process.env.REACT_APP_PROD_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_PROD_APP_ID
  };

  const config =
    process.env.NODE_ENV === 'production' ? prodConfig : devConfig;


class Firebase {
  constructor() {
    firebase.initializeApp(config);
    this.firebase = firebase;
    this.firestore = firebase.firestore();
    this.auth = firebase.auth();
  }
};

export default Firebase;  

এরপরে আমার কাছে একটি লেখার প্রসঙ্গ প্রদানকারী রয়েছে:

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

const authContext = createContext();

// Provider component that wraps app and makes auth object ...
// ... available to any child component that calls useAuth().
export function ProvideAuth({ children }) {
  const auth = useProvideAuth();

  return <authContext.Provider value={auth}>{children}</authContext.Provider>;
}

// Hook for child components to get the auth object ...
// ... and update when it changes.
export const useAuth = () => {

  return useContext(authContext);
};

// Provider hook that creates auth object and handles state
function useProvideAuth() {
  const [user, setUser] = useState(null);


  const signup = (email, password) => {
    return Firebase
      .auth()
      .createUserWithEmailAndPassword(email, password)
      .then(response => {
        setUser(response.user);
        return response.user;
      });
  };

  const signin = (email, password) => {
    return Firebase
      .auth()
      .signInWithEmailAndPassword(email, password)
      .then(response => {
        setUser(response.user);
        return response.user;
      });
  };



  const signout = () => {
    return Firebase
      .auth()
      .signOut()
      .then(() => {
        setUser(false);
      });
  };

  const sendPasswordResetEmail = email => {
    return Firebase
      .auth()
      .sendPasswordResetEmail(email)
      .then(() => {
        return true;
      });
  };

  const confirmPasswordReset = (password, code) => {
    // Get code from query string object
    const resetCode = code || getFromQueryString("oobCode");

    return Firebase
      .auth()
      .confirmPasswordReset(resetCode, password)
      .then(() => {
        return true;
      });
  };

  // Subscribe to user on mount
  useEffect(() => {

    const unsubscribe = firebase.auth().onAuthStateChanged(user => {
      if (user) {
        setUser(user);
      } else {
        setUser(false);
      }
    });

    // Subscription unsubscribe function
    return () => unsubscribe();
  }, []);

  return {
    user,
    signup,
    signin,
    signout,
    sendPasswordResetEmail,
    confirmPasswordReset
  };
}

const getFromQueryString = key => {
  return queryString.parse(window.location.search)[key];
};

আমি নীচে ফায়ারবেস প্রসঙ্গ প্রদানকারীও করেছি:

import React, { createContext } from 'react';
import Firebase from "../../firebase";

const FirebaseContext = createContext(null)
export { FirebaseContext }


export default ({ children }) => {

    return (
      <FirebaseContext.Provider value={ Firebase }>
        { children }
      </FirebaseContext.Provider>
    )
  }

তারপরে, index.js এ আমি ফায়ারবেস সরবরাহকারীর মধ্যে অ্যাপ্লিকেশনটি গুটিয়ে রাখি

ReactDom.render(
    <FirebaseProvider>
        <App />
    </FirebaseProvider>, 
document.getElementById("root"));

serviceWorker.unregister();

এবং আমার রুটের তালিকায়, আমি প্রযোজক প্রাসঙ্গিক মধ্যে প্রাসঙ্গিক রুট আবৃত করেছি:

import React from "react";
import IndexPage from "./index";
import { Switch, Route, Router } from "./../util/router.js";

import { ProvideAuth } from "./../util/auth.js";

function App(props) {
  return (
    <ProvideAuth>
      <Router>
        <Switch>
          <Route exact path="/" component={IndexPage} />

          <Route
            component={({ location }) => {
              return (
                <div
                  style={{
                    padding: "50px",
                    width: "100%",
                    textAlign: "center"
                  }}
                >
                  The page <code>{location.pathname}</code> could not be found.
                </div>
              );
            }}
          />
        </Switch>
      </Router>
    </ProvideAuth>
  );
}

export default App;

এই বিশেষ প্রয়াসে, আমি এই ত্রুটিটি নিয়ে পতাকাঙ্কিত সমস্যাটিতে ফিরে এসেছি:

প্রকারের ত্রুটি: _ফায়ারবেস__উইবপ্যাক_আইএমপোর্টটি_মোডিএল_2 __। ডিফল্ট.অথ কোনও ফাংশন নয়

এটি লেখক সরবরাহকারীর এই লাইনটিকে সমস্যা তৈরি হিসাবে চিহ্নিত করে:

useEffect(() => {

    const unsubscribe = firebase.auth().onAuthStateChanged(user => {
      if (user) {
        setUser(user);
      } else {
        setUser(false);
      }
    });

আমি ফায়ারবেসে ক্যাপিটালাইজড এফ ব্যবহার করার চেষ্টা করেছি এবং এটি একই ত্রুটি ঘটায়।

আমি যখন ত্রিস্তানের পরামর্শ চেষ্টা করি, তখন আমি সেগুলি সমস্ত অপসারণ করি এবং আমার আনসাবস্ক্রাইব পদ্ধতিটিকে একটি অবিরাম পদ্ধতি হিসাবে সংজ্ঞায়িত করি (কেন সে ফায়ারবেস ভাষা ব্যবহার করছে না তা আমি জানি না - তবে যদি তার পদ্ধতির কাজ হয়, তবে আমি আরও কঠোর চেষ্টা করব) কেন বুঝতে হবে)। আমি যখন তার সমাধানটি ব্যবহার করার চেষ্টা করি তখন ত্রুটি বার্তাটি বলে:

TypeError: _util_contexts_Firebase__WEBPACK_IMPORTED_MODULE_8 ___ ডিফল্ট (...) কোনও ফাংশন নয়

এই পোস্টের উত্তরটি লেখার পরে () অপসারণ করার পরামর্শ দেয়। আমি যখন এটি চেষ্টা করি তখন আমি একটি ত্রুটি পাই যা বলে:

প্রকারের ত্রুটি: অপরিজ্ঞাতকৃত 'onAuthStateChanged' সম্পত্তিটি পড়া যায় না

তবে এই পোস্টে প্রমানের ফাইলটিতে যেভাবে ফায়ারবেস আমদানি করা হচ্ছে তাতে সমস্যা রয়েছে suggest

আমি এটি হিসাবে আমদানি করেছি: "../firebase" থেকে ফায়ারবেস আমদানি করুন;

ফায়ারবেস ক্লাসের নাম।

ত্রিস্তানের প্রস্তাবিত ভিডিওগুলি সহায়ক ব্যাকগ্রাউন্ড, তবে আমি বর্তমানে ৯ ম পর্বে আছি এবং এখনও এই সমস্যাটি সমাধানে সহায়তা করার জন্য অনুভূত অংশটি পাইনি। কেউ জানতে পারে কোথায় তা খুঁজে পাবে?

নেক্সট এটেম্পট পরবর্তী - এবং কেবল প্রসঙ্গে সমস্যাটি সমাধান করার চেষ্টা করছি - আমি ক্রিয়েট কনটেক্সট এবং ইউজকন্টেক্সট উভয়ই আমদানি করেছি এবং এই ডকুমেন্টেশনে যেমন দেখানো হয়েছে সেগুলি ব্যবহার করার চেষ্টা করেছি।

আমি একটি ত্রুটি পাস করতে পারি না যা বলে:

ত্রুটি: অবৈধ হুক কল। হুকগুলি কেবল কোনও ফাংশন উপাদানগুলির দেহের অভ্যন্তরে কল করা যায়। এটি নিম্নলিখিত কারণেগুলির একটি হতে পারে: ...

এই সমস্যাটি সমাধান করার চেষ্টা করার জন্য আমি এই লিঙ্কে দেওয়া পরামর্শগুলির মধ্য দিয়ে এসেছি এবং এটি বের করতে পারি না। এই সমস্যাটির শুটিং গাইডটিতে দেখানো কোনও সমস্যা আমার কাছে নেই।

বর্তমানে - প্রসঙ্গে বিবৃতিটি নিম্নরূপ দেখায়:

import React, {  useContext } from 'react';
import Firebase from "../../firebase";


  export const FirebaseContext = React.createContext();

  export const useFirebase = useContext(FirebaseContext);

  export const FirebaseProvider = props => (
    <FirebaseContext.Provider value={new Firebase()}>
      {props.children}
    </FirebaseContext.Provider>
  );  

আমি এই udemy কোর্সটি ব্যবহার করে এই সমস্যার প্রসঙ্গটি এবং হুক উপাদানটি খুঁজে বের করার চেষ্টা করেছি - এটি দেখার পরে - নীচে ত্রিস্তানের প্রস্তাবিত সমাধানের একমাত্র দিকটি হ'ল ক্রিয়েট কনটেক্সট পদ্ধতিটি তার পোস্টে সঠিকভাবে বলা হয় না। এটি "React.createContext" হওয়া দরকার তবে এটি সমস্যা সমাধানের কাছাকাছি কোথাও যায় না।

আমি এখনও আটকে আছি

কেউ কি দেখতে পাচ্ছে যে এখানে কী খারাপ লাগছে?

Comments

এটি অপরিশোধিত কারণ আপনি এটি আমদানি করছেন না।

— জোশ পিটম্যান

আপনি কি শুধু যুক্ত exportকরতে হবে export const FirebaseContext?

— ফেডারকুন

হাই মেল ধীর জবাবের জন্য ক্ষমা প্রার্থনা করছি, আমি দু'সপ্তাহ কাজের ফাঁকে পড়েছি তাই সন্ধ্যায় কম্পিউটারের দিকে তাকানো প্রশ্ন থেকে যায়! আপনি পরীক্ষা করতে পারেন এমন একটি পরিষ্কার এবং খুব সহজ সমাধান দেওয়ার জন্য আমি আমার উত্তর আপডেট করেছি।

— ত্রিস্তান ট্রেনার

অনেক অনেক ধন্যবাদ - আমি এখন এটি তাকান।

— মেল

আরে মেল, ফায়ারস্টোর থেকে রিয়েল টাইম আপডেটের সঠিক প্রয়োগের সাথে আরও সাম্প্রতিক আপডেট করা হয়েছে (রিয়েল টাইমটি নয় এটি অন্যাপের অংশটি অপসারণ করতে পারে) যদি এই সমাধান হয়, তবে আমি আপনার প্রশ্নটি সম্ভবত এটি আপডেট করার পরামর্শ দিতে পারি আরও সংক্ষিপ্ত এবং আরও সংক্ষিপ্ত, যাতে এটির সমাধানকারী অন্যরাও সমাধানটি খুঁজে পেতে পারে, ধন্যবাদ - প্রতিক্রিয়াগুলির ধীর গতির জন্য আবারও দুঃখিত

— ত্রিস্তান ট্রেনার

Answer 1

প্রধান সম্পাদনা : এটি আরও কিছুটা অনুসন্ধান করার জন্য কিছুটা সময় নিয়েছে এটিই আমি একটি ক্লিনার সমাধান নিয়ে এসেছি, এটির কাছে যাওয়ার ভাল উপায় হিসাবে কেউ আমার সাথে দ্বিমত পোষণ করতে পারে।

ইউজফায়ারবেস আথ হুক

import { useEffect, useState, useCallback } from 'react';
import firebase from 'firebase/app';
import 'firebase/auth';

const firebaseConfig = {
  apiKey: "xxxxxxxxxxxxxx",
  authDomain: "xxxx.firebaseapp.com",
  databaseURL: "https://xxxx.firebaseio.com",
  projectId: "xxxx",
  storageBucket: "xxxx.appspot.com",
  messagingSenderId: "xxxxxxxx",
  appId: "1:xxxxxxxxxx:web:xxxxxxxxx"
};

firebase.initializeApp(firebaseConfig)

const useFirebase = () => {
  const [authUser, setAuthUser] = useState(firebase.auth().currentUser);

  useEffect(() => {
    const unsubscribe = firebase.auth()
      .onAuthStateChanged((user) => setAuthUser(user))
    return () => {
      unsubscribe()
    };
  }, []);

  const login = useCallback((email, password) => firebase.auth()
    .signInWithEmailAndPassword(email, password), []);

  const logout = useCallback(() => firebase.auth().signOut(), [])

  return { login, authUser, logout }
}

export { useFirebase }

যদি authUser নাল হয় তবে প্রমাণীকরণ নয়, যদি ব্যবহারকারীর একটি মান থাকে তবে প্রমাণীকৃত হয়।

firebaseConfigফায়ারবেস কনসোল => প্রকল্প সেটিংস => অ্যাপস => কনফিগার রেডিও বোতামে পাওয়া যাবে can

useEffect(() => {
  const unsubscribe = firebase.auth()
    .onAuthStateChanged(setAuthUser)

  return () => {
    unsubscribe()
  };
}, []);

এই ব্যবহারের প্রভাব হুক একটি ব্যবহারকারীর লেখক পরিবর্তনগুলি ট্র্যাক করার মূল বিষয়। আমরা ফায়ারবেস.আউথ () এর onAuthStateChanged ইভেন্টে একটি শ্রোতা যুক্ত করি যা লেখকটির মান আপডেট করে। এই পদ্ধতিটি এই শ্রোতাকে সদস্যতা বাতিল করার জন্য একটি কলব্যাক দেয় যা আমরা যখন ব্যবহারের ফায়ারবেস হুকটি রিফ্রেশ করা হয় তখন শ্রোতাদের পরিষ্কার করার জন্য ব্যবহার করতে পারি।

এটি ফায়ারবেস প্রমাণীকরণের জন্য আমাদের একমাত্র হুক প্রয়োজন (অন্যান্য হুকগুলি ফায়ার স্টোর ইত্যাদির জন্যও তৈরি করা যেতে পারে

const App = () => {
  const { login, authUser, logout } = useFirebase();

  if (authUser) {
    return <div>
      <label>User is Authenticated</label>
      <button onClick={logout}>Logout</button>
    </div>
  }

  const handleLogin = () => {
    login("[e-mail]", "password0");
  }

  return <div>
    <label>User is not Authenticated</label>
    <button onClick={handleLogin}>Log In</button>
  </div>
}

এটি ক এর Appউপাদানটির একটি মৌলিক বাস্তবায়নcreate-react-app

ব্যবহারকারীর স্টোর ডেটাবেস হুক ook

const useFirestore = () => {
  const getDocument = (documentPath, onUpdate) => {
    firebase.firestore()
      .doc(documentPath)
      .onSnapshot(onUpdate);
  }

  const saveDocument = (documentPath, document) => {
    firebase.firestore()
      .doc(documentPath)
      .set(document);
  }

  const getCollection = (collectionPath, onUpdate) => {
    firebase.firestore()
      .collection(collectionPath)
      .onSnapshot(onUpdate);
  }

  const saveCollection = (collectionPath, collection) => {
    firebase.firestore()
      .collection(collectionPath)
      .set(collection)
  }

  return { getDocument, saveDocument, getCollection, saveCollection }
}

এটি আপনার উপাদানগুলিতে এর মতো প্রয়োগ করা যেতে পারে:

const firestore = useFirestore();
const [document, setDocument] = useState();

const handleGet = () => {
  firestore.getDocument(
    "Test/ItsWFgksrBvsDbx1ttTf", 
    (result) => setDocument(result.data())
  );
}

const handleSave = () => {
  firestore.saveDocument(
    "Test/ItsWFgksrBvsDbx1ttTf", 
    { ...document, newField: "Hi there" }
  );

}

এরপরে আমরা ফায়ারব্যাস থেকে সরাসরি আপডেট পেয়েছি কারণ এর ব্যবহার প্রতিক্রিয়াটির প্রয়োজনীয়তা অপসারণ করে।

কয়েকটি বিষয় লক্ষ্য করুন:

1. অপরিবর্তিত দলিলটি সংরক্ষণ করা কোনও নতুন স্ন্যাপশটকে ট্রিগার করে না সুতরাং "ওভারভেভিং" পুনরায় সরবরাহকারী হতে পারে না
2. গেটডোকামেন্টকে কল করার সময় আপডিকেটে কলব্যাকটি সরাসরি "প্রাথমিক স্ন্যাপশট" দিয়ে ডাকা হয় যাতে ডকুমেন্টের প্রাথমিক অবস্থা পাওয়ার জন্য আপনার অতিরিক্ত কোডের প্রয়োজন হয় না।

সম্পাদনা পুরানো উত্তরের একটি বিশাল অংশ সরিয়ে দিয়েছে

Comments

এর জন্য ধন্যবাদ. আপনি এটি কীভাবে সেট আপ করেছেন তা আমি দেখতে পাচ্ছি না। সরবরাহকারীর সাথে, আমি একটি ত্রুটি পেয়েছি যা বলে যে ক্রিয়েকনটেক্সট সংজ্ঞায়িত নয়। এটি কারণ এখনও পর্যন্ত কোনও গ্রাহক নেই। তুমি কোথায় রেখেছ?

— মেল

আরে দুঃখিত, ক্রিয়েট কনটেক্সট রিঅ্যাক্টের অংশ, সুতরাং 'প্রতিক্রিয়া' থেকে এটিকে শীর্ষে at ক্রিয়েট কনটেক্সট import হিসাবে আমদানি করুন আমি বুঝতে পেরেছিলাম যে ফায়ারবেস সরবরাহকারী কোথায় যায় তা দেখাতে ভুলে গিয়েছি, আমি উত্তরটি সম্পাদনা করব

— ত্রিস্তান ট্রেইনার

আমি সরবরাহকারী এ এটি আমদানি করেছি, কিন্তু এটি অপরিবর্তিত রেন্ডার করে। আমি মনে করি এটির কারণেই কোনও গ্রাহক নেই

— মেল

গ্রাহক হ'ল ইউজ কনটেক্সট () হুক, তবে আপনার প্রশ্নটি আবার দেখে মনে হচ্ছে আপনি ফাইল থেকে ফায়ারবেস কনটেক্সট রফতানি করছেন না - এজন্য এটি প্রসঙ্গটি খুঁজে পাচ্ছেন না :)

— ত্রিস্তান ট্রেইনার

হাই @ মেল আপনাকে আন্তরিক ধন্যবাদ জানাই, আমি আশা করি এটি শেষ পর্যন্ত সহায়ক হিসাবে প্রমাণিত হয়েছে। হুকস এবং ফায়ারবেস উভয়ই বেশ জড়িত এবং এটি সম্পর্কে আমার মাথা পেতে আমার অনেক সময় লেগেছে এবং এখন পর্যন্ত আমি এর সেরা সমাধানটি খুঁজে পেতে পারি নি, আমি আপনার পদ্ধতির উপর একটি টিউটোরিয়াল তৈরি করতে পারি যেহেতু আপনার কোড হিসাবে ব্যাখ্যা করা সহজ easier এটা।

— ত্রিস্তান প্রশিক্ষক

Answer 2

আপনি এটি আমদানি করছেন না বলে ফায়ারবেস অপরিজ্ঞাত। প্রথমত, এটির প্রয়োজন যা firebase.firestore()আপনি https://github.com / এসফ্রেসিওন্সি / রিঅ্যাক্ট- ফায়ারবেস- hooks/tree/master/firestore এর সাথে সংযুক্ত ডক্সে উদাহরণে দেখানো হয়েছে । তারপরে আপনাকে ফাইলে আসলে ফায়ারবেস আমদানি করতে হবে, তাই import * as firebase from 'firebase';ফায়ারবেস প্যাকেজে রেডমে https://www.npmjs.com/package/firebase

Comments

আমি এটি index.js এ আমদানি করছি

— মেল

ReactDOM.render (<ফায়ারবেস কনটেক্সট.প্রভাইডার মান = {নতুন ফায়ারবেস ()}> <অ্যাপ /> </FirebaseContext.Provider>, ডকুমেন্ট.সেটিমেন্টবাইআইডি ('রুট'));

— মেল

এজন্য পন্থাটি উপাদান

— ডিডমাউন্টের

আথ এইচওসি সহ ফায়ারবেসও জড়িয়ে রয়েছে।

— মেল

তবে আপনার ত্রুটি বলে যে এটি অপরিজ্ঞাত। আমি আপনাকে এটি সংজ্ঞায়িত করতে সহায়তা করছি এবং সমাধানটি কাজ করে বা ফলস্বরূপ ত্রুটিটি কী তা আপনি আমাকে বলছেন না। আপনি মেলকে সাহায্য করতে সর্বদা এটি খুব কঠিন করে তোলেন। আমার বক্তব্যটি হ'ল আপনি এটিকে ড্যাশবোর্ড 2 উপাদান ফাইল ব্যতীত অন্য কোনও ফাইলে আমদানি করছেন, যেখানে আপনি এটি উল্লেখ করেছেন, যা ত্রুটির কারণ ঘটছে। সূচীতে কোনও কিছুর ইম্পোর্ট করা আপনার বিল্ডটিকে এটি সম্পূর্ণ আলাদা ফাইলে কী তা বুঝতে সহায়তা করে না।

— জোশ পিটম্যান

Answer 3

সম্পাদনা (3 শে মার্চ, 2020):

শুরু থেকে শুরু করা যাক।

1. আমি একটি নতুন প্রকল্প তৈরি করেছি:

   সুতা রিয়্যাক্ট-অ্যাপ ফায়ারবেস-হুক-ইস্যু তৈরি করে

2. আমি ডিফল্টরূপে তৈরি সমস্ত 3 অ্যাপ * ফাইল মুছে ফেলেছি, সূচি.জেএস থেকে আমদানি সরিয়ে নিয়েছি এবং সেবার মতো পরিচ্ছন্ন সূচক.জেস রাখতে পরিষেবা কর্মীকে অপসারণ করেছি:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

const App = () => {
    return (
        <div>
            Hello Firebase!            
        </div>
    );
};

ReactDOM.render(<App />, document.getElementById('root'));

3. আমি অ্যাপ্লিকেশন শুরু করেছি যে হ্যালো ফায়ারবেস!ছাপানো হয়।
4. আমি ফায়ারবেস মডিউল যুক্ত করেছি

yarn add firebase

5. আমি এই প্রকল্পের জন্য ফায়ারবেস সেটআপ করতে ফায়ারবেস আরম্ভ চালিয়েছি। আমি আমার একটি ফাঁকা ফায়ারবেস প্রকল্প বেছে নিয়েছি এবং আমি ডেটাবেস এবং ফায়ার স্টোর নির্বাচন করেছি, যা পরবর্তী ফাইলগুলি তৈরি করে:

.firebaserc
database.rules.json
firebase.json
firestore.indexes.json
firestore.rules

6. আমি ফায়ারবেস লিবের জন্য আমদানি যুক্ত করেছি এবং একটি তৈরি করেছি ফায়ারবেস ক্লাস এবং ফায়ারবেস কনটেক্সটও তৈরি করেছি । শেষ পর্যন্ত আমি ফায়ারবেস কনটেক্সট.প্রভাইডার উপাদানটিতে অ্যাপটি গুটিয়ে রেখেছি এবং এর মানটিকে একটি নতুন ফায়ারবেস () উদাহরণে সেট করেছি। এটি ছিল আমাদের ফায়ারবেস অ্যাপের কেবলমাত্র একটি উদাহরণ যা আমাদের উচিত তত্ক্ষণাতীত করা উচিত কারণ এটি অবশ্যই সিঙ্গলটন হতে হবে:

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

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

class Firebase {
    constructor() {
        app.initializeApp(firebaseConfig);

        this.realtimedb = app.database();
        this.firestore = app.firestore();
    }
}

const FirebaseContext = React.createContext(null);

const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
};

const App = () => {
    return <div>Hello Firebase!</div>;
};

ReactDOM.render(
    <FirebaseContext.Provider value={new Firebase()}>
        <App />
    </FirebaseContext.Provider>
    , document.getElementById("root"));

7. আসুন যাচাই করুন যে আমরা ফায়ারস্টোর থেকে যে কোনও কিছু পড়তে পারি। প্রথমে পড়াটি যাচাই করার জন্য, আমি ফায়ারবেস কনসোলে আমার প্রকল্পে গিয়েছিলাম, আমার ক্লাউড ফায়ার স্টোর ডাটাবেসটি খুলি এবং একটি নতুন সংগ্রহ যুক্ত করেছি কাউন্টারে একটি নথি সঙ্গে সহজ একটি ক্ষেত্র নামক ধারণকারী মান টাইপ সংখ্যা এবং মান 0 করুন।

8. তারপরে ফায়ারবেস কনটেক্সটকে আমরা তৈরি করেছি, ফায়ারস্টোর থেকে মানটি পড়তে আমাদের সাধারণ কাউন্টার হুকের জন্য ব্যবহারের স্টেট হুক তৈরি করেছি এবং ব্যবহারের প্রভাবের হুকটি ব্যবহার করতে অ্যাপ্লিকেশন ক্লাসটি আপডেট করেছি:

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

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

const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
};

class Firebase {
    constructor() {
        app.initializeApp(firebaseConfig);

        this.realtimedb = app.database();
        this.firestore = app.firestore();
    }
}

const FirebaseContext = React.createContext(null);

const App = () => {
    const firebase = React.useContext(FirebaseContext);
    const [counter, setCounter] = React.useState(-1);

    React.useEffect(() => {
        firebase.firestore.collection("counters").doc("simple").get().then(doc => {
            if(doc.exists) {
                const data = doc.data();
                setCounter(data.value);
            } else {
                console.log("No such document");
            }
        }).catch(e => console.error(e));
    }, []);

    return <div>Current counter value: {counter}</div>;
};

ReactDOM.render(
    <FirebaseContext.Provider value={new Firebase()}>
        <App />
    </FirebaseContext.Provider>
    , document.getElementById("root"));

দ্রষ্টব্য: উত্তরটি যথাসম্ভব সংক্ষিপ্ত রাখার জন্য আমি নিশ্চিত করে ফেলেছি যে পরীক্ষার মোডে (ফায়ারস্টোর.রুলস ফাইল) থাকতে অগ্নিকান্ডার অ্যাক্সেস সেট করে আপনার ফায়ারবেস দিয়ে প্রমাণীকরণের দরকার নেই:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {

    // This rule allows anyone on the internet to view, edit, and delete
    // all data in your Firestore database. It is useful for getting
    // started, but it is configured to expire after 30 days because it
    // leaves your app open to attackers. At that time, all client
    // requests to your Firestore database will be denied.
    //
    // Make sure to write security rules for your app before that time, or else
    // your app will lose access to your Firestore database
    match /{document=**} {
      allow read, write: if request.time < timestamp.date(2020, 4, 8);
    }
  }
}

আমার পূর্ববর্তী উত্তর: আপনি আমার প্রতিক্রিয়া-ফায়ারবেস-অ্যাথ-কঙ্কালটি দেখে একবার স্বাগত জানাতে পারেন না:

https://github.com/PompolutZ/react-firebase-auth-skeleton

এটি মূলত নিবন্ধটি অনুসরণ করে:

https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial

তবে কিছুটা হুক ব্যবহারের জন্য আবারও লেখা। আমি আমার কমপক্ষে দুটি প্রকল্পে এটি ব্যবহার করেছি।

আমার বর্তমান পোষা প্রকল্পের সাধারণ ব্যবহার:

import React, { useState, useEffect, useContext } from "react";
import ButtonBase from "@material-ui/core/ButtonBase";
import Typography from "@material-ui/core/Typography";
import DeleteIcon from "@material-ui/icons/Delete";
import { FirebaseContext } from "../../../firebase";
import { useAuthUser } from "../../../components/Session";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
    root: {
        flexGrow: 1,
        position: "relative",
        "&::-webkit-scrollbar-thumb": {
            width: "10px",
            height: "10px",
        },
    },

    itemsContainer: {
        position: "absolute",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        display: "flex",
        alignItems: "center",
        overflow: "auto",
    },
}));

export default function LethalHexesPile({
    roomId,
    tokens,
    onSelectedTokenChange,
}) {
    const classes = useStyles();
    const myself = useAuthUser();
    const firebase = useContext(FirebaseContext);
    const pointyTokenBaseWidth = 95;
    const [selectedToken, setSelectedToken] = useState(null);

    const handleTokenClick = token => () => {
        setSelectedToken(token);
        onSelectedTokenChange(token);
    };

    useEffect(() => {
        console.log("LethalHexesPile.OnUpdated", selectedToken);
    }, [selectedToken]);

    const handleRemoveFromBoard = token => e => {
        console.log("Request remove token", token);
        e.preventDefault();
        firebase.updateBoardProperty(roomId, `board.tokens.${token.id}`, {
            ...token,
            isOnBoard: false,
            left: 0,
            top: 0,
            onBoard: { x: -1, y: -1 },
        });
        firebase.addGenericMessage2(roomId, {
            author: "Katophrane",
            type: "INFO",
            subtype: "PLACEMENT",
            value: `${myself.username} removed lethal hex token from the board.`,
        });
    };

    return (
        <div className={classes.root}>
            <div className={classes.itemsContainer}>
                {tokens.map(token => (
                    <div
                        key={token.id}
                        style={{
                            marginRight: "1rem",
                            paddingTop: "1rem",
                            paddingLeft: "1rem",
                            filter:
                            selectedToken &&
                            selectedToken.id === token.id
                                ? "drop-shadow(0 0 10px magenta)"
                                : "",
                            transition: "all .175s ease-out",
                        }}
                        onClick={handleTokenClick(token)}
                    >
                        <div
                            style={{
                                width: pointyTokenBaseWidth * 0.7,
                                position: "relative",
                            }}
                        >
                            <img
                                src={`/assets/tokens/lethal.png`}
                                style={{ width: "100%" }}
                            />
                            {selectedToken && selectedToken.id === token.id && (
                                <ButtonBase
                                    style={{
                                        position: "absolute",
                                        bottom: "0%",
                                        right: "0%",
                                        backgroundColor: "red",
                                        color: "white",
                                        width: "2rem",
                                        height: "2rem",
                                        borderRadius: "1.5rem",
                                        boxSizing: "border-box",
                                        border: "2px solid white",
                                    }}
                                    onClick={handleRemoveFromBoard(token)}
                                >
                                    <DeleteIcon
                                        style={{
                                            width: "1rem",
                                            height: "1rem",
                                        }}
                                    />
                                </ButtonBase>
                            )}
                        </div>
                        <Typography>{`${token.id}`}</Typography>
                    </div>
                ))}
            </div>
        </div>
    );
}

এখানে দুটি সর্বাধিক গুরুত্বপূর্ণ অংশগুলি হ'ল : - ব্যবহারআউথ ইউজার () হুক যা বর্তমান প্রমাণীকৃত ব্যবহারকারী সরবরাহ করে। - ফায়ারবেস কনটেক্সট যা আমি useContext এর মাধ্যমে ব্যবহার করি হুকের ।

const firebase = useContext(FirebaseContext);

যখন আপনার ফায়ারবেস প্রসঙ্গে থাকে, তখন এটি আপনার পছন্দ অনুযায়ী ফায়ারবেস অবজেক্টটি প্রয়োগ করা আপনার পক্ষে up কখনও কখনও আমি কিছু সহায়ক ফাংশন লিখি, কখনও কখনও ঠিক শ্রোতাদের ঠিক ঠিক সেটআপ করা সহজ ব্যবহারের প্রভাবটিতে আমার বর্তমান উপাদানটির জন্য তৈরি হুকের ।

এই নিবন্ধটির সেরা অংশগুলির একটি ছিল অনুমোদনের এইচওসি তৈরি করা, যা আপনাকে পৃষ্ঠাটিতে অ্যাক্সেসের পূর্বশর্তগুলি নিজেই অংশে নির্দিষ্ট করতে দেয়:

const condition = authUser => authUser && !!authUser.roles[ROLES.ADMIN];
export default withAuthorization(condition)(AdminPage);

অথবা এমনকি আপনার রাউটার বাস্তবায়নের ক্ষেত্রেও এই শর্তগুলি সেটিংস করতে পারে।

আশা করি রেপো এবং নিবন্ধটি দেখলে আপনার প্রশ্নের অন্যান্য উজ্জ্বল উত্তরগুলি বাড়িয়ে তুলতে আপনাকে কিছু বাড়তি ভাল ধারণা দেওয়া হবে।

Comments

আমি তার বইটি কিনেছি এবং তার পদ্ধতির অনুসরণ করেছি। আমি দেখতে পেলাম যে বাস্তবায়নের সময় শর্তগুলির পদ্ধতির বাস্তবিকভাবে কাজ হয়নি এবং সেই বইতে সেট করা প্রবন্ধ প্রোটোকল উপাদান আপডেটের মাধ্যমে স্থিতি বজায় রাখতে ব্যর্থ হয়েছে। সেই বইটিতে যা সেট রয়েছে তা ব্যবহার করার উপায় আমি খুঁজে পাইনি। আপনার মতামত ভাগ করে নেওয়ার জন্য যাইহোক ধন্যবাদ।

— মেল

আপনি কি বোঝাতে চাচ্ছেন আমি নিশ্চিত নই? আপনি কি আপনার ফায়ারবেস প্রকল্পের সাহায্যে আমার কঙ্কাল অ্যাপটি ব্যবহার করে দেখেছেন? সমস্ত শর্তগুলি যতদূর আমি বলতে পারি কাজ করে, কমপক্ষে আমি কমপক্ষে 3 টি প্রকল্পে এটি ব্যবহার করছি।

— fxdxpz