Implement Typescript

[amuchina]

Change React component from jsx to tsx in order to implement Typescript typing and notation

[bEluga0000]

can you please setup the typescript in your project after that if you are okay with that i will move jsx files to tsx files, because i facing the issues setting up project and run php files and i don't know php also .

[amuchina]

Hi Shreyas, I created a branch called 'feature/implement-typescript' where I installed typescript as a dev dependency and initialized tsconfig.json file. Work only on that branch (totally ignore master, dev and restructuring-project) or create yours that you will push-request to me. However, the config file is currently empty and I give you carte blanche on setting it up for correctly working with TS and upgrade all the jsx files (or js in general) to TSX files. Please be sure to comment and provide explanation of what you've done in the merge request comment or commits, and also create types for validation (if you want) or other things. Finally, pay attention to the project folders (the one where you should install typescript dependencies or other things that you could use with npm is the main folder of the 'feature/implement-typescript' branch, and the folder where you can find react components used in the web app is 'synchub\resources\js', because Laravel (the full-stack framework I'm using for building the website) rely on that path for getting the components to be rendered in the front-end. Thank you in advance for your willingness of helping me with the project, I will add you in the README as a collaborator. Text me for everything you need!

Il giorno lun 12 feb 2024 alle ore 14:29 Shreyas Shetty A S < @.***> ha scritto:

can you please setup the typescript in your project after that if you are okay with that i will move jsx files to tsx files, because i facing the issues setting up project and run php files and i don't know php also .

— Reply to this email directly, view it on GitHub https://github.com/amuchina/SyncHub/issues/5#issuecomment-1938683068, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASJ4K4EN6FKN2DWZ5INGEUDYTIKNFAVCNFSM6AAAAABC6ZSNYCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMZYGY4DGMBWHA . You are receiving this because you authored the thread.Message ID: @.***>

[amuchina]

Yet, consider that the project is still in a very beginning and setting-up phase, so forgive me for any mess you could find or any weird action you could need to perform in order to run the project correctly. Thank you for your patience✌🏼

[bEluga0000]

Hey can you tell me how to run the project locally bcz i am first time using larvel framework and i dont know how to run the project . I use to work on the node js frameworks mostly so i dont know how to run php or Laravel but i can move the js files to ts . If u have any short videos setting up this project locally or if u know the commands to run the the project locally please let me know .

[amuchina]

Sure! In order to run the project, you should have PHP, composer, laravel (installed with composer require) and mysql server installed on your pc. You'll also need Node and npm package manager for running the front end. For running the project, stay in the main folder as the terminal path (synchub) and type "npm run dev". This will open a server for the front end. Then in a separately terminal (in the same folder) run "php artisan serve" which will start the project server pointing at the URL you'll have to type in the browser for accessing the website (should be 127.0.0.1:8000). Finally, start mysql server trough XAMPP or other ways and make sure the website can connect successfully to the database (for example by creating an account in the register form). Let me know!

Il mar 13 feb 2024, 04:46 Shreyas Shetty A S @.***> ha scritto:

Hey can you tell me how to run the project locally bcz i am first time using larvel framework and i dont know how to run the project . I use to work on the node js frameworks mostly so i dont know how to run php or Laravel but i can move the js files to ts . If u have any short videos setting up this project locally or if u know the commands to run the the project locally please let me know .

— Reply to this email directly, view it on GitHub https://github.com/amuchina/SyncHub/issues/5#issuecomment-1940376881, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASJ4K4BKRRIJSAPIDEDLANLYTLOYDAVCNFSM6AAAAABC6ZSNYCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNBQGM3TMOBYGE . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[amuchina]

If Laravel can't connect to the database it will return you "SQL exception: connection refused" every time you'll try to do something that needs db storing (login, signup and other things)

[amuchina]

P.S: sorry for my tipically late responses, but the time zone in Italy is different from yours✌🏻

[bEluga0000]

hey can send me the how you created this project like did which are the options u selected after entering

like it is going to have multiple options right bcz i am facing issue connecting the tsconfig file with the app.tsx file so i thought i will create a new project with typescript already init after that i will just copy paste every thing then i will change jsx file to tsx file bcz i think its the best way. if you have any idea other than this let me know .and i was little busy bcz of exams from now i will work everyday on this until i complete .

[amuchina]

Hi, can you give me more information on your problem? I will then send you what you need

Il gio 15 feb 2024, 18:55 Shreyas Shetty A S @.***> ha scritto:

hey can send me the how you created this project like did which are the options u selected after entering like it is going to have multiple options right bcz i am facing issue connecting the tsconfig file with the app.tsx file so i thought i will create a new project with typescript already init after that i will just copy paste every thing then i will change jsx file to tsx file bcz i think its the best way. if you have any idea other than this let me know .and i was little busy bcz of exams from now i will work everyday on this until i complete .

