Blog App ب react js تحديث المحتوى الجزء الرابع


فهاد الجزء الرابع من blog app ب react js غادي نزيدوا الجزء الخاص بالأدمن يعني فاش يكون المستخدم متصل يمكن يزيد des articles فقاعدة البيانات غادي نشوفوا كيفاش نزيدو ل component لي غادي يكون هو الصفحة الخاصة بالأدمن.

نظرة سريعة بالفيديو

1- إضافة الصفحة الخاصة بالأدمن

غادي تمشي ل compenents غادي تزيد dossier جديد سميه Admin فيه زيد fichier سميه dashboard غادي تكون فيه الفورم كيف شفنا فالتسجيل فقط بدلنا type لي كنحدد به نوع الفورم وعطيناه addArticle.

الكود ديال الملف هو :

                                //
import React from 'react';
import Form from '../../components/Widgets/Form';

const Dashboard = (props) =>{
    return(
        <Form history= {props.history} type="addArticle"/>
    );
};


export default Dashboard;
                            

2- إضافة الصفحة الخاصة بالأدمن للقائمة

من بعد غادي نزيد الرابط لي يديني  للصفحة لي زدت فالقائمة فغادي نمشي ل dossier includes/SideNav فالملف sideNav.js غادي نزيد ل admin ل array items لي فيها العناصر المكونة للقائمة وكنتحقق بحال لي درت فالأخرين واش المستخدم متصل أو لا ل باش عاد كنعرض الرابط.

الكود لي غادي تزيد هو : 

                                //
,
        {
            text : 'Admin',
            icon : 'fas fa-tachometer-alt',
            link : '/dashboard',
            display : props.user == null ? false : true
        }
                            

3- إضافة route الخاص بالأدمن

غادي نمشي ل fichier routes.js فيه غادي نسترجع ل component Dashboard لي زدت منبعد غادي نزيد route الخاص به وهنا كنتحقق يلا كان المستخدم متصل أي connecté كنديه ل Dashboard مكانش كنردو ل Home لي هي الصفحة الرئيسية ديالنا.

الكود ديال routes.js بعد التعديل هو :

                                //
import React from 'react';
import {Route,Switch} from 'react-router-dom';
import Layout from './components/hoc/Layout/layout';
import Home from './components/Home/home';
import Articles from './components/Posts/articles';
import Article from './components/Posts/article';
import Login from './components/Auth/login';
import Register from './components/Auth/register';
import Logout from './components/Auth/logout';
import Dashboard from './components/Admin/dashbord';

const Routes = (props) => {
    return(
        <Layout {...props}>
            <Switch>
                <Route path="/" exact component={Home}/>
                <Route path="/articles" exact component={Articles}/>
                <Route path="/articles/:id" exact component={Article}/>
                <Route path="/login" exact component={Login}/>
                <Route path="/register" exact component={Register}/>
                <Route path="/logout" exact component={Logout}/>
                <Route path="/dashboard" exact component={props.user !== null ? Dashboard : Home}/>
            </Switch>
        </Layout>
    );
}

export default Routes;
                            


إشترك في قناتنا على اليوتيوب

بحث في الموقع


إشترك للتوصل بالجديد