Mailbox not in the scope - elm

I am trying to create a frontend using elm with elm-router in order to manage the routing.
I have this main file :
-- Main.elm
import Router exposing (Route, match, (:->))
import History exposing (path)
import Routing as Routing exposing (route)
import Signal exposing ((<~))
import Html exposing (Html)
import Signal exposing (Mailbox, mailbox, Signal)
import Task exposing (Task)
import Test as Test exposing (pathChangeMailbox)
main : Signal Html
main = route <~ path
port runTask : Signal (Task error())
port runTask =
pathChangeMailbox.signal
This module to handle a mailbox. I could use a mailbox by page but it's ugly so I tried make a module to handle all the common code.
module Test where
import Signal exposing (Mailbox, mailbox, Signal)
import Task exposing (Task)
pathChangeMailbox : Mailbox (Task error ())
pathChangeMailbox = mailbox (Task.succeed())
I also have a module Routing to list the route and associate action to them.
And here is the module to handle the menu, and so the navigation.
module Menu where
import Html exposing (a, text, Html, div)
import Html.Events exposing (onClick)
import Task exposing (Task)
import History exposing (setPath)
import Test as Test exposing (pathChangeMailbox)
display : String -> Html
display _ =
div []
[
a []
[ onClick Test.pathChangeMailbox.address (setPath "/CV.elm") ]
[ text "Mon CV" ]
]
When I try to run the program I got the following error :
Error in .\src\Menu.elm:
Error on line 14, column 22 to 47:
Could not find variable 'Test.pathChangeMailbox.address'.
Looks like the prefix 'Test.pathChangeMailbox' is not in scope. Is it spelled correctly?
Is it imported correctly?
You can read about how imports work at the following address:
Do you have anyidea, why even if I import the Test module it's keep saying that Test.pathChangeMailbox is not in scope ?
Edit : Add Routing.elm
module Routing where
import Html exposing (Html, div, text, br)
import Signal exposing (Mailbox, mailbox, Signal)
import Task exposing (Task)
import Router exposing (match, (:->), Route)
-- Import displays
import CV as CV exposing (display)
import Home as Home exposing (display)
route : Route Html
route = match
[
"/src/Main.elm" :-> Home.display
, "/CV.elm" :-> CV.display
] display404
display404 : String -> Html
display404 url =
div []
[
text "Erreur 404"
, br [] []
, text ("url : " ++ url ++ " not found.")
]

I think you've found a bug here. You should file an issue.
EDIT: good job :) Summary of the link: The problem comes from mixing the . used for qualified module access and record access.
Here's a workaround for now, import the name unqualified and use it unqualified. Note I also removed an extra []:
## -4,13 +4,13 ## import Html exposing (a, text, Html, div)
import Html.Events exposing (onClick)
import Task exposing (Task)
import History exposing (setPath)
import Test as Test exposing (pathChangeMailbox)
display : String -> Html
display _ =
div []
[
- a []
- [ onClick Test.pathChangeMailbox.address (setPath "/CV.elm") ]
+ a
+ [ onClick pathChangeMailbox.address (setPath "/CV.elm") ]
[ text "Mon CV" ]
]
(Menu.elm)

Related

Missing keys issue in i18next with only one React Component