— Reply to this email directly, view it on GitHub https://github.com/amuchina/SyncHub/issues/5#issuecomment-1946770566, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASJ4K4FUMKPIWWRCUU3PWNLYTZDXNAVCNFSM6AAAAABC6ZSNYCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNBWG43TANJWGY . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[bEluga0000]

see the problem is that in feature/implement-typescript in this branch i am facing issues in connecting the tsconfig file with react files .

[amuchina]

Ok, I think i've got the problem. Do you want the actual project without the TS configuration I made for you? if yes, you can find it in the "dev" branch

Il gio 15 feb 2024, 19:20 Shreyas Shetty A S @.***> ha scritto:

see the problem is that in feature/implement-typescript in this branch i am facing issues in connecting the tsconfig file with react files .

— Reply to this email directly, view it on GitHub https://github.com/amuchina/SyncHub/issues/5#issuecomment-1946850926, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASJ4K4E5WWZW5EN664P5LY3YTZGV5AVCNFSM6AAAAABC6ZSNYCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNBWHA2TAOJSGY . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[bEluga0000]

solution i am giving for that is lets create a new project in that branch with typescript already init once we did that we can easily copy paste all the files and then its going to be easy for me to move the jsx to tsx .creating new project means like just laravel new and when u going to see the option of typescript add in it.

[amuchina]

Go in "dev", then checkout and create a new branch from that called implement-typescript

[bEluga0000]

solution i am giving for that is lets create a new project in that branch with typescript already init once we did that we can easily copy paste all the files and then its going to be easy for me to move the jsx to tsx .creating new project means like just laravel new and when u going to see the option of typescript add in it. u got what i am saying here

[bEluga0000]

Go in "dev", then checkout and create a new branch from that called implement-typescript

i think u r not getting what i am trying to say .

[amuchina]

solution i am giving for that is lets create a new project in that branch with typescript already init once we did that we can easily copy paste all the files and then its going to be easy for me to move the jsx to tsx .creating new project means like just laravel new and when u going to see the option of typescript add in it.

oh okok, I will set it up later

[amuchina]

But before trying that, give an eye to this: https://laravel-news.com/typescript-laravel

[amuchina]

try to checkout from dev (laravel breeze project with boilerplate JS) and follow the instruction and commands shown in the link

[amuchina]

do you need help? how is it going?

[bEluga0000]

I was working on the my clg project so i was busy in that it completed ,from today i will work on this if i need any help i am going to ask.

[bEluga0000]

<div class="form-group">
                        <label for="email">Email</label>
                        <input
                            type="text"
                            **class="form-control"**
                            id="email"
                            value={data.email}
                            onChange={(e) => setData('email', e.target.value)}
                            placeholder="Inserisci la tua email"
                            name="email"
                            required
                        ></input>
                    </div>

In some of the places ur using the class insted of the className can you explain me y and how u using it bcz as for as i know u not able use class in jsx or tsx elements

[bEluga0000]

import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import {Head} from "@inertiajs/react";

export default function All({ auth, threads }) {
    return(
        <AuthenticatedLayout
            user={auth.user}
            currentPage={'threads'}
        >
            <Head title="Threads" />

            {threads.map((thread) => {console.log(thread)})}

        </AuthenticatedLayout>
    );
}

This code is from pages/threads/all.jsx here u r just loggin the thread ,is that okay if i remove that bcz we get error in TS if we are not returning anything from the function i f want to keep that then tell me what really the threads is and what to return in map function

[bEluga0000]

 <div class="form-group">
                        <input name="send" id="send" type="button" class="btn btn-primary" value="Registrati" onClick={handleSubmit}></input>
                    </div>
                    <div class="form-group">
                        <input  type="button" class="btn btn-primary" value="Ho gia' un account" onClick={loginRedirect}></input>
                    </div>

this code is from pages/signupIndex.jsx are u using this jsx component if yes , then y there is no useState variables for any of the input element and no above mentioned functions . if ur not using it i will remove it

[bEluga0000]

function MainRow({user}:{user:any}){
    return (
        <>
            <div className="row" id="homebody">
                <Leftsection user={user}/>
                <Centersection />
                <Rightsection user={user}/>
            </div>
        </>
    );
}

here ur sending and user as props rigth can you send me how the user object looks bcz as of now i am using the any type which is not good so if send me how user object look like i will add that type

[amuchina]

<div class="form-group">
                        <label for="email">Email</label>
                        <input
                            type="text"
                            **class="form-control"**
                            id="email"
                            value={data.email}
                            onChange={(e) => setData('email', e.target.value)}
                            placeholder="Inserisci la tua email"
                            name="email"
                            required
                        ></input>
                    </div>

In some of the places ur using the class insted of the className can you explain me y and how u using it bcz as for as i know u not able use class in jsx or tsx elements

don't mind that, feel free to replace all "class" with "className"

[amuchina]

import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import {Head} from "@inertiajs/react";

export default function All({ auth, threads }) {
    return(
        <AuthenticatedLayout
            user={auth.user}
            currentPage={'threads'}
        >
            <Head title="Threads" />

            {threads.map((thread) => {console.log(thread)})}

        </AuthenticatedLayout>
    );
}

This code is from pages/threads/all.jsx here u r just loggin the thread ,is that okay if i remove that bcz we get error in TS if we are not returning anything from the function i f want to keep that then tell me what really the threads is and what to return in map function

don't worry, you can remove that line without problems. It was just for debugging

[amuchina]

 <div class="form-group">
                        <input name="send" id="send" type="button" class="btn btn-primary" value="Registrati" onClick={handleSubmit}></input>
                    </div>
                    <div class="form-group">
                        <input  type="button" class="btn btn-primary" value="Ho gia' un account" onClick={loginRedirect}></input>
                    </div>

this code is from pages/signupIndex.jsx are u using this jsx component if yes , then y there is no useState variables for any of the input element and no above mentioned functions . if ur not using it i will remove it

That was because I simply didn't need it. Feel free to remove all unused libraries/components but pay attention because Laravel doesn't higlight "export default componentname" even if it is used

[amuchina]

function MainRow({user}:{user:any}){
    return (
        <>
            <div className="row" id="homebody">
                <Leftsection user={user}/>
                <Centersection />
                <Rightsection user={user}/>
            </div>
        </>
    );
}

here ur sending and user as props rigth can you send me how the user object looks bcz as of now i am using the any type which is not good so if send me how user object look like i will add that type

when i go to auth.user object with cursor on hover it says me user?:any and this is the section of lib.dom.d.ts file that pops me up when I ctrl-click on the object:

interface PublicKeyCredentialCreationOptions {
    attestation?: AttestationConveyancePreference;
    authenticatorSelection?: AuthenticatorSelectionCriteria;
    challenge: BufferSource;
    excludeCredentials?: PublicKeyCredentialDescriptor[];
    extensions?: AuthenticationExtensionsClientInputs;
    pubKeyCredParams: PublicKeyCredentialParameters[];
    rp: PublicKeyCredentialRpEntity;
    timeout?: number;
    user: PublicKeyCredentialUserEntity;
}

this is the PublicKeyCredentialUserEntity:

interface PublicKeyCredentialUserEntity extends PublicKeyCredentialEntity {
    displayName: string;
    id: BufferSource;
}

and this is the BufferSource:

type BufferSource = ArrayBufferView | ArrayBuffer;

[bEluga0000]

okay i will correct above things and i will push it.

[bEluga0000]

I made a pull request its showing some error , bcz i am new to github i dont know how to solve those and one more thing before merging the project check the backend connections with frontend bcz i dont have mysql locally so i didnt checked the connections so checkit, as of now the tsx files are working correctly in frontend

[amuchina]

I made a pull request its showing some error , bcz i am new to github i dont know how to solve those and one more thing before merging the project check the backend connections with frontend bcz i dont have mysql locally so i didnt checked the connections so checkit, as of now the tsx files are working correctly in frontend

nice, I will check if it is alright and then let you know.

[amuchina]

I made a pull request its showing some error , bcz i am new to github i dont know how to solve those and one more thing before merging the project check the backend connections with frontend bcz i dont have mysql locally so i didnt checked the connections so checkit, as of now the tsx files are working correctly in frontend

only one thing, when making a pull request make sure to set the target branch to "dev", not master

[bEluga0000]

I made a pull request its showing some error , bcz i am new to github i dont know how to solve those and one more thing before merging the project check the backend connections with frontend bcz i dont have mysql locally so i didnt checked the connections so checkit, as of now the tsx files are working correctly in frontend

only one thing, when making a pull request make sure to set the target branch to "dev", not master

how to do that i dont know

[amuchina]

I made a pull request its showing some error , bcz i am new to github i dont know how to solve those and one more thing before merging the project check the backend connections with frontend bcz i dont have mysql locally so i didnt checked the connections so checkit, as of now the tsx files are working correctly in frontend

only one thing, when making a pull request make sure to set the target branch to "dev", not master

how to do that i dont know

when creating the pull request on github there is a dropdown called "base" where you have to put the target branch in which you want to merge the code (usually dev). Then select the "source" branch, which is yours.

[bEluga0000]

did u checked the code is the code i pushed is okay