I am developing a react-project with multilingual (en and fr). Everything is working fine and I am able to translate my app from en to fr and vice versa. The translations are working when refreshing the page too.
I have one React Component that is unable to translate and is showing a missing key error.
i18next::translator: missingKey fr translation CampaignDetails.description CampaignDetails.description
Instead of translating the text for description, it is showing me CampaignDetails.description exactly
PROBLEM EXPLANATION
Go to this URL http://donatenow-9cc92.web.app/
Try changing the language at the rightside of the header. It will work.
There is a search field at the leftside in the header. Search for "mervice" and wait until the
charity shows up
You can see a card for the searched charity, click on the card anywhere but not on follow
button
The URL now looks like this https://donatenow-9cc92.web.app/mervice
Try changing the language now and it will work too.
Refresh this page https://donatenow-9cc92.web.app/mervice and you will see the translations
are still working
Now scroll this page https://donatenow-9cc92.web.app/mervice and at the bottom, you will see
some campaigns like 'Sadqah', 'Zakat' and 'Dollar a Day for Sadaqa'. Click on any campaign,
lets say you have clicked 'Sadqah'
Now the URL is something like this https://donatenow-9cc92.web.app/mervice/sadqah
Try changing the language from this route and it will work fine
The problem is if you click on this link https://donatenow-9cc92.web.app/mervice/sadqah
directly or refresh the page. The translation will not work and the console will give you
missing keys error
EXPLANATION TO POINT 11
1- I have a NotFound.js component in which I am checking if the URL has any charity name like mervice. For example, if the URL is like this domainName/mervice then I am extracting the mervice from the URL and doing a Axios call to fetch the charity and then navigating to the charity page
https://donatenow-9cc92.web.app/mervice (The translations are working no matter if the user has come directly to the page or He/She searched for the charity)
2- In the same function of NotFound.js in which I am fetching the charity, I am also fetching the campaign for the charity. I am checking if the URL is like this domaninName/mervice/campaign and then if the campaign is found for the charity (mervice in this case) then I am navigating to the campaign page.
3- https://donatenow-9cc92.web.app/mervice/sadqah (The translation will not work if you click on this link directly but translations will work if you do it manually like using the search field)
If the translation is working for this page https://donatenow-9cc92.web.app/mervice then why it is not working for this page https://donatenow-9cc92.web.app/mervice/sadqah
The component is the same, I am only navigating in this component based on the condition
Index.js
import React, { Suspense } from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import "./css/Auth.css";
import "./css/SearchOrganization.css";
import "./css/Profile.css";
import "./css/Donations.css";
import "./css/ReceiptModal.css";
import "./css/Recurring.css";
import { Provider } from "react-redux";
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import HttpApi from "i18next-http-backend";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import store from "./redux/store";
const root = ReactDOM.createRoot(document.getElementById("root"));
i18n
.use(initReactI18next)
.use(LanguageDetector)
.use(HttpApi)
.init({
debug: true,
supportedLngs: ["en", "fr"],
fallbackLng: "en",
detection: {
order: ["localStorage"],
caches: ["localStorage"],
},
backend: {
loadPath: "assets/locales/{{lng}}/translation.json",
},
interpolation: {
escapeValue: false,
},
});
root.render(
<Suspense fallback={null}>
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
</Suspense>
);
reportWebVitals();
NotFound.js
axios
.get(`${hostName}api/v1/search/organization?name=${lowercase}&type=shortName`)
.then((res) => {
if (res.data.data.length > 0) {
// setting states
setLoader(false);
setError("");
// local storage
localStorage.setItem("organization", JSON.stringify(res.data.data[0]));
// setting props
setOrganizationDetails(res.data.data[0]);
// setting organization path
const data = res.data.data[0];
const organizationName = data.shortName;
const cleanOrganizationName = organizationName.replace(
/[^a-zA-Z0-9]/g,
""
);
setOrganizationPath(cleanOrganizationName.toLowerCase()); // redirects to charity translation is working
// fetching campaign for the given organization
for (let i = 0; i < data.campaigns.length; i += 1) {
const word = data.campaigns[i].name.replace(/[^a-zA-Z0-9]/g, "");
const lowercase = word.toLowerCase();
if (secondString === lowercase) {
setCharityPath(lowercase); // redirects to campaign, translation not working
setCharityDetails(data.campaigns[i]);
localStorage.setItem("campaign", JSON.stringify(data.campaigns[i]));
break;
} else {
setCharityPath(null);
setCharityDetails(null);
localStorage.removeItem("campaign");
}
}
}
});

Vue project cannot resolve '#'

My vue-cli version is 4.5.15, but it cannot resolve # as ./src and all paths using '#' are not found. Why did this happen and how could I solve it?
Your statement tries to import a file which does not exist: import Layout from '#/layout' would work with layout.vue or layout/index.js, neither of which is present.
To fix this, you can either import the single components with their full path (as mentioned in #wittgenstein's comment): import Footer from '#/layout/Footer'
Or you can create layout/index.js which exposes all components inside the directory:
import Footer from './Footer.vue'
import Header from './Header.vue'
// ...
export default {
Footer, Header, // ...
}
Then you can import components like that: import { Footer, Header } from '#/layout'
It is not possible to import a folder, you will have to import a single file from the layout folder:
import Footer from "#/Layout/Footer.vue"
import Header from "#/Layout/Header.vue"
import Index from "#/Layout/Index.vue"
import Sidebar from "#/Layout/Sidebar.vue"
import Sidebar2 from "#/Layout/Sidebar2.vue"
If you want to import every file, you will have to this all manually, because you cannot import a folder.
Hope this will work for you!
I have known what the problem is. It's because I used 'Index.vue' as the name before and git is insensitive to capital. So it cannot find the path.
Vue has supported
import xxx from "#/xxx"
if the name of your file you want to import is "index.vue".
Thanks a lot for your answers!

Register, Login, Logout with django class based views

I am trying to make an authentication system with django class based views
What I have tried so far:
This is my views.py file:
from django.shortcuts import render
from django.views import generic
from .forms import UserRegistrationForm
from django.urls import reverse_lazy
class UserCreationView(generic.CreateView):
form_class = UserRegistrationForm
template_name = 'registration/register.html'
success_url = reverse_lazy('login')
This is forms.py file
from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth.models import User
class UserRegistrationForm(UserCreationForm):
email = forms.EmailField()
class Meta:
model = User
fields = ('username', 'email', 'password1', 'password2',)
widgets = {
'email': forms.EmailInput(attrs={'class':'input', 'placeholder': 'Email Address'})
}
This the urls.py file:
from django.urls import path
from .views import UserCreationView
urlpatterns = [
path('register/', UserCreationView.as_view(), name = 'register'),
]
Other urls.py file(urls.py file present in project folder)
path('users/', include(urls)),
path('users/', include('authentication.urls')),
The problem with this code is Whenever I login I can still login and register by going to the login url(login url in this case:http://localhost:8000/users/login/), How can I restrict user to log in again
I found out that the default LoginView() class on
django.contrib.auth import views
has a boolean attribute called
redirect_authenticated_user
And I believe this is what you are looking for.
Just look for class LoginView in https://docs.djangoproject.com/en/3.2/topics/auth/default/ and you will see it.

angular2 Dynamic Services in providers

i have a simple component like this:
import {Service1} from "serv1/sev1";
import {Service2} from "serv2/serv2";
import {Service3} from "serv3/serv3";
import {Component1} from "../........./Component"
#Component({
selector: "my-app",
directives: [Component1, CORE_DIRECTIVES],
templateUrl: "app.html",
providers: [Service1,
Service2,
Service3
]
})
export class MainComponent {
constructor(ser1: Service1, ser2: Serivce2, ser3:Service3) { }
}
bootstrap(MainComponent )
These services, via DI, will be used as Signleton in various other components of my project.
Now, i Know how to make the "Dynamic component Loader", but I m trying a way to Load, in dynamic way, these services.
So, avoid these "static" Import, read from a JSON file the services name and the services file path, maybe put them in an array, put this array inside the "providers", all of this at bootstrap time.
What do you think ?

Play Framework 2.2 - functional test fails with type mismatch

I've just upgraded to Play 2.2, and since the Helpers have changed, my test isn't compiling anymore.
import org.specs2.mutable.Specification
import play.api.test._
import play.api.test.Helpers._
import play.api.libs.ws._
import play.api.mvc.Results._
class ApplicationSpec extends Specification {
import controllers._
"Application" should {
"test WS logic" in new WithServer {
await(WS.url("http://localhost:3333").get()).status must equalTo(OK)
}
}
}
gives the following compile error
type mismatch;
[error] found : scala.concurrent.Future[play.api.libs.ws.Response]
[error] required: org.specs2.matcher.Matcher[?]
It's just a name clash between play.api.test.Helpers.await and org.specs2.matcher.FutureMatchers.await.
You could just refer to the play helper more explicitly (or rename your import):
Helpers.await(WS.url("http://localhost:3333").get()).status must equalTo(OK)
The following is probably better, however, which hasn't made it into the documentation yet:
https://github.com/playframework/playframework/blob/master/framework/src/play-test/src/main/scala/play/api/test/PlaySpecification.scala
So simply extend PlaySpecification instead of Specification in your test:
import org.specs2.mutable.Specification
import play.api.test._
import play.api.test.Helpers._
import play.api.libs.ws._
import play.api.mvc.Results._
class ApplicationSpec extends PlaySpecification {
import controllers._
"Application" should {
"test WS logic" in new WithServer {
await(WS.url("http://localhost:3333").get()).status must equalTo(OK)
}
}
